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는 사용자 의견과 리서치를 바탕으로 프로토타이핑 기능의 우선순위와 형태를 발전시키고자 했다. 실무에서는 기본 화면 이동만 연결하기보다 호버·눌림·드롭다운·자동 전환을 함께 구성하는 것이 좋다. 이를 통해 실제 사용 흐름에 가까운 프로토타입을 만들고, 개발 전에 인터랙션과 사용자 경험을 더 정확하게 검증할 수 있다.

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

interaction-designFigma프로토타이핑user-interface-design+2

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

경청의 기술: 한 디

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

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

interaction-designFigmadesign-thinkingvisual-design+2

datadog·2018년 3월 23일원문

제품 디자이너가 설명형 저널리즘에서 배울 수 있는 것 (새 탭에서 열림)

뛰어난 제품 디자이너가 되기 위해서는 단순히 화면을 그리는 능력을 넘어, 복잡한 정보를 명확하게 전달하는 '해설 저널리즘(Explanatory Journalism)'의 원칙을 배워야 합니다. 최신 정보의 홍수 속에서 중요한 맥락을 놓치지 않고, 파편화된 이해관계자들의 요구사항을 하나의 논리로 엮어내는 '설명자'로서의 역량이 디자인의 성패를 결정합니다. 결국 체계적인 기록과 맥락의 통합을 통해 디자인 결정의 근거를 단단히 구축하는 것이 더 나은 디자이너로 성장하는 핵심입니다. **신규성보다 중요성 우선하기** * 뉴스 피드가 끊임없이 최신 정보를 쏟아내듯, 디자이너도 매일 접하는 고객 문의나 회의록 등 최신 피드백에 매몰되기 쉽습니다. * 최신 정보가 반드시 가장 중요한 정보는 아니며, 산재한 피드백을 한곳에 모아 전체적인 관점에서 가중치를 부여해야 합니다. * 가장 가치 있는 고객의 목소리나 반복되는 요청 사항을 식별하여 데이터에 기반한 우선순위를 설정하는 체계가 필요합니다. **맥락 붕괴 방지와 맞춤형 설명** * '맥락 붕괴(Context Collapse)'는 다양한 배경을 가진 청중이 하나의 메시지를 각기 다른 맥락으로 받아들일 때 발생합니다. * 제품 디자인 과정에는 고객 지원팀, 영업팀, 디자인 연구원, 경영진 등 서로 다른 목표를 가진 이해관계자들이 개입합니다. * 디자이너는 단순히 시안을 보여주는 것에 그치지 않고, 각 그룹이 제공한 맥락이 솔루션에 어떻게 반영되었는지(혹은 왜 반영되지 않았는지) 대상에 맞춰 적절히 프레임화하여 설명해야 합니다. **기록을 통한 확장과 축소의 프로세스** * 디자인 프로세스는 연구 데이터를 수집하는 '확장' 단계와 이를 요약하는 '축소' 단계로 나뉩니다. * 디지털 환경은 지면의 제약이 없으므로, 조사 내용과 데이터, 선례들을 상세하게 기록하는 '페이퍼 트레일(Papertrail)'을 구축해야 합니다. * 철저하게 조직된 기록이 뒷받침될 때 비로소 핵심을 찌르는 간결한 요약이 가능해지며, 필요할 때마다 상세한 근거로 연결되는 논리적 구조를 만들 수 있습니다. 디자이너는 사용자 경험(UX)과 기능의 접점을 책임지는 사람으로서, 자신의 결정을 증명할 수 있는 '기록의 기준'을 스스로 세워야 합니다. 인터뷰 노트 하나부터 체계적으로 문서화하고 이를 팀 내 공유 자산으로 활용한다면, 비즈니스 로직에 집중하는 기획자(PM)와 협업하며 제품의 완성도를 높이는 강력한 무기를 갖게 될 것입니다.

interaction-design사용자 경험프로덕트 디자인social-media+4

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

스냅챗은 논란의

Snapchat의 성공은 전통적인 사용성 원칙을 따랐기 때문이 아니라, 오히려 복잡하고 숨겨진 UI를 통해 독특한 문화와 참여 방식을 만들었기 때문이라는 글이다. 직관성 대신 친구에게 기능을 배우고 공유하게 만드는 ‘공유 가능한 UI’를 택했으며, 카메라 중심 화면과 제스처 기반 탐색으로 모바일 소셜 앱의 새로운 방향을 제시했다. 다만 이러한 성공이 의도적인 전략인지 우연히 형성된 결과인지는 명확하지 않다. ## 전통적인 사용성 원칙을 거스른 UI - Snapchat은 사용자가 앱을 쉽게 이해하도록 만드는 일반적인 디자인 원칙을 따르지 않았다. - Stories 메뉴는 세로와 가로로 모두 스크롤되며, 화면마다 기능 배치와 탐색 방식이 일관되지 않았다. - 앱 전체를 아우르는 보편적인 내비게이션 바가 없고, 기능이 여러 화면과 제스처 속에 분산되어 있었다. - 이런 구조는 사용성을 떨어뜨리지만, 디자인의 목표가 항상 ‘가장 쉽게 이해되는 화면’을 만드는 데 있는 것은 아니라는 점을 보여준다. - Bobby Goodlatte는 디자인이란 픽셀이나 미적 완성도보다 문제 해결에 관한 것이며, 때로는 덜 다듬어진 공간이 더 적절한 해결책이 될 수 있다고 설명한다. ## 숨겨진 기능이 만든 사용자 문화 - Snapchat의 일부 기능은 화면에 명확히 드러나지 않아 다른 사용자에게 배워야 했다. - 라이브 영상 통화나 필터 기능처럼 숨겨진 기능을 친구가 직접 알려주면서 사용자 사이에 일종의 ‘부족 지식(tr ial knowledge)’이 형성됐다. - 앱 사용법을 아는 사람과 모르는 사람 사이에 경계가 생기면서, Snapchat은 부모 세대가 쉽게 접근하기 어려운 젊은 사용자만의 공간이 되었다. - 복잡하고 정돈되지 않은 인터페이스가 오히려 젊은 세대의 혼란스럽고 비정형적인 일상과 잘 맞는다는 해석도 제시된다. ## 카메라 중심 설계와 모바일 UX의 혁신 - Snapchat은 앱을 실행하면 피드가 아니라 카메라가 먼저 열리도록 설계한 최초의 대형 소셜 앱 중 하나였다. - 이 선택은 다른 사람의 콘텐츠를 소비하는 데서 벗어나, 사용자가 직접 사진과 영상을 만들도록 유도했다. - 화면을 스와이프해 앱의 다른 영역으로 이동하는 다차원적 탐색은 기존 메뉴 버튼보다 모바일 환경에 더 자연스러울 수 있었다. - 더블 탭, 스와이프, 길게 누르기 같은 터치 동작을 독자적인 명령어처럼 활용했다. - 이미지 위에서 필터를 바로 끌어오는 방식도 기존 앱의 썸네일 목록 중심 필터 UI와 달랐다. - 카메라를 열자마자 재미있고 창의적인 행동을 제안한다는 점이 Snapchat의 핵심 차별점이었다. ## ‘직관적인 UI’에서 ‘공유 가능한 UI’로 - Greylock의 Josh Elman은 Snapchat의 접근을 ‘공유 가능한 UI(shareable UI)’라고 설명한다. - 모든 제품이 처음부터 직관적일 필요는 없으며, Facebook이나 Excel도 처음 사용하는 사람에게는 즉시 이해되지 않았다는 논리다. - 중요한 것은 사용자가 혼자 메뉴를 헤매지 않고, 친구에게 기능을 묻고 사용법을 공유할 만큼 강력하고 매력적인 제품을 만드는 것이다. - 특히 소셜 앱에서는 기능을 알려주는 행위 자체가 사용자 간 관계와 참여를 강화할 수 있다. - Snapchat의 필터처럼 누군가 직접 보여줘야 알 수 있는 기능은 단순한 사용법이 아니라 사용자 확산 방식으로 작동했다. ## 의도된 전략인가, 우연한 성공인가 - 인터뷰에 참여한 디자이너들은 Snapchat의 성공을 완전히 계획된 디자인 전략으로 보지는 않았다. - 일부는 여러 가지 서투른 디자인이 우연히 하나의 앱에 모였고, 이후 젊은 세대의 취향에 맞았다고 평가했다. - 반대로 결과적으로는 기존 디자인 규칙을 깨면서 새로운 사용 행태와 모바일 소셜 경험을 만들어냈다. - Snapchat의 사례는 좋은 디자인이 반드시 정돈되고 예측 가능하며 즉시 이해 가능한 디자인과 같지는 않다는 점을 보여준다. 제품을 설계할 때는 무조건 직관성을 극대화하기보다, 사용자가 친구에게 알려주고 싶을 만큼 강력한 기능과 문화를 만들 수 있는지도 고려할 만하다. 다만 숨겨진 UI는 제품의 핵심 기능까지 가리지 않도록 설계해야 하며, Snapchat의 성공을 그대로 모방하기보다는 타깃 사용자와 서비스 목적에 맞게 적용해야 한다.

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

interaction-design사용자 경험사용자 인터페이스mobile-design+3