figma·2018년 8월 22일·3분 읽기큐레이션 요약

프로토타이핑 위크의

Figma는 프로토타입이 실제 제품처럼 반응하도록 다양한 사용자 입력 기반의 **Interactions** 기능을 공개했다. 클릭·호버·누르기뿐 아니라 마우스 진입/이탈과 누름·해제, 일정 시간 후 전환까지 지원해 사용자 테스트의 현실성을 높인다. 또한 Prototyping Week 동안 가로형 디바이스 프레임, 외부 URL 연결, 뒤로 가기 전환도 함께 출시했다. ## 사용자 입력에 반응하는 Interactions - Figma에서 지원하는 상호작용은 다음과 같다. - **On Click**: 클릭 시 화면이나 상태 전환 - **While Hovering**: 마우스를 올리고 있는 동안 상태 변경 - **While Pressing**: 누르고 있는 동안 눌림 상태 표시 - **Mouse Enter / Mouse Leave**: 마우스가 영역에 들어오거나 나갈 때 동작 - **Mouse Down / Mouse Up**: 마우스 버튼을 누르는 순간과 놓는 순간의 동작 - **After Delay**: 지정한 시간이 지나면 자동 전환 - 디바이스 프레임을 선택한 경우 일부 상호작용은 모바일 환경에 맞춰 **On Tap, Touch Down, Touch Up**으로 표시된다. ## 버튼 상태와 메뉴 동작 구현 - **On Click**, **While Hovering**, **While Pressing**은 버튼이나 목록 항목의 상태를 표현하는 데 유용하다. - 예를 들어 메뉴 항목에 마우스를 올리면 배경색을 바꾸어 실제 웹 UI의 호버 상태를 재현할 수 있다. - **Mouse Enter**와 **Mouse Leave**를 사용하면 드롭다운 메뉴처럼 더 세밀한 동작을 구현할 수 있다. - Mouse Enter로 메뉴를 열면 사용자가 다른 상호작용을 수행할 때까지 메뉴가 열린 상태를 유지하도록 만들 수 있다. - 이러한 기능은 단순한 화면 연결을 넘어, 실제 제품의 입력 피드백과 상태 변화를 프로토타입에 반영한다. ## After Delay를 활용한 자동 전환 - **After Delay**는 특정 시간이 지나면 자동으로 다음 화면으로 이동시킨다. - 알림 표시, 자동 리디렉션, 일정 시간이 지난 뒤 나타나는 화면 등을 표현할 수 있다. - 이 전환은 특정 하위 레이어가 아니라 프레임 전체와 연결되므로, 한 화면에서 다른 화면으로만 설정할 수 있다. ## Prototyping Week의 추가 출시 기능 ### 가로형 디바이스 프레임 - 기존 발표용 디바이스 프레임 기능을 가로 방향 화면에도 적용할 수 있게 했다. - 모바일 가로 화면이나 태블릿처럼 sideways로 보는 디자인을 실제 기기 형태에 가깝게 보여준다. ### Clickable URLs - 프로토타입 프레임에서 외부 웹사이트나 다른 Figma 파일로 연결되는 링크를 만들 수 있다. - 예를 들어 발표 자료 마지막 화면에서 개인 웹사이트나 포트폴리오로 바로 이동시킬 수 있다. ### Back Transitions - 사용자가 이전 화면으로 돌아갈 수 있는 뒤로 가기 전환을 제공한다. - 하나의 화면이 여러 경로에서 접근되더라도 화면을 복제하거나 경로별 전환을 따로 만들 필요가 없다. - 현재 프레임으로 이동할 때 애니메이션 전환을 사용했다면, 뒤로 갈 때 해당 애니메이션이 역방향으로 재생된다. ## 향후 방향 - Figma 팀은 추가 프로토타이핑 기능을 개발 중이며, 당시 커뮤니티에서는 특히 **오버레이(Overlays)** 기능에 대한 요구가 많았다. - Figma는 사용자 의견과 리서치를 바탕으로 프로토타이핑 기능의 우선순위와 형태를 발전시키고자 했다. 실무에서는 기본 화면 이동만 연결하기보다 호버·눌림·드롭다운·자동 전환을 함께 구성하는 것이 좋다. 이를 통해 실제 사용 흐름에 가까운 프로토타입을 만들고, 개발 전에 인터랙션과 사용자 경험을 더 정확하게 검증할 수 있다.

원문 읽기(새 탭에서 열림)

Figma프로토타이핑interaction-designuser-interface-design+2

figma·2018년 8월 21일·2분 읽기큐레이션 요약

#FigmaTip 라운드업

Figma의 10번째 팁 모음은 디자이너 Charli Marie의 리뷰에서 소개된, 작업 속도와 파일 정리 효율을 높이는 기능들을 정리한 글이다. 핵심은 레이어 단축키, 빈 그룹 자동 삭제, 속성별 복사, 이미지 fill 설정, 벡터 네트워크 등을 활용하면 Sketch나 Illustrator를 열지 않고도 더 빠르고 깔끔하게 작업할 수 있다는 것이다. ## 레이어 순서 조정 단축키 - `Command + [` 및 `Command + ]`로 선택한 레이어를 앞뒤로 이동할 수 있다. - 레이어 패널에서 직접 드래그하지 않아도 되므로 디자인 중 요소의 순서를 빠르게 바꿀 수 있다. - 메뉴에 단축키가 표시되어 있어 잊어버렸을 때 확인하기 쉽다. - Photoshop과 유사한 방식이라 기존 사용자도 쉽게 익힐 수 있다. ## 빈 그룹 자동 삭제 - 그룹 안의 모든 요소를 삭제하면 해당 그룹도 자동으로 사라진다. - 내용이 없는 그룹을 수동으로 찾아 삭제할 필요가 없다. - 요소를 다른 곳으로 옮긴 뒤 빈 그룹이 남아 파일이 지저분해지는 문제를 줄여준다. - 결과적으로 레이어 패널을 더 깔끔하게 유지할 수 있다. ## 개별 속성만 복사하기 - 한 도형의 속성을 다른 도형에 복사할 때 전체 속성 또는 일부 속성만 선택할 수 있다. - 복사 가능한 예시는 다음과 같다. - Fill - Font - Stroke - 기존 디자인에서 잘 설정된 특정 속성만 다른 요소에 적용할 수 있다. - 전체 스타일을 덮어쓰지 않고 필요한 부분만 재사용할 수 있어 반복 작업이 빨라진다. ## 마스크 대신 이미지 Fill 활용 - Figma에 이미지를 삽입하면 이미지가 독립적인 이미지 객체가 아니라, 이미지가 Fill로 적용된 사각형 형태로 생성된다. - Fill 설정에서 이미지를 조정할 수 있다. - Crop - Tile - 이미지 표시 방식과 위치 - 이미지 크롭을 위해 여러 마스크를 만들 필요가 줄어든다. - 처음에는 기존 그래픽 도구와 달라 혼란스러울 수 있지만, 이미지 배치와 편집을 단순화하는 방식이다. ## 벡터 네트워크로 복잡한 도형 만들기 - Figma의 벡터 네트워크에서는 하나의 점이 두 개 이상의 선과 연결될 수 있다. - 일반적인 벡터 편집 도구의 경로 구조보다 자유로운 형태의 도형을 만들 수 있다. - 복잡한 벡터를 제작할 때 Illustrator로 파일을 옮겨야 하는 상황을 줄여준다. - 기존 벡터 편집 방식과 달라 적응이 필요하지만, 익숙해지면 Figma 안에서 대부분의 작업을 처리할 수 있다. ## 실용적인 활용 Figma 작업 속도를 높이려면 레이어 이동 단축키를 우선 익히고, 반복되는 스타일은 필요한 속성만 복사하는 것이 좋다. 이미지 작업에서는 마스크를 무조건 사용하는 대신 Fill 설정을 확인하고, 복잡한 아이콘이나 도형은 벡터 네트워크를 활용하면 파일 구조를 단순하게 유지하면서 효율적으로 제작할 수 있다.

원문 읽기(새 탭에서 열림)

Figma사용자 경험sketchvector-graphics+2

figma·2018년 8월 15일·4분 읽기큐레이션 요약

마이크로소프트 디자이너

Microsoft 디자이너 Jackie Chui는 사내 아이콘 4,000개를 한곳에서 검색·분류·복사할 수 있는 브라우저 기반 라이브러리를 3주 만에 만들었다. 디자이너용 태그와 엔지니어용 클래스명, 아이콘을 붙여 넣어 메타데이터를 찾는 역검색 기능을 제공해 도구 간 단절을 해결했다. 이 사례는 기존 제품을 그대로 사용하는 대신 실제 사용자의 요구를 조사하고, 익숙한 기술과 단계적인 학습으로 맞춤형 도구를 만들 수 있음을 보여준다. ## 문제 발견과 기존 도구의 한계 - Jackie는 Microsoft 디자이너들의 작업 과정을 관찰하고 아이콘 관리에서 겪는 불편을 조사했다. - 기존 제품 중에서는 IconJar가 아이콘 정리와 복사·붙여넣기를 지원했지만 Microsoft의 요구에는 부족했다. - 여러 사용자가 아이콘 태그를 추가하고 공유할 수 없었다. - 브라우저 기반이 아니어서 아이콘을 클라우드에서 공동으로 사용할 수 없었다. - Mac 전용이라 Windows 중심 조직에 적합하지 않았다. - 이에 따라 특정 운영체제나 디자인 도구에 종속되지 않는 자체 도구를 만들기로 했다. ## 브라우저 기반 아이콘 라이브러리 설계 - 초기 UI는 Sketch로 설계하고 IconJar에서 아이디어를 얻되, Microsoft Fabric 디자인 언어에 맞게 스타일을 조정했다. - 브라우저에서 작동하도록 만들어 사용자가 선호하는 디자인 도구와 관계없이 접근할 수 있게 했다. - 아이콘마다 다음 정보를 연결했다. - 디자이너가 찾기 쉬운 태그와 분류명 - 엔지니어가 코드에서 사용하는 클래스명 - 실제 복사·붙여넣기에 필요한 유니코드 아이콘 문자 - 아이콘을 검색해 바로 복사할 수 있게 해, 디자이너가 자주 쓰는 아이콘 문자를 별도 파일에 보관하던 방식을 없앴다. - 아이콘을 라이브러리에 붙여 넣으면 관련 메타데이터를 역으로 찾을 수 있는 기능도 제공했다. ## 익숙한 기술로 빠르게 개발 - Jackie는 포트폴리오 제작을 통해 익힌 HTML, CSS, JavaScript 경험을 기반으로 개발을 시작했다. - 프런트엔드와 백엔드 데이터베이스를 함께 구축하기 쉬운 JavaScript 프레임워크 Meteor.js를 선택했다. - Meteor 튜토리얼의 할 일 목록 데이터베이스 예제를 아이콘 데이터베이스로 확장했다. - 새로운 기술을 완전히 습득한 뒤 시작하기보다, 해결해야 할 실제 문제를 중심으로 필요한 내용을 학습하며 개발했다. - 기획과 디자인 경험에 엔지니어링 지식을 결합해 짧은 기간 안에 작동하는 제품을 완성했다. ## 아이콘 데이터 수집과 변환 - 아이콘은 일반적으로 폰트 파일에 저장되며, 키보드로 직접 입력할 수 없는 전용 유니코드 문자를 복사해 사용한다. - Jackie는 회사의 아이콘 폰트 파일을 다운로드하고 각 아이콘의 실제 유니코드 문자를 추출했다. - Microsoft 문서에서 엔지니어가 사용하는 아이콘 이름과 클래스명 목록을 확보했다. - 아이콘 이름 목록을 Excel로 정리한 뒤 JSON으로 변환해 애플리케이션 데이터로 사용했다. - 이렇게 아이콘 문자, 표시 이름, 클래스명, 태그를 하나의 검색 가능한 시스템으로 통합했다. ## 배포와 사용자 피드백 - 약 3주간의 개인 작업 끝에 첫 버전을 완성하고 Microsoft Azure에 호스팅했다. - 처음에는 팀에 간단한 이메일과 링크만 공유했지만, 사용자들의 입소문을 통해 디자인 스튜디오 전체로 확산됐다. - 동료들은 버그를 제보하고 새 기능을 제안하며 제품 개선에 참여했다. - 도구는 빠르게 여러 디자이너의 일상적인 작업 흐름에 포함됐다. - 이후 V2에서는 버그 수정과 기능 보강을 진행하고 다른 Microsoft 팀으로 확장할 계획이었다. ## Figma 컴포넌트로의 확장 - 향후 4,000개 이상의 아이콘을 한 번에 Figma 컴포넌트로 변환하는 기능을 계획했다. - 사용자는 별도 라이브러리를 거치지 않고 Figma 안에서 아이콘을 검색하고 정리할 수 있게 된다. - 장기적으로는 아이콘 폰트 파일을 업로드하면 누구나 Figma 컴포넌트로 변환할 수 있는 도구로 발전시키려 했다. - 기존 도구를 대체하는 다음 버전을 만드는 것이 목표라는 점에서, 제품은 사용자의 작업 흐름에 맞춰 계속 진화한다. 실용적으로는 먼저 사용자의 반복적인 불편을 관찰하고, 기존 도구의 부족한 점을 명확히 정의하는 것이 중요하다. 이후 모든 기능을 완성하려 하기보다 검색·분류·복사처럼 핵심 작업만 지원하는 최소 버전을 빠르게 배포하고, 실제 사용자 피드백을 바탕으로 확장하는 접근이 효과적이다.

원문 읽기(새 탭에서 열림)

FigmaReactJavaScriptCSS+4

figma·2018년 8월 14일·4분 읽기큐레이션 요약

피그마의 새로운 SVG 내

Figma는 SVG에 정보를 최대한 많이 담는 방식보다, 단순하고 작은 마크업이 다양한 도구와 더 잘 호환된다는 결론에 도달했다. 새 SVG Exporter는 불필요한 구조와 중복을 제거하고, 기본 도형과 간결한 경로를 사용해 파일 크기와 가독성, 호환성을 개선했다. 특히 Android Studio처럼 SVG 일부 기능만 지원하는 도구에서도 더 안정적으로 가져올 수 있도록 설계했다. ## SVG가 도구마다 다르게 렌더링되는 이유 - SVG는 JPG·PNG와 달리 픽셀 이미지가 아니라 화면에 이미지를 그리는 명령어로 구성된 벡터 형식이다. - 확대해도 선명하기 때문에 로고, 아이콘, 반응형 웹 자산에 적합하다. - 하지만 SVG 마크업을 픽셀로 변환하는 표준 렌더링 방식은 없다. - 각 디자인 도구와 개발 도구가 자체 SVG 파서와 렌더러를 사용하며, SVG 사양 전체가 복잡해 많은 도구가 일부 기능만 지원한다. - 예를 들어 `defs`에 정의한 요소를 `use`로 재사용하는 기능은 Android Studio에서 대부분 제대로 지원되지 않는다. - Figma의 기존 SVG는 복잡한 그룹, 마스크, 클리핑 패스, 중복 참조 때문에 파일이 크고 사람이 읽기 어려웠다. - 사용자들은 SVGO, svgito 같은 후처리 도구를 사용하거나 SVG를 직접 정리해야 했다. ## “모든 정보를 보존하자”는 기존 접근의 한계 - Figma는 디자인 도구 간 SVG 교환이 보편적인 데이터 형식이 되기를 기대했다. - 그래서 다른 도구가 디자인을 정확하게 가져갈 수 있도록 SVG에 가능한 한 많은 구조적 정보를 포함했다. - 그러나 실제 생태계에서는 도구마다 지원 범위와 구현 품질이 달랐다. - 결과적으로 더 많은 정보가 정확성을 보장하기보다, 일부 도구에서는 import 실패와 파일 비대화의 원인이 됐다. - 새 Exporter는 이상적인 상호 운용성보다 실제 사용 환경에서의 호환성과 단순성을 우선한다. ## 기본 도형을 SVG 프리미티브로 표현 - 단순한 사각형과 원을 복잡한 `path` 명령어로 표현하지 않고 SVG의 기본 도형 요소를 사용한다. - 기존 방식: ```xml <path d="M0 100V0H100V100H0Z"/> ``` - 변경된 방식: ```xml <rect width="100" height="100"/> ``` - `rect`, `circle` 같은 요소는 의미가 명확해 사람이 읽고 수정하기 쉽다. - 마크업 길이도 줄어들어 파일 크기와 처리 부담을 낮춘다. ## 내부선과 외부선 처리 방식 개선 - SVG의 기본 stroke는 도형 경계의 중앙에만 그려진다. - 디자인 도구에서 지원하는 내부선(inside stroke)이나 외부선(outside stroke)을 표현하려면 별도 우회가 필요하다. - 기존 Figma 방식은 stroke 폭을 두 배로 늘린 뒤 `mask`로 불필요한 절반을 숨겼다. - 이 방식은 `mask`, 중복 경로, 추가 참조를 만들어 SVG를 복잡하게 만들었다. - 새 방식은 도형의 좌표 자체를 조정한다. - 내부선은 도형의 경계를 안쪽으로 이동한 뒤 원래 stroke 폭을 사용한다. - 외부선도 시각적 결과에 맞도록 경로 위치를 조정한다. - 따라서 마스크 없이도 유사한 시각적 결과를 얻고 마크업을 크게 줄일 수 있다. ## 불필요한 마크업 제거 - 렌더링에 직접 영향을 주지 않는 요소와 속성을 제거한다. - `title` - `desc` - 불필요한 `g` - `id` - `version` - 클리핑도 항상 출력하지 않고 실제로 필요할 때만 생성한다. - 기존에는 클리핑 여부와 관계없이 프레임에 `clipPath`를 넣었지만, 새 방식은 효과가 없는 마크업을 생략한다. - `defs`에 요소를 정의하고 `use`로 참조하던 구조도 가능한 경우 인라인 요소로 바꾼다. - 중복 제거 효과는 일부 포기하지만, 여러 SVG importer가 더 안정적으로 처리할 수 있고 구조가 훨씬 단순해진다. ## 최종 결과 - 작은 검은색 사각형과 회색 내부선을 표현하는 기존 SVG는 여러 단계의 그룹, 클리핑 패스, 마스크, `use` 참조로 구성됐다. - 새 SVG는 다음처럼 단일 `rect` 요소와 속성만으로 표현된다. ```xml <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="15" y="15" width="70" height="70" fill="black" stroke="#CCCCCC" stroke-width="10"/> </svg> ``` - 결과적으로 SVG가 더 작고, 읽기 쉽고, 직접 수정하기 쉬워졌다. - Android Studio 같은 제한적인 SVG 지원 환경과의 호환성도 개선됐다. Figma의 사례는 SVG를 생성할 때 정보와 추상화를 무조건 많이 보존하기보다, 실제 소비 도구가 안정적으로 이해할 수 있는 최소한의 마크업을 사용하는 것이 실용적임을 보여준다. SVG를 배포할 때는 기본 도형, 단순한 경로, 필요한 경우에만 사용하는 마스크·클리핑을 우선하고, SVGO 같은 최적화 도구로 후처리하는 것도 유용하다.

원문 읽기(새 탭에서 열림)

Figmavector-graphicssvgandroid-studio+2

figma·2018년 8월 12일·3분 읽기큐레이션 요약

파일 로딩, 드래

Figma는 디자인 도구가 사용자의 사고와 손동작을 즉시 따라가려면 성능이 핵심이라고 강조한다. 문서 렌더러 재구성, WebAssembly 최적화 등을 통해 대용량 파일 로딩과 줌·드래그 성능을 최대 3배 개선했으며, 실제 사용자 문서와 프레임 시간 지표를 기반으로 효과를 측정했다. 특히 단순한 평균 속도뿐 아니라 화면 피드백의 끊김까지 함께 줄이는 것을 목표로 삼았다. ## 성능이 창작 경험을 좌우하는 이유 - 디자인 도구의 지연은 사용자의 사고와 화면 조작 사이에 간극을 만든다. - Figma는 제품이 사용자의 창의적 사고와 신체 움직임을 자연스럽게 확장해야 한다고 본다. - 따라서 기능을 추가하는 것뿐 아니라, 실제 사용 문서에서 성능 병목을 지속적으로 찾아 개선하는 과정이 필요하다. - 이번 작업에서는 문서 렌더러 구조를 재설계하고 WebAssembly 관련 문제를 해결해 큰 폭의 성능 향상을 얻었다. ## WebAssembly와 렌더러 최적화로 파일 로딩 개선 - 대규모 조직에서는 여러 겹으로 중첩된 컴포넌트와 다양한 상태를 하나의 복잡한 문서에 담는다. - Microsoft Fluent Design 팀은 Windows 기본 컨트롤의 모든 상태와 조합을 하나의 Figma 파일에 구성해 로딩 성능의 한계를 시험했다. - 실제 대형 문서의 로딩 시간이 **29초에서 8초 이하**로 감소했다. - WebAssembly 최적화와 여러 렌더링 관련 변경 사항이 약 두 달 동안 적용됐다. - WebAssembly는 macOS·Windows의 데스크톱 앱과 Chrome, Firefox, Safari 등 주요 환경에 활성화됐다. - 결과적으로 복잡한 파일의 로딩뿐 아니라 전반적인 문서 처리 성능도 향상됐다. ## 줌과 드래그의 연속적인 상호작용 - 파일을 연 뒤에도 줌인·줌아웃과 레이어 드래그처럼 반복적으로 수행하는 작업의 반응성이 중요하다. - Figma는 화면이 순간적으로 멈추는 ‘hitch’를 줄이는 데 집중했다. - 줌 성능과 드래그 성능이 모두 최대 **3배** 개선됐다. - 이미지가 많이 포함된 복잡한 파일을 사용하는 N3TWORK는 새 렌더러 적용 후 컴포넌트 게시와 파일 로딩 속도의 변화를 즉시 체감했다. - 이 사례는 일반적인 벤치마크뿐 아니라 특정 사용자의 실제 문서와 작업 방식에 맞춘 최적화도 큰 효과를 낼 수 있음을 보여준다. ## 평균 프레임 시간과 최대 프레임 시간을 함께 측정하는 이유 - 연속적인 조작에서는 작업이 끝나는 총 시간보다 조작 중 화면이 얼마나 부드럽게 갱신되는지가 중요하다. - 같은 500ms가 걸리는 작업이라도 매 순간 화면을 보여주는 경우와 끝날 때까지 아무 피드백이 없는 경우의 체감 품질은 크게 다르다. - Figma는 직접 조작감을 중시하기 때문에 다음 두 지표를 함께 추적한다. - **평균 프레임 시간**: 전반적인 화면 갱신 속도와 부드러움을 나타낸다. - **최대 프레임 시간**: 특정 순간에 발생하는 긴 지연과 끊김을 나타낸다. - 최대 프레임 시간이 커지면 드래그 중 갑자기 멈추는 듯한 ‘걸림’이 발생한다. - 평균 프레임 시간이 커지면 화면 전체가 낮은 프레임 레이트로 동작해 지속적으로 버벅거린다. - 예를 들어 평균 프레임 레이트가 같아도 일부 프레임만 200ms 또는 367ms 지연되면 움직임이 불규칙하게 끊긴다. - 반대로 최대 지연 시간이 같더라도 긴 프레임 지연이 자주 발생하면 전체 화면이 더 심하게 끊겨 보인다. - 이상적으로는 항상 60fps 이상을 유지해야 하지만, 현실적인 개선 과정에서는 두 지표를 시간에 따라 추적하는 것이 유용하다. ## 실제 사용자 문서를 기준으로 한 성능 개선 - Figma는 인위적인 테스트 파일만이 아니라 사용자가 공유한 실제 문서를 분석해 최적화 대상을 찾았다. - 문서의 컴포넌트 중첩 수준, 비트맵 이미지 수, 디자인 시스템의 복잡도 등 현실적인 조건을 반영했다. - 사용자와 직접 문제를 진단하고 새 렌더러를 적용해 즉각적인 성능 변화를 확인하는 방식도 활용했다. - 이는 성능 최적화가 단일 벤치마크 수치를 높이는 작업이 아니라, 실제 작업 흐름에서 지연과 불연속적인 피드백을 제거하는 과정임을 보여준다. 복잡한 디자인 문서를 주로 다룬다면 파일 크기 자체보다 컴포넌트 중첩, 이미지 밀도, 렌더링 구조가 성능에 미치는 영향을 살펴보는 것이 중요하다. 성능을 평가할 때도 평균 속도만 보지 말고, 순간적인 프레임 지연과 사용자 조작 중 발생하는 끊김을 함께 측정해야 한다.

원문 읽기(새 탭에서 열림)

Figma성능 최적화webassemblyrendering+1

figma·2018년 8월 11일·3분 읽기큐레이션 요약

디자이너 Q&A:

Camellia Neri는 창의성의 원천이 어린 시절의 경험과 향수에서 비롯된다고 말한다. 디즈니랜드의 세밀함, 예측 불가능한 유머, 자연사 박물관의 장면 구성, 작가와 일러스트레이터의 협업, 도시의 숨은 역사에서 영감을 얻으며 이를 일러스트 작업에 적용한다. 결국 좋은 창작은 세심한 조사와 의도, 개성 있는 디테일, 그리고 협업을 통해 익숙한 이야기를 새롭게 보여주는 데서 나온다. ## 어린 시절의 경험과 향수 - 영감의 상당 부분은 어린 시절 경험한 장소와 작품에서 비롯된다. - 과거의 감정과 분위기를 현재의 작업 속에서 재현하려고 한다. - 일러스트레이터에게 향수는 단순한 추억이 아니라, 관객이 공감할 수 있는 세계를 만드는 재료가 된다. ## 디즈니랜드 메인 스트리트의 세밀함 - 어린 시절 디즈니랜드 퍼레이드를 보며 가짜 상점과 건물의 정교한 장식에 깊은 인상을 받았다. - 금박 장식과 상품을 보여주는 창문 등, 작은 요소들이 실제 세계처럼 느껴지도록 구성되어 있었다. - 새로운 일러스트를 시작할 때도 충분한 조사와 의도를 바탕으로 이야기를 설계한다. - 세부 요소를 공들여 쌓아 올릴수록 작품의 세계관이 더 진정성 있게 전달된다고 본다. ## 《Pee-Wee’s Playhouse》의 예측 불가능성 - 코미디, 인형극, 기묘한 분위기, 교훈, 독특한 미술이 결합된 프로그램에서 영감을 받았다. - Ric Heitzman, Gary Panter, Wayne White 등의 시각적 작업을 특히 높이 평가한다. - 작품 곳곳에 부모도 발견할 수 있는 이스터에그가 숨겨져 있어 예상 밖의 즐거움을 제공했다. - 성공적인 일러스트레이션은 작가만의 작은 장난과 의외의 순간을 삽입해 개성과 독창성을 드러낸다. ## 자연사 박물관의 디오라마 구성 - 로스앤젤레스 자연사 박물관의 박제 디오라마를 거대한 2D 일러스트처럼 바라본다. - 동물의 위치, 행동, 배경 풍경이 하나의 서사적 장면을 구성한다. - 생태계에 맞춘 색상 팔레트와 조명, 캐릭터 배치가 완성도 높은 경험을 만든다. - 이러한 원리는 스토리텔링이 뛰어난 랜딩 페이지에도 적용된다. - 명확한 시각적 구성 - 효과적인 색상과 조명 - 장면 속 요소들의 관계 - 전체 경험을 하나로 묶는 서사 ## 쿠엔틴 블레이크와 로알드 달의 협업 - 로알드 달의 이야기와 쿠엔틴 블레이크의 일러스트가 결합해 작품의 매력을 완성했다고 평가한다. - 《제임스와 거대한 복숭아》, 《마틸다》, 《찰리와 초콜릿 공장》, 《마녀를 잡아라》 등이 대표적인 사례다. - 작가와 일러스트레이터의 관계는 영화감독과 반복적으로 함께 작업하는 배우의 관계처럼 공동의 비전을 만들어낸다. - 좋은 글쓰기 파트너를 선택하고, 잘 맞는 협업 관계를 지속적으로 발전시키는 것이 중요하다. ## 샌프란시스코의 숨은 역사 - 샌프란시스코의 골드러시와 도시 개발에 얽힌 잘 알려지지 않은 역사적 사실을 창작의 소재로 삼는다. - 숨은 이야기를 조사하고 이를 일러스트로 재구성하는 별도의 Medium 프로젝트도 운영한다. - 도시의 묻힌 배와 같은 역사적 사건은 눈에 보이지 않는 세계를 시각화하는 일러스트레이터의 역할을 보여준다. - Figma를 활용해 여러 일러스트가 하나의 일관된 브랜드처럼 보이도록 관리한다. 작업에 영감을 얻고 싶다면 자신의 어린 시절 기억뿐 아니라 자주 방문한 장소, 좋아했던 대중문화, 박물관의 전시, 협업 경험, 지역의 역사까지 관찰해보는 것이 좋다. 특히 세밀한 조사와 예상 밖의 디테일을 더하면 개인적인 기억이 독창적인 시각 언어로 발전할 수 있다.

원문 읽기(새 탭에서 열림)

Figma사용자 경험graphic-designillustration+2

figma·2018년 8월 9일·4분 읽기큐레이션 요약

투명하고 개방적인 디자인이

Citrusbyte는 완성된 시안만 공개하는 대신, 작업 중인 디자인 파일을 클라이언트와 실시간으로 공유하는 ‘투명한 오픈 디자인’을 실천한다. Figma의 클라우드·실시간 협업 기능 덕분에 피드백 과정이 빨라지고 불필요한 파일 전달과 커뮤니케이션이 줄어들었다. 그 결과 프로젝트 이해도와 고객 참여가 높아졌으며, 디자이너의 작업 시간과 리뷰 주기도 크게 단축됐다. ## 전통적인 비공개 디자인 프로세스의 한계 - 디자이너는 완성도가 충분히 높아질 때까지 작업물을 외부에 공개하지 않는 경우가 많다. - 기존에는 Sketch나 Photoshop 파일을 내보내 이메일로 보내거나, Dropbox·Google Drive에 동기화해야 했다. - 클라이언트가 프로젝트의 진행 상황을 지속적으로 확인하기 어렵고, 최신 파일이 무엇인지 혼란이 생겼다. - PNG·PDF 이미지로 피드백을 주고받으면 클라이언트가 어느 부분을 지칭하는지 명확하지 않아 불필요한 대화가 반복됐다. - InVision 같은 프로토타이핑 도구를 사용할 때도 디자인을 평면 파일로 저장한 뒤 새 버전을 다시 업로드해야 했다. ## 클라이언트에게 작업 과정을 공개하는 이유 - Citrusbyte는 초기 단계부터 클라이언트가 프로젝트의 발전 과정을 볼 수 있어야 한다고 판단했다. - Figma에서는 하나의 링크로 항상 최신 디자인 파일에 접근할 수 있다. - 여러 사람이 같은 파일에 동시에 들어와 실시간으로 변경 사항을 확인할 수 있다. - 클라이언트는 완성된 결과물만 받는 것이 아니라, 디자인이 만들어지는 과정 자체에 참여한다. - 작업 상황을 직접 볼 수 있어 프로젝트가 ‘블랙박스’처럼 느껴지지 않고 심리적 안정감이 커진다. - 프로젝트에 직접 참여한 클라이언트는 현재 진행 상황과 의사결정의 맥락을 더 잘 이해하므로 결과물에 대한 공감대와 참여도가 높아진다. ## 미완성 작업을 공개할 때의 위험과 대응 - 작업 중인 파일은 구조가 복잡하거나 시각적으로 정리되지 않아 클라이언트가 결과물을 오해할 수 있다. - 디자이너 입장에서는 미완성 결과물을 보여주는 것이 부담스럽고, 창작 과정이 평가받는 것처럼 느껴질 수 있다. - Citrusbyte는 이를 커뮤니케이션과 기대치 관리로 해결한다. - Pablo Franco는 “자전거를 원하더라도 작업 중인 나를 보면 체인을 조립하고 있는 모습을 보게 된다”는 비유를 사용해, 현재 보이는 화면이 최종 결과물이 아님을 설명한다. - 공개의 목적이 완성품 평가가 아니라 진행 상황 공유와 협업이라는 점을 사전에 합의한다. ## 실시간 피드백으로 빨라지는 협업 - 클라이언트는 디자인 파일에서 직접 변경 사항을 확인하고, 필요한 경우 일부 요소를 스스로 실험할 수 있다. - 예를 들어 헤드라인 문구를 바꿔 어떤 표현이 더 적절한지 직접 비교할 수 있다. - 간단한 문구 수정 때문에 긴 이메일 대화를 주고받는 일이 줄어든다. - 디자이너는 반복적인 수정 요청을 처리하는 대신 핵심적인 디자인 작업에 집중할 수 있다. - 디자인과 프로토타입이 같은 최신 파일에 연결되어 있어 변경 후 별도의 재업로드가 필요 없다. ## Figma 기능이 제거한 불필요한 작업 - Figma의 웹 기반 환경은 파일 버전 관리와 공유 과정을 단순화한다. - 정기적인 클라이언트 리뷰에서는 발표자가 자신의 아바타를 클릭한 사용자가 화면을 따라오도록 하는 ‘관찰 모드’를 활용할 수 있다. - 발표자는 별도의 프레젠테이션용 파일이나 복잡한 플로우 연결 화면을 준비하지 않고, 실제 디자인 파일을 이동하며 설명하면 된다. - 이러한 작은 기능들이 파일 내보내기, 업로드, 발표용 화면 구성 같은 반복 작업을 없앴다. - Citrusbyte의 디자이너 Sam Small은 이전 방식과 비교해 Figma 사용으로 작업 시간이 약 30~50% 절약된다고 평가했다. ## 생산성과 고객 만족도 향상 - 작업 과정이 투명해지면서 클라이언트가 프로젝트에 더 많이 참여하고 결과물에 대한 이해도도 높아졌다. - 피드백 전달 위치가 명확해져 커뮤니케이션 왕복 횟수가 감소했다. - 리뷰 준비에 들던 시간이 줄어들어 공격적인 일정의 프로젝트도 수행하기 쉬워졌다. - Citrusbyte는 절약된 시간만큼 더 많은 프로젝트를 맡을 수 있었다. - 고객사 SundaySky는 Figma를 사용한 프로젝트에서 리뷰 주기가 절반으로 줄어든 점을 긍정적으로 평가했다. - Citrusbyte는 스타트업 중심의 고객 기반에서 Apple, Sony, Intel, AT&T 등 Fortune 1000 기업으로 사업을 확장했으며, 투명한 협업 방식이 이러한 성장과도 연결된다고 설명한다. ## 실용적인 적용 방법 - 프로젝트 시작 전에 클라이언트에게 작업 중인 화면이 미완성 상태일 수 있음을 명확히 알린다. - 하나의 최신 Figma 파일을 프로젝트의 기준점으로 삼고, 이메일 첨부 파일이나 중복된 버전 생성을 줄인다. - 클라이언트가 직접 확인하고 의견을 남길 수 있도록 적절한 접근 권한을 제공한다. - 정기 리뷰에서는 관찰 모드와 실시간 화면 공유를 활용해 별도 발표 자료 제작을 최소화한다. - 투명성은 단순히 파일을 공개하는 것이 아니라, 진행 과정·피드백 방식·기대 결과를 함께 합의하는 협업 문화로 운영해야 한다.

원문 읽기(새 탭에서 열림)

Figma프로토타이핑collaborative-designreal-time-collaboration+1

figma·2018년 8월 8일·3분 읽기큐레이션 요약

길 위에서: 두 명

클라우드 기반 Figma와 적절한 모바일 장비를 활용하면 고가의 노트북 없이도 사용자 조사, 디자인 리뷰, 팀 협업, 간단한 편집까지 수행할 수 있다. Josh Goodwin과 Tyrale Bloomfield는 삼성 스마트폰·태블릿, 외부 디스플레이, 블루투스 입력 장치를 조합해 이동 중에도 업무를 이어갔다. 다만 화면 출력 방식과 마우스 입력을 제대로 인식하는 하드웨어·브라우저 조합을 선택하는 것이 중요하다. ## 노트북 없이 구성하는 이동형 디자인 환경 - 권장 장비: - Samsung Galaxy S8/S8+/S9/S9+ 또는 Samsung Tab 2 태블릿 - Samsung DeX Dock 또는 Chromecast - 블루투스 키보드와 마우스 - 스마트폰의 Chrome에서 Figma를 열고, 모니터나 TV로 화면을 출력한다. - 큰 화면에서는 Figma 프레임을 확인하고, 스마트폰에서는 키보드와 마우스로 조작할 수 있다. - 외부 모니터가 없으면 태블릿만으로도 Figma 파일 확인, 댓글 작성, 간단한 편집이 가능하다. ## 의료 현장 사용자 조사에 활용 - Josh Goodwin은 의료기기 회사에서 일하며 의사들이 실제로 사용하는 컴퓨터와 태블릿에서 디자인을 테스트해야 했다. - 과거에는 Sketch나 Adobe 프로그램이 설치된 노트북과 태블릿을 여러 대 운반해야 했다. - Figma 도입 후에는: - 스마트폰에서 Figma 프로토타입을 실행하고 - 병원에 있는 모니터에 DeX Dock 또는 Chromecast로 연결하며 - 의사들에게 프로토타입 URL을 공유해 각자의 브라우저에서 확인하게 했다. - 피드백을 받는 즉시 디자인을 수정하고, 큰 화면에서 변경 결과를 확인할 수 있어 개발팀이 디자이너를 기다리는 시간도 줄어들었다. ## 저렴해지는 디자인 진입 장벽 - 스마트폰 한 대와 약 100달러 수준의 TV만으로도 기본적인 디자인 작업 환경을 구성할 수 있다. - 고가의 MacBook이나 전문 디자인 장비가 없어도 브라우저와 인터넷에 접근할 수 있으면 Figma를 사용할 수 있다. - 특히 신입 디자이너나 개발도상국의 디자이너처럼 장비 구매 예산이 제한된 사용자에게 유용하다. - 디자인 도구의 중심이 특정 컴퓨터가 아니라 클라우드와 브라우저로 이동한다는 점을 보여준다. ## 태블릿만으로 수행하는 크리에이티브 디렉션 - Tyrale Bloomfield는 Samsung Tab 2와 블루투스 마우스만으로 Figma 파일 사이를 오가며 업무를 처리했다. - 여행 중에는 마우스 없이 손가락으로 댓글을 작성하거나 디자인을 확인하기도 했다. - 노트북을 무릎 위에 불안정하게 올려두거나 야외 화면 반사를 걱정할 필요가 없다는 장점이 있다. - 단순한 검토와 피드백뿐 아니라 일정 수준의 디자인 편집도 모바일에서 가능하다고 설명한다. ## 하드웨어와 입력 방식의 호환성 - 모든 스마트폰과 태블릿이 동일하게 작동하지는 않는다. - 삼성 기기는 휴대폰 화면을 외부 디스플레이로 출력할 때 DPI를 조정해 큰 화면에 맞는 시각적 공간을 제공한다. - iPad 등 일부 기기는 화면에 닿는 모든 입력을 손가락 터치로 해석할 수 있다. - Figma가 입력을 손가락 터치로만 인식하면: - 객체 이동은 가능하지만 - 크기 조절 - 바운딩 박스 사용 - 클릭 앤 드래그 작업 등이 제한될 수 있다. - Josh와 Tyrale은 약 30개의 브라우저와 다양한 휴대폰·태블릿을 테스트한 끝에, 마우스 클릭과 손가락 터치를 구분해 Figma에 전달하는 조합을 찾았다. ## 이동성과 업무 연속성 - 이 방식의 핵심은 특정 장소나 개인 노트북에 의존하지 않는 것이다. - 브라우저와 화면 출력 장치, 입력 장치만 있으면 다른 사람의 컴퓨터나 현장 장비에서도 업무를 이어갈 수 있다. - 사용자 조사, 디자인 검토, 댓글 작성, 프로토타입 시연처럼 협업 중심의 업무에 특히 적합하다. 실제로 구성하려면 먼저 사용하는 휴대폰이 외부 화면 출력과 마우스 입력을 지원하는지 확인하고, Figma에서 객체 선택·크기 조절·드래그가 정상 작동하는지 테스트하는 것이 좋다. 모바일 환경은 고급 편집보다는 현장 테스트와 협업, 간단한 수정에 가장 효과적이다.

원문 읽기(새 탭에서 열림)

Figma사용자 경험Androiduser-research+3

figma·2018년 8월 6일·2분 읽기큐레이션 요약

무료 온라인 Skillshare 클래스로

디자인 포트폴리오는 첫 제품 디자이너 직무를 얻기 위해 자신의 역량과 가능성을 보여주는 가장 중요한 수단이다. 좋은 포트폴리오는 완성된 결과물만 나열하지 않고, 프로젝트의 과정·배운 점·성과와 지원자의 성장 가능성까지 전달해야 한다. 글은 Figma와 Skillshare의 무료 강의를 통해 포트폴리오 제작부터 면접 발표, 피드백과 개선까지 익힐 수 있다고 소개한다. ## 포트폴리오가 중요한 이유 - 제품 디자이너 채용에서는 다양한 역할과 전문 분야를 이해하고 자신의 강점을 표현해야 한다. - 제품 디자인은 다음과 같은 영역이 결합된 분야다. - 사용자 리서치 - UX 설계 - 프로토타이핑 - 사용자 테스트 - 비주얼 디자인 - 소규모 기업이나 스타트업에서는 디자이너가 여러 역할을 동시에 수행할 수 있다. - 대기업에서는 리서치, UX, UI 등 전문 역할이 분리될 수 있으므로 자신의 관심 분야와 강점을 파악하는 것이 중요하다. ## 완성도보다 과정과 성장 가능성 강조 - 신입 디자이너는 경험 부족이나 자신감 결여 때문에 스스로를 낮게 평가하기 쉽다. - 하지만 변화가 빠른 디자인 업계에서는 새로운 도구와 방법을 배우고 적응하는 능력도 중요한 역량이다. - 포트폴리오에는 단순히 polished된 최종 결과물만 보여주기보다 다음 내용을 포함해야 한다. - 문제를 어떻게 정의했는가 - 어떤 조사와 의사결정을 거쳤는가 - 어떤 시도와 반복을 했는가 - 무엇을 배웠는가 - 프로젝트가 어떤 결과를 냈는가 - 이를 통해 현재의 기술뿐 아니라 배우고 성장하려는 태도까지 전달할 수 있다. ## Skillshare 강의에서 다루는 내용 - 포트폴리오에 포함해야 할 정보와 프로젝트를 선정하는 방법 - 지원자의 역량을 효과적으로 보여주는 시각적 구성 방법 - 프로젝트를 사례 연구(case study) 형식으로 정리하고 발표하는 방법 - 온라인 활동부터 실제 면접까지 지원 과정 전체에서 일관된 이야기를 전달하는 방법 - Figma를 활용해 포트폴리오를 반복 수정하고 동료 또는 멘토와 협업하는 방법 - Figma 프로젝트 링크를 공유해 커뮤니티에서 실제 피드백을 받는 방법 ## 포트폴리오를 개선하는 협업 방식 - Figma에서는 멘토를 프로젝트에 초대해 포트폴리오 구성과 디자인에 대한 피드백을 받을 수 있다. - 다른 수강생들과 작업물을 공유하면 실제 지원자 관점에서 개선점을 확인할 수 있다. - 피드백을 반영해 포트폴리오를 반복적으로 수정하는 과정 자체가 디자인 프로세스의 좋은 사례가 된다. ## 실용적인 적용 방법 포트폴리오를 만들 때는 최종 화면보다 문제 해결 과정과 의사결정의 근거를 중심에 두는 것이 좋다. 각 프로젝트를 문제, 역할, 과정, 결과, 배운 점의 순서로 정리하고, Figma에서 멘토나 동료의 피드백을 받아 여러 차례 개선하면 신입 디자이너로서의 실력과 성장 가능성을 더 설득력 있게 보여줄 수 있다.

원문 읽기(새 탭에서 열림)

Figma사용자 경험프로토타이핑프로덕트 디자인+4

figma·2018년 8월 1일·3분 읽기큐레이션 요약

피그마 기능 하

Figma의 Observation Mode는 다른 사용자의 화면을 실시간으로 따라 보며 작업 과정을 관찰하는 기능이다. 파일을 공유한 상태라면 보기 전용 권한을 가진 사람도 상대방의 아바타를 클릭해 화면과 커서 움직임을 그대로 확인할 수 있다. 이를 통해 디자인 리뷰, 고객 피드백, 사용자 테스트를 별도 화면 공유 도구 없이 진행할 수 있다는 것이 글의 결론이다. ## Observation Mode의 작동 방식 - 같은 Figma 파일을 여러 사람이 보고 있을 때 우측 상단에 참여자의 얼굴 아이콘이 표시된다. - 특정 사용자의 아바타를 클릭하면 그 사용자가 보고 있는 화면으로 자신의 화면이 전환된다. - 상대방이: - 프레임의 텍스트를 수정하거나 - 특정 오브젝트를 클릭하거나 - 화면을 확대·이동하는 과정까지 실시간으로 확인할 수 있다. - 일반적인 화면 공유처럼 상대방의 작업 흐름을 그대로 관찰하는 방식이다. ## 공유 권한과 주의점 - 해당 파일이나 프로젝트의 공유가 활성화되어 있어야 사용할 수 있다. - 편집 권한이 없어도, 즉 보기 전용 사용자도 Observation Mode를 사용할 수 있다. - 따라서 디자인 URL을 공유할 때는 다른 사람이 자신의 화면을 관찰할 수 있다는 점을 고려해야 한다. - 기능의 접근성이 높은 만큼 민감한 작업이나 공개를 원하지 않는 화면에서는 공유 설정을 주의해야 한다. ## 디자인 리뷰와 고객 피드백 - 디자이너가 직접 화면을 설명하거나 별도의 화면 공유를 설정하지 않아도 리뷰어가 작업 과정을 따라갈 수 있다. - 고객이 디자인을 실제로 어떻게 탐색하고 어떤 부분에서 멈추는지 확인할 수 있다. - 단순히 완성된 결과물에 대한 의견을 듣는 것보다, 사용자가 화면을 이해하고 이동하는 과정을 관찰할 수 있다는 장점이 있다. - 디자인 크리틱이나 클라이언트 피드백 세션에서 특히 유용하다. ## 실시간 사용자 테스트 - 사용자가 Figma 프로토타입을 탐색하는 동안 아바타를 클릭해 행동을 실시간으로 관찰할 수 있다. - 테스트가 끝난 뒤 기억에 의존해 의견을 수집하는 대신, 사용자가: - 어느 화면에서 망설이는지 - 어떤 요소를 클릭하려 하는지 - 어디에서 이동에 어려움을 겪는지 를 직접 확인할 수 있다. - 이를 통해 사용자의 문제 지점과 주저하는 순간을 더 정확히 파악할 수 있다. - 글에서는 사용자들도 Observation Mode를 사용자 테스트에 활용할 수 있는지에 관심을 보였다고 소개한다. ## 활용 방식에 대한 사용자 의견 - Figma는 기능 사용법만 설명하기보다 사용자들의 트위터 게시물을 통해 다양한 활용 사례를 소개했다. - 사용자들에게 다음과 같은 경험과 팁을 공유해 달라고 요청했다. - 가장 좋아하는 활용 사례 - 함께 사용하는 대상 - 처음 사용하는 사람을 위한 팁 - 이는 Observation Mode가 단순한 협업 기능을 넘어 디자인 리뷰, 고객 인터뷰, 사용자 조사 등 여러 상황에 적용될 수 있음을 보여준다. 실제로 활용할 때는 사용자 테스트나 리뷰 전에 파일 공유 범위를 확인하고, 관찰 대상에게 실시간 관찰 사실을 알리는 것이 좋다. 특히 프로토타입 테스트에서는 사용자의 클릭 위치와 망설임을 별도로 기록하면 디자인 개선에 더 직접적으로 활용할 수 있다.

원문 읽기(새 탭에서 열림)

Figma프로토타이핑real-time-collaborationuser-testing+2

figma·2018년 7월 31일·3분 읽기큐레이션 요약

Kiwi.com이 Figma에서 프로젝트

Kiwi.com은 여러 도구를 조합한 Sketch 중심 workflow에서 발생하는 동기화 문제를 해결하기 위해 모바일 디자인 시스템을 Figma로 옮기기 시작했다. 소규모 디자인팀과 약 20명의 협업자가 함께 작업하는 환경에서는 디자인, 프로토타입, 개발 전달, 버전 관리가 하나의 협업 공간에서 연결되는 것이 중요하다고 판단했다. 이 글은 Figma 도입 배경과 디자인 라이브러리·컴포넌트·프로젝트 구조를 정리하는 방식을 소개한다. ## Kiwi.com의 디자인 환경과 과제 - 모바일 디자인팀은 디자이너 2명으로 구성되어 있지만, 약 20명이 다양한 방식으로 디자인에 참여한다. - 디자인 시안에 댓글을 남기는 사람 - 카피를 수정하는 사람 - 여러 플랫폼을 아우르는 기능을 설계하는 사람 - 기존 프런트엔드 디자인과 디자인 시스템인 **Orbit**는 Sketch를 기반으로 운영되고 있었다. - 그러나 Orbit의 모바일 버전은 시각적으로 차이가 커서, 별도의 모바일 디자인 시스템을 Figma에서 시험하게 되었다. ## Sketch 기반 도구 조합의 동기화 문제 - 기존 workflow에서는 목적별로 여러 도구를 사용했다. - **Sketch**: 디자인 제작 - **Zeplin**: 개발자 핸드오프 - **Abstract**: 버전 관리 - **Marvel**: 정적 프로토타입 제작 - **Dropbox Paper**: 디자인 이미지 공유 - 도구가 분리되어 있어 최신 상태가 서로 달라질 수 있었다. - 프로토타입이 최신 테스트 버전을 반영하지 못함 - 작업자가 Abstract에 커밋하는 것을 잊음 - 승인된 최종 시안이 Zeplin에 업데이트되지 않음 - 문서에 첨부된 PNG가 몇 주 전 버전으로 남아 있음 - 각 도구는 독립적으로 작동하기 때문에, 팀이 수동으로 상태를 맞추지 않으면 디자인 산출물이 쉽게 불일치한다. ## Figma를 선택한 이유 - Figma 도입의 핵심 기대 효과는 디자인 파일, 협업, 프로토타입, 버전 이력을 한 환경에서 연결하는 것이었다. - 여러 도구 사이에서 최신 파일을 확인하고 전달하는 관리 비용을 줄일 수 있다. - 다수의 참여자가 디자인 과정에 관여하는 Kiwi.com의 환경에서는 중앙화된 협업 방식이 특히 유용하다. - 저자는 초기에는 브라우저 기반 도구인 Figma의 가치에 회의적이었지만, 실제 팀의 협업 문제를 경험하면서 Figma 도입의 필요성을 재평가하게 되었다. ## 글에서 다루는 디자인 시스템 운영 범위 - 글은 단순한 Figma 사용 후기가 아니라 다음 운영 주제를 함께 다룬다. - 모바일 디자인 시스템을 Figma로 구축한 이유 - Figma 업데이트 이후 달라진 작업 방식 - 디자인 라이브러리 컴포넌트의 설계 원칙 - 컴포넌트와 프로젝트 파일의 구조화 - 버전 이력 관리와 파일 정리 - 특히 여러 사람이 컴포넌트를 재사용하는 환경에서 일관성을 유지하고, 최신 디자인 자산을 쉽게 찾도록 구성하는 방법에 초점을 둔다. 여러 협업자가 디자인에 참여하고 도구별 최신 상태를 수동으로 맞추고 있다면, Figma처럼 디자인·프로토타입·협업을 한 공간에 통합하는 방식을 검토할 만하다. 다만 도구를 바꾸는 것만으로 문제가 해결되지는 않으므로, 컴포넌트 명명 규칙과 파일 구조, 버전 관리 원칙을 함께 정립하는 것이 중요하다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템프로토타이핑sketch+2

figma·2018년 7월 25일·3분 읽기큐레이션 요약

Figma의 디자인 사전을 소개

디자인 업계는 예술·인쇄·출판의 역사에서 비롯된 전문 용어가 많아, 디자이너뿐 아니라 엔지니어·기획자·카피라이터·이해관계자에게도 협업 장벽이 될 수 있다. Figma는 구성원 간 원활한 소통을 돕기 위해 70개 용어로 시작한 오픈소스 **Design Dictionary**를 공개했다. 이 사전은 업계 변화에 맞춰 계속 확장되며, 커뮤니티의 제안으로 더욱 포괄적인 자료가 되는 것을 목표로 한다. ## 디자인 용어가 협업을 어렵게 만드는 이유 - 전문 산업에는 각 분야만의 고유한 언어가 있으며, 이는 전문가에게는 정밀한 소통 수단이 된다. - 반면 업계에 새로 들어온 사람에게는 전문 용어가 위압적이고 혼란스럽게 느껴질 수 있다. - 디자인은 사용성, 타이포그래피, 시각 요소 등 세부 개념이 많아 특히 복잡한 어휘 체계를 갖고 있다. - 디지털 인터페이스 제작에서는 조직의 여러 직군이 디자인에 관여한다. - 엔지니어는 디자인을 실제 코드로 구현한다. - 카피라이터나 편집자는 화면에 문구를 추가한다. - 제품 관리자는 전체 작업을 조율한다. - 이해관계자는 디자인을 검토하고 승인한다. - 이들이 같은 용어를 서로 다르게 이해하면 요구사항 전달과 의사결정이 어려워진다. ## Figma Design Dictionary의 목적 - 디자인 관련 기본 용어와 개념을 쉽게 찾아볼 수 있는 용어집이다. - 디자인을 처음 배우는 사람뿐 아니라 디자이너와 협업하는 비디자이너를 대상으로 한다. - Figma가 다양한 배경의 인재를 채용하면서 실제로 겪은 커뮤니케이션 문제에서 출발했다. - 비즈니스, 데이터 분석, 고객 지원, 엔지니어링 등 디자인 비전공자도 디자인 업무에 참여하면서 공통 언어의 필요성이 커졌다. - 용어를 통일해 직군 간 협업과 디자인 관련 논의를 더 명확하게 만드는 것이 핵심 목표다. ## 오픈소스와 커뮤니티 기반 확장 - 사전은 처음 70개 용어로 공개됐으며, 완성된 결과물이 아니라 지속적으로 발전하는 작업으로 소개됐다. - 디자인 업계의 변화와 새로운 개념에 맞춰 항목을 계속 추가할 계획이다. - Figma는 더 포괄적인 자료를 만들기 위해 커뮤니티의 참여를 요청했다. - 특히 다음과 같은 용어와 사용 사례에 대한 의견을 받으려 했다. - White Space - Stroke - Lorem Ipsum - 팀 내 협업을 방해하거나 자주 오해되는 표현 - 디자인 용어가 잘못 사용되는 상황 - 이용자는 사전 하단의 제안 링크를 통해 새로운 항목이나 수정 의견을 제출할 수 있다. ## 실용적인 활용 방법 - 디자인 협업을 시작할 때 팀에서 자주 사용하는 용어를 사전으로 확인하고 정의를 맞추는 것이 좋다. - 회의나 문서에서 모호한 용어가 나오면 개인의 해석에 의존하지 말고 공통 정의를 확인해야 한다. - 비디자이너 구성원의 온보딩 자료나 직군 간 협업 가이드에 용어집을 포함하면 커뮤니케이션 비용을 줄일 수 있다. - 조직에서 자주 혼동하는 표현은 자체 용어집에 추가하고, Figma처럼 지속적으로 갱신하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템사용자 경험오픈 소스+2

figma·2018년 7월 23일·2분 읽기큐레이션 요약

#FigmaTip 모음

이 글은 Figma 커뮤니티에서 공유된 실용적인 작업 팁을 모아, 반복적인 디자인 작업을 키보드 단축키와 컴포넌트 기능으로 더 빠르게 처리하는 방법을 소개한다. 여러 프레임 정렬, 좌우 반전 컴포넌트 제작, 오브젝트 이동 간격 조정 등을 활용하면 레이아웃 편집과 컴포넌트 관리의 효율을 높일 수 있다는 것이 핵심이다. ### 여러 프레임을 빠르게 정렬하기 - 여러 오브젝트나 프레임을 선택한 뒤 다음 단축키를 사용할 수 있다. - `Cmd + \``: 세로 방향으로 간격을 정리하는 **Pack Vertical** - `Cmd + Shift + \``: 가로 방향으로 간격을 정리하는 **Pack Horizontal** - 정렬 관련 단축키와 함께 사용하면 여러 요소의 배치 방향과 간격을 한 번에 조정할 수 있다. - 반복적으로 카드, 화면, 섹션 등을 배열할 때 마우스로 직접 이동하는 것보다 효율적이다. ### 변경 사항을 반영하는 좌우 반전 컴포넌트 만들기 - 기존 컴포넌트를 `Option` 키를 누른 채 드래그해 새로운 빈 컴포넌트 안에 배치한다. - 새 인스턴스를 선택하고 `Shift + H`를 눌러 좌우로 뒤집는다. - 이렇게 만든 반전 컴포넌트는 원본과 연결되어 있으므로 원본 컴포넌트의 변경 사항이 반영된다. - 좌우 대칭이 필요한 아이콘, 캐릭터, 방향성 UI 요소를 별도로 다시 만들지 않고 관리할 수 있다. ### “Nudge Amount”로 이동 간격 조정하기 - 방향키로 오브젝트를 이동할 때 적용되는 기본 이동 간격을 **Nudge Amount** 설정으로 바꿀 수 있다. - 작은 간격 조정에는 세밀한 값을, 큰 레이아웃 이동에는 더 큰 값을 설정해 작업 목적에 맞게 사용할 수 있다. - 반복적으로 일정한 간격을 맞추거나 픽셀 단위로 요소를 배치할 때 유용하다. - 정렬 및 간격 조정 기능과 함께 사용하면 디자인 시스템의 간격 규칙을 유지하기 쉽다. 실무에서는 자주 사용하는 정렬 단축키와 Nudge Amount 설정을 자신의 작업 방식에 맞게 지정하고, 좌우 변형이 필요한 요소는 반전 컴포넌트로 관리하는 것이 좋다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템사용자 인터페이스keyboard-shortcuts+1

figma·2018년 6월 27일·3분 읽기큐레이션 요약

경청의 기술: 한 디

디자이너에게 중요한 역량은 말하기보다 깊이 듣고, 사람과 맥락의 실제 동기를 이해하는 것이다. IDEO의 인터랙션 디자이너 Mike Godlewski는 음악 감상 모임 ‘Art of Listening’을 통해 화면 밖의 몰입과 공동체적 경험을 설계했다. 이 프로젝트는 디지털 작업에서 벗어난 아날로그 경험이 디자이너의 창의력과 시야를 회복시키고, 결국 인터페이스 디자인에도 새로운 에너지를 줄 수 있음을 보여준다. ## 듣기를 중심에 둔 디자인 태도 - 좋은 디자이너는 말하기보다 더 많이 듣는다. - 디자인은 인간의 문제를 해결하는 일이므로, 표면적인 요구보다 사용자의 동기와 맥락을 깊이 파악해야 한다. - 글은 존 마에다의 “디자인은 문제에 대한 해결책이고, 예술은 문제에 대한 질문”이라는 관점을 바탕으로 디자인과 예술의 차이를 조명한다. ## 영화 모임에서 시작된 음악 실험 - Mike는 친구의 영화 모임에서 아이디어를 얻었다. - 참가자들이 영화를 조용히 감상한 뒤 토론하는 단순한 규칙이 집중적이고 지적인 대화를 가능하게 했다. - 그는 같은 구조를 음악에 적용해, 일상에서 부족했던 공동 청취 경험을 만들고자 했다. - 목표는 디지털 기기와 사람 간의 불필요한 방해를 줄이고, 음악과 자기 성찰에 집중할 수 있는 의도적인 환경을 조성하는 것이었다. ## ‘Art of Listening’의 진행 방식 - 참가자들은 거실에 모여 한 장의 앨범을 처음부터 끝까지 함께 듣는다. - 감상 중에는 대화, 휴대폰 확인, 지각이 금지된다. - 대신 음악을 들으며 그림을 그리거나, 떠오른 기억을 기록하거나, 눈을 감고 소리에만 집중할 수 있다. - 앨범이 끝난 뒤에는 각자의 감상과 생각을 나누고, 스케치나 기록물을 서로 보여준다. - 단순한 규칙을 통해 음악을 배경음이 아니라 의식적으로 경험하는 대상으로 바꾼다. ## 몰입을 만드는 큐레이션과 준비 - Mike는 리듬과 서사적 흐름을 세심하게 구성한 앨범을 선정한다. - 아티스트 인터뷰, B-side 곡, 팟캐스트, Instagram 게시물 등 다양한 자료를 조사한다. - 그중 앨범을 이해하는 데 도움이 되는 사진과 인상적인 인용문을 선별한다. - 감상 중에는 이 자료를 모니터에 보여주어 Spotify를 무심코 재생하는 것보다 풍부한 배경과 맥락을 제공한다. - 따라서 경험의 품질은 음악 자체뿐 아니라 사전 조사와 정보 큐레이션에도 달려 있다. ## 인터페이스 디자인과 아날로그 경험의 연결 - 음악 모임은 시각적이고 체계적인 인터페이스 디자인과 전혀 달라 보이지만, Mike에게는 창작 에너지를 충전하는 활동이다. - 디자이너들은 필름 카메라, 레터프레스, 제본처럼 화면 밖의 아날로그 작업에 끌리는 경향이 있다. - 오프라인 활동은 인터넷과 스크린에 과도하게 몰입하는 상태에서 벗어나 감각과 관찰력을 회복하게 한다. - 새로운 분야의 경험은 기존 전문 영역과 직접 연결되지 않더라도 창의적 사고의 재료가 될 수 있다. ## 예상하지 못한 창작의 확장 - Mike는 불과 1년 전만 해도 직접 행사를 기획하게 될 것이라고 생각하지 못했다. - 그러나 창작 활동은 처음부터 계획한 경로가 아니라 예상하지 못한 관심과 경험을 통해 발견되기도 한다. - 디자이너는 자신의 직무와 정확히 일치하지 않는 프로젝트에도 도전함으로써 새로운 역량과 관점을 얻을 수 있다. 화면 중심의 작업을 하는 디자이너라면 정기적으로 디지털 기기를 내려놓고, 음악 감상·드로잉·대화처럼 집중과 감각을 회복하는 활동을 시도해볼 만하다. 특히 경험을 설계할 때는 복잡한 기능보다 명확한 규칙, 세심한 큐레이션, 참여자의 몰입을 방해하지 않는 환경이 더 큰 효과를 낼 수 있다.

원문 읽기(새 탭에서 열림)

Figmadesign-thinkinginteraction-designvisual-design+2

figma·2018년 6월 20일·3분 읽기큐레이션 요약

피그마 3.0 (!)

Figma 3.0은 데스크톱 중심의 파편화된 디자인 작업을 웹 기반 협업 환경으로 통합하려는 업데이트다. 프로토타이핑, 디자인 시스템 관리, 대규모 조직 운영 기능을 강화해 InVision 같은 별도 도구와 반복적인 파일 동기화·내보내기 작업을 줄이는 것이 핵심이다. 디자인과 프로토타입, 댓글, 개발자 전달을 하나의 최신 상태로 연결해 팀 전체의 작업 효율을 높이려 한다. ## 웹 기반 디자인 워크플로 통합 - 데스크톱 기반 작업에서는 다음과 같은 문제가 발생한다. - 어떤 프로토타입에 이해관계자의 댓글이 있는지 확인하기 어렵다. - 스타일 가이드가 최신 상태인지 보장하기 어렵다. - 팀원들이 같은 디자인 버전을 보고 있는지 관리해야 한다. - Figma는 디자인 파일과 프로토타입, 댓글, 공유 기능을 웹에서 연결해 별도 앱 간 전환을 줄이려 한다. - 결과적으로 중복 도구와 구독 비용을 줄이고, 팀의 작업 흐름을 Figma 중심으로 통합하는 것이 목표다. ## 프로토타이핑 기능 강화 Figma 3.0은 디자인 파일에서 바로 동작하는 프로토타입 기능을 강화했다. - **디바이스 프레임** - iPhone, Android, Apple Watch 등 다양한 기기 프레임을 적용할 수 있다. - 디자인이 실제 기기에서 어느 정도 크기로 보이는지 팀원들이 쉽게 이해할 수 있다. - **고정 오브젝트** - 상태 표시줄, 헤더, 푸터, 버튼 등을 화면의 위·아래·측면에 고정할 수 있다. - 제약 조건과 함께 사용해 스크롤 중에도 특정 요소가 유지되도록 만들 수 있다. - 배경 블러와 블렌딩 모드를 적용하면 고정 요소의 시각적 완성도를 높일 수 있다. - **스크롤 가능한 영역** - 프레임 내부의 개별 도형이나 영역에 스크롤 동작을 설정할 수 있다. - 부모 프레임 자체가 스크롤되는 중첩 구조도 지원한다. - 이미지 캐러셀, 세로 목록, 가로·세로 어느 방향으로든 스크롤하는 화면을 구현할 수 있다. - **화면 전환** - dissolve, slide, push 등의 전환 효과를 제공한다. - 네이티브 모바일 앱과 유사한 움직임을 구현해 프로토타입의 완성도를 높인다. ## 디자인과 프로토타입의 실시간 연결 - 디자인의 색상이나 글꼴 크기를 수정하면 프로토타입에도 실시간으로 반영된다. - 디자인 파일과 댓글이 분리되지 않아, 피드백을 확인하기 위해 다른 앱이나 탭으로 이동할 필요가 줄어든다. - 모바일 브라우저에서 프로토타입을 열고 휴대폰을 리모컨처럼 사용해 발표할 수 있다. - 프로토타입이 디자인과 직접 연결되어 있어 화면을 별도로 내보내거나 버전을 동기화하는 관리 작업이 필요 없다. - 다만 Figma는 모든 프로토타이핑 요구를 대체한다고 단정하지 않고, 다른 도구와의 연동을 위해 API 개발도 함께 추진한다. ## Figma Styles와 디자인 시스템 - Figma Styles를 모든 사용자에게 공개했다. - 텍스트와 레이어 속성을 스타일로 정의해 회사 전체에서 일관된 디자인 요소를 관리할 수 있다. - 새로운 Team Library 기능과 결합하면 색상, 글꼴, 효과 등 디자인 시스템의 구성 요소를 팀 단위로 공유하고 유지할 수 있다. - 스타일 기능은 비공개 베타와 사용자 조사를 거쳐 개발되었으며, 여러 팀이 동일한 디자인 기준을 적용하는 것을 목표로 한다. ## Organization 요금제 - 대규모 조직을 위한 새로운 Organization 등급을 미리 공개했다. - 조직 규모가 커질수록 필요한 디자인 관리와 운영 체계를 확장하는 데 초점을 둔다. - Figma는 이를 Styles, Team Library, 개발자 전달, 댓글, 공유 컴포넌트와 함께 기업용 디자인 운영 기반으로 제시한다. ## 실용적인 결론 Figma 3.0은 디자인 파일을 단순히 편집하는 도구에서 프로토타이핑과 디자인 시스템, 협업을 함께 처리하는 플랫폼으로 확장한 업데이트다. 팀이 여러 버전의 파일과 별도 프로토타이핑 도구를 관리하고 있다면, Figma의 실시간 연결·공유·스타일 라이브러리를 활용해 작업 단계를 줄이는 것을 검토할 만하다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템프로토타이핑API+3