디자인 썸네일형 리스트형 [Framer] 프레이머 스터디 : 코드 문법 분석하기 #1 프레이머는 하이 피델리티(High Fidelity) 프로토타이핑 툴이다. 피델리티(Fidelity)란 실제와 얼마나 유사하게 프로토타입을 구현해낼 수 있는가 하는 척도로 Low에서 High로 갈수록 더욱 정교한 인터렉션 구현이 가능하다. 이러한 장점때문에 러닝커브가 높음에도 불구하고 많은 프로토타이핑 툴 사이에서 굳건히 한 자리를 차지하고 있다. 모든것을 수행하는 디자인 도구. 여기에서 알 수 있듯 프레이머는 '디자이너'를 위해 만들어진 프로토타이핑 툴이다. 프레이머는 '커피스크립트'라는 언어를 사용하는데, 커피 스크립트는 '자바스크립트'의 여러 단점을 보완하기 위해 제안되었다. 코딩을 전혀 모르는 사람이 사용하기에 자바스크립트는 다소 진입 장벽이 높아 이를 위해 좀 더 읽고 쓰기 쉽게 만들어졌다고 한다.. 더보기 [Framer] 프레이머 스터디 : 디자인 불러오기 스케치에서 디자인 한 화면을 프레이머로 불러오기 프레이머에서 화면을 구성하는 방법은 세 가지가 있다. 방법1. 프레이머 내부의 디자인 탭을 이용해 직접 디자인하는 방법 방법2. 코드 탭을 사용하여 레이어를 추가하는 방법 방법3. 외부 그래픽 도구에서 화면을 가져오는 방법 프레이머 공식 홈페이지에서는 최적의 프레이머 Work Flow를 위해 디자인 탭에서 직접 디자인을 하는 것을 권장한다. 하지만 실제 업무에서 모든 디자인을 프레이머로 하기에는 다소 무리가 있다. 그래서 오늘은 외부 그래픽 툴로 디자인한 화면을 프레이머로 불러와 인터렉션을 적용하는 방법에 대해 정리해보려고 한다. 방법01 어렵지 않다. 스케치에서 불러오고 싶은 레이어나 아트보드를 선택하고 cmd + c, 프레이머의 디자인 탭에서 cmd +.. 더보기 [Framer] 프레이머 스터디 : Short cut 단축키 2018. 08. 28 업데이트 내용 1. Code cmd⌘ + R reload 다시 불러오기 2. Design - 캔버스 F 프레임 툴 R 사각형 툴 O 원형 툴 T 텍스트 툴 Z 확대 툴 ⌘+ 확대하기 ⌘- 축소하기 ⌘0 실제 크기로 보기 ⌘1 캔버스 중앙으로 보기 - 편집 0 - 9 오퍼시티 변경하기 ⌥ 거리 표시하기 ⌘D 복제하기 ⌥ 드래그복제하기 ⌥⌘C 스타일 복사 ⌥⌘V 스타일 붙이기 ⌃C 컬러 추출하기 ⌘A 모든 레이어 선택하기 - 배열 ⌥⌘↑앞으로 가져오기 ⌥⌘↓뒤로 보내기 ⌘; 숨기기 ⌘L 선택된 요소 잠그기 ⌘Enter 부모 레이어 추가하기 (Group) ⌘Delete 계층 구조 지우기 - 텍스트 ⌘B 볼드체로 바꾸기 ⌘I 이탤릭체로 바꾸기 ⌘U 밑줄 추가하기 ⌘T 폰트 바꾸기 더보기 UI 디자이너는 무슨 일을 하나요? 'UI 디자이너는 무슨 일을 하나요?'UI 디자이너라는 타이틀로 2년 가까이 일하면서도 여전히 이 질문은 저를 고민에 들게 합니다. 'UI 디자이너'를 어떻게 표현해야 좋을지 고민하다 그냥 '웹이나 앱을 디자인 해요' 정도로 넘겨버리기 일쑤인데요. 디자이너라는 타이틀이 워낙 광범위한 직무들을 포함하는데다 UX나 UI 등의 단어 자체의 생소함때문에 스스로를 간단히 소개하는 것이 매번 어렵게 느껴집니다. 그래서 오늘은 제가 생각하는 'UI 디자이너'에 대해서 이야기를 해볼까합니다. 여전히 저는 매일매일 새로운 경력을 쌓는 중이고 가보지 않은 방향도 많기때문에 업계에 갓 발을 담근 한 사람으로서의 생각이려니 하고 둥글게 들어주셨으면 합니다. 먼저 '디자이너'라는 직군에 대해서 살펴보겠습니다. 위키백과에서는 '.. 더보기 이전 1 2 다음
