interactive-prototyping

3 개의 포스트

figma

누구나 만들 수 있을 때 중요한 것 | Figma 블로그 (새 탭에서 열림)

AI로 누구나 제품을 빠르게 만들 수 있는 시대에는 구현 속도보다 무엇을 만들지 정하는 방향성이 더 중요하다. 좋은 팀은 여러 가능성을 동시에 탐색하고, 실제에 가까운 프로토타입으로 비교한 뒤, 선택한 방향을 반복적으로 다듬어 자신만의 결과물로 만든다. 결국 경쟁력은 속도·방향·완성도를 함께 갖추는 데서 나온다. ## 속도보다 방향이 중요해진 이유 - 과거에는 아이디어를 실제 제품으로 구현하는 능력과 코딩 역량이 큰 차별점이었다. - AI와 새로운 제작 도구로 상상과 구현 사이의 간격이 거의 사라지면서, 빠르게 만드는 능력은 기본 조건이 되었다. - 빠른 실행은 잘못된 방향으로 달리는 문제를 가릴 수 있다. - 모두가 빠르게 만들 수 있다면 차별점은 “얼마나 빨리 만들었는가”가 아니라 “무엇을 만들 가치가 있다고 판단했는가”가 된다. ## 첫 아이디어에 매몰되는 문제 - 초보 빌더는 첫 아이디어를 선택한 뒤 개선과 반복에 집중하기 쉽다. - 이 과정은 출발점을 재검토하지 않는 **국소 최적화(hill-climbing)**와 비슷하다. - 초기 선택에 따라 이후 의사결정이 결정되는 경로 의존성이 생길 수 있다. - AI 에이전트는 사용자의 첫 요청을 빠르고 친절하게 발전시키지만, 더 나은 대안을 스스로 제시하거나 터널 비전을 깨뜨리지는 못할 수 있다. - 결과적으로 아이디어를 깊게 발전시키기는 하지만, 애초에 가장 좋은 아이디어였는지는 검증하지 못한다. ## 넓게 탐색하되 실제 경험까지 검증하기 - 숙련된 팀은 먼저 선택지를 넓게 펼친다. - 서로 겹치지 않으면서 전체 가능성을 포괄하는 **MECE(Mutually Exclusive, Collectively Exhaustive)** 방식으로 방향을 정리하고 장단점을 비교한다. - 반대로 2x2 매트릭스나 와이어프레임처럼 추상적인 자료만으로는 실제 사용자 경험에 대한 확신을 얻기 어렵다. - 효과적인 방법은 여러 방향을 동시에 탐색하면서 각각을 충분히 구체화하는 것이다. - AI를 활용하면 하나의 문제에 대해 여러 인터랙티브 프로토타입을 병렬로 제작하고, 각 방향을 실제 제품처럼 비교할 수 있다. - 팀원과 AI가 함께 프로토타입을 사용하고 피드백을 나누면 추상적인 아이디어가 아니라 구체적인 경험을 기준으로 판단할 수 있다. - 이는 순차적이고 분리된 작업 방식에서 벗어나, 여러 사람이 여러 방향을 동시에 실험하는 협업 방식이다. ## 평균적인 결과를 넘어 자신만의 제품 만들기 - 누구나 빠르게 만들 수 있게 되면 제품은 검증된 패턴과 일반적인 디자인으로 수렴하기 쉽다. - AI는 통계적으로 성공 가능성이 높은 UI와 기능을 제안하지만, 그것이 반드시 깊이 고민된 제품 경험을 의미하지는 않는다. - 사용자가 AI의 첫 결과물을 그대로 받아들이면 제품은 서로 비슷하고 무난해진다. - 진짜 위험은 능력 부족이 아니라 첫 제안에 수동적으로 동의하고, “그럴듯해 보인다”는 이유로 멈추는 태도다. - 기억에 남는 제품은 기능적으로 작동하는 것에서 끝나지 않고, 제작자의 명확한 관점과 의도를 드러낸다. - 이를 위해 각 결정을 다시 질문하고, 불필요한 요소를 제거하며, 여러 번 수정하고 다듬어야 한다. - 완성도 높은 결과를 만드는 일은 타고난 감각만의 문제가 아니라, 반복적으로 보고 판단하고 개선하는 훈련의 결과다. ## 지금 중요한 세 가지 역량 - **속도**: 아이디어를 빠르게 실험하고 프로토타입으로 구현한다. - **방향**: 여러 가능성을 비교해 만들 가치가 있는 문제와 해법을 선택한다. - **완성도와 장인정신**: AI가 만든 기본 결과를 넘어 제품의 의도와 개성을 구체화한다. - 최고의 팀은 이 세 가지를 서로 맞바꾸지 않고, 빠르게 움직이면서도 신중하게 선택하고 집요하게 개선한다. 실무에서는 하나의 아이디어를 곧바로 개발하기보다 여러 방향의 프로토타입을 병렬 제작하고, 실제 사용자 경험을 비교한 뒤 선택하는 방식이 효과적이다. AI의 결과물은 출발점으로 활용하되 그대로 받아들이지 말고, 제품의 목적과 차별성이 분명해질 때까지 반복적으로 수정하는 것이 좋다.

figma

워크플로우 랩: Figma의 (새 탭에서 열림)

Trivet 팀은 추천 프로그램의 클릭과 가입을 늘리기 위해 기존 배너를 모달, 인피드 카드, 전체 화면 오버레이로 확장해 비교한다. 각 방향은 노출 강도뿐 아니라 이미지 처리와 시각적 톤을 다르게 설계하며, Figma의 AI 이미지 편집과 벡터화 기능을 활용해 빠르게 실험한다. 핵심 결론은 레이아웃을 만드는 데 그치지 않고, 사용자의 관심을 얼마나 끌면서도 경험을 방해하지 않을지 시각적 긴장감과 전환율을 함께 검증해야 한다는 것이다. ## 문제 정의: 더 많은 관심과 덜한 방해 사이 - Trivet의 추천 프로그램 배너는 기대만큼 클릭과 가입을 유도하지 못했다. - 팀은 배너가 너무 눈에 띄지 않는지, 반대로 팝업이 사용자 흐름을 지나치게 방해하는지 검토한다. - 세 가지 UX 방향을 비교한다. - **모달**: 사용자의 흐름을 잠시 중단시키는 방식 - **인피드 카드**: 피드 안에 자연스럽게 통합되는 방식 - **전체 화면 오버레이**: 가장 높은 가시성을 제공하는 방식 - 목표는 관심도를 높이되 사용자 경험을 훼손하지 않는 것이다. ## 방향 1: 유리 효과로 호기심 유발 - Trivet 디자인 시스템의 레시피 행 컴포넌트를 기반으로 몰입감 있는 모달을 구성한다. - “독점 레시피 잠금 해제”라는 문구에 맞춰, 레시피 이미지를 완전히 보여주지 않고 살짝 흐리게 처리한다. - Figma의 다음 효과를 사용한다. - **Glass 효과**: 반투명하고 서리 낀 표면 표현 - **Refraction**: 깊이감과 굴절감 추가 - **Progressive blur**: 가장자리를 부드럽게 흐림 처리 - 사용자가 보상을 바로 얻을 수는 없지만 눈앞에 있다는 느낌을 주어, 모달을 띄우는 불편함을 시각적 보상으로 상쇄한다. ## 방향 2: 인피드 카드에 개성 추가 - 사용자의 흐름을 끊지 않도록 추천 프로그램을 피드 내부 카드로 배치한다. - 제한된 공간에 맞춰 사진보다 가볍고 유연한 손그림 일러스트를 사용한다. - **Remove background**로 불필요한 배경을 제거한 뒤, **Vectorize**로 래스터 이미지를 편집 가능한 벡터로 변환한다. - 벡터화한 케이크 스케치를 다음과 같이 다듬는다. - Fill 패널의 변수 검색으로 브랜드 색상을 적용 - **Cut tool**로 경계를 정리하면서 기존 패스를 유지 - **Bounding box**를 활용해 앵커 포인트를 회전하고 세부 형태를 조정 - 결과적으로 손그림의 질감은 유지하면서도 색상과 크기를 자유롭게 조절할 수 있는 재사용 가능한 브랜드 자산을 만든다. ## 방향 3: 전체 화면 오버레이로 우선순위 강조 - 전체 화면 오버레이는 사용자 경험을 명확하게 중단시키며 추천 프로그램의 중요도를 강하게 전달한다. - 넓은 화면을 채우려면 사진 자체가 충분히 강한 시각적 존재감을 가져야 한다. - 선택한 사진은 품질은 좋았지만 레이아웃 비율이 맞지 않았고, 숟가락이 음식보다 눈에 띄는 문제가 있었다. - 대체 이미지를 찾거나 레이아웃을 억지로 조정하는 대신, Figma의 정밀 이미지 편집 기능으로 이미지를 디자인에 맞게 수정한다. - **Erase object**로 시선을 분산시키는 요소 제거 - **Expand image**로 필요한 비율과 구도에 맞게 이미지 확장 - 이 방식은 이미지 소스를 다시 찾는 시간을 줄이고, 디자인 의도에 맞춰 기존 자산을 즉시 변형할 수 있게 한다. ## 도구와 팀을 연결하는 워크플로 - 이 워크플로는 Figma Design, Figma Make, FigJam을 함께 사용한다. - 디자이너, 콘텐츠 디자이너, 제품 관리자, 성장 분석가, 엔지니어가 같은 문제를 중심으로 협업한다. - 이미지 편집, 벡터화, 변수 적용, 프로토타이핑을 별도 도구로 분리하지 않고 하나의 흐름에서 연결한다. - 아이디어를 시각화한 뒤 인터랙티브 프로토타입으로 검토하고, 팀 피드백과 실험 결과를 바탕으로 빠르게 완성하는 접근을 보여준다. 추천 프로그램처럼 전환율이 중요한 UI에서는 하나의 시안을 정답으로 가정하기보다, 노출 강도가 다른 여러 방향을 동시에 설계하는 것이 효과적이다. 특히 Figma의 이미지 편집·벡터화 기능을 활용하면 기존 자산을 재사용하면서도 모달, 카드, 오버레이에 맞는 시각적 변형을 빠르게 검증할 수 있다.

figma

Figma Make를 소개 (새 탭에서 열림)

Figma Make는 자연어 프롬프트를 이용해 정적인 디자인을 실제로 조작 가능한 앱과 프로토타입으로 바꾸는 기능이다. 기존 Figma 프레임의 구조와 메타데이터를 유지하면서 애니메이션, 데이터, 반응형 동작 등을 빠르게 실험할 수 있으며, 디자이너와 제품팀이 코드 작성 없이 아이디어를 검증하도록 돕는다. Figma는 이를 디자인을 대체하는 도구가 아니라, 디자인 의도를 보존한 채 탐색과 구현을 가속하는 도구로 설명한다. ## 디자인에서 바로 시작하는 프롬프트 기반 제작 - 사용자는 빈 화면에서 시작할 필요 없이 Figma Design의 기존 프레임을 Figma Make로 복사할 수 있다. - 복사 과정에서 디자인의 구조와 메타데이터가 보존되어 원래 의도와 컴포넌트 계층을 유지한다. - 이후 “설정 패널을 열고 닫을 때 애니메이션을 추가해줘”처럼 자연어로 원하는 동작을 설명한다. - 현재 Figma Make는 Claude 3.7 Sonnet을 사용하며, 향후 다른 모델도 도입할 예정이다. ## 정적 디자인을 인터랙티브 프로토타입으로 전환 - 버튼, 애니메이션, 실시간 피드백 등을 추가해 정적인 화면을 실제 사용 가능한 프로토타입으로 바꿀 수 있다. - 파일 업로드나 정보 시각화처럼 동적 데이터를 사용하는 기능도 시험할 수 있다. - 모바일 앱 디자인을 데스크톱 화면으로 확장하는 등 다양한 폼팩터에 맞춘 반응형 디자인을 검증할 수 있다. - 향후 서드파티 데이터베이스와 디자인 시스템 연동도 지원할 계획이다. ## 실시간 협업과 역할 장벽 제거 - Figma 플랫폼 안에 통합되어 있어 여러 팀원이 같은 파일에서 실시간으로 탐색하고 수정할 수 있다. - 디자이너, 제품 관리자 등 기술 배경이 다른 구성원도 기능 추가, 데이터 적용, 인터랙션 모델 테스트에 참여할 수 있다. - 별도의 코딩 도구나 컨텍스트 전환 없이 하나의 작업 공간에서 아이디어 정의부터 반복 개선까지 진행한다. - 이를 통해 팀의 공통 기준점인 단일 소스 오브 트루스를 유지한다. ## 포인트 앤 프롬프트 방식의 정밀한 편집 - 특정 요소를 직접 선택한 뒤 변경 내용을 자연어로 지시할 수 있다. - 예를 들어 버튼에 애니메이션을 연결하거나, 특정 요소가 스크롤에 반응하도록 만들 수 있다. - 디자인 의도와 실제 동작 구현 사이의 간극을 줄이는 것이 목표다. - 구조화된 편집 방식은 디자인 시스템과 컴포넌트 계층을 보존해 기능을 추가하면서도 시각적 충실도를 유지한다. ## 캔버스에서 코드와 게시까지 이어지는 흐름 - Figma Make는 Figma Design 및 Figma Sites와 직접 연결된다. - 초기 아이디어를 디자인하고, 인터랙티브 프로토타입으로 검증한 뒤, 게시 가능한 사이트로 발전시키는 과정을 하나의 흐름으로 통합한다. - 별도 도구로 작업물을 다시 만들거나 맥락을 전환할 필요를 줄인다. ## 디자인 가능성의 확장 - Figma Make의 목적은 디자이너의 세밀한 반복 작업을 대체하는 것이 아니다. - 더 많은 디자인 방향을 빠르게 탐색하고, 아이디어의 실현 가능성을 조기에 검증하며, 팀에 개념을 효과적으로 전달하도록 지원한다. - 결과적으로 디자이너가 사고와 제작 사이를 빠르게 오가면서도 디자인의 완성도와 의도를 유지하도록 돕는다. 실무에서는 초기 아이디어 검증, 인터랙션 테스트, 반응형 화면 탐색처럼 반복 비용이 큰 단계에 우선 활용하는 것이 효과적이다. 다만 생성 결과를 최종 제품 코드로 바로 간주하기보다는, 팀의 디자인 시스템과 기술 요구사항에 맞춰 검토·정제하는 프로토타이핑 도구로 사용하는 것이 적절하다.