[둥지] Figma Make로 프로토타입 구현하기

'집 찾는 어미새' 컨셉에 맞춰 Figma Make를 활용해 둥지 프로젝트의 UI/UX 프로토타입을 제작하고 디자인을 고도화한 과정입니다.

Posted Nov 18, 2025 Updated Mar 29, 2026

By Park Joona

4 min read

[둥지] Figma Make로 프로토타입 구현하기

기획서에 포함할 우리 서비스의 프로토타입을 만들기 위해 Figma Make를 갈궈봤다.

우선 BEFORE 버전에서도 우리가 의도한 기능들이 대부분 작동했기 때문에 GPT에게 코드를 주고, 기능명세서를 뽑아내라고 했다.

그리고 그 기능 명세서를 다시 AI에게 넘겨서 서비스와 기능에 어울리는 화면을 재구성해달라고 했다.

어느 정도 수정되기는 했지만, 여전히 화면이 너무 못생기고 가독성도 떨어지는 문제가 있어서, 요소 하나하나를 선택해서 어떻게 수정해달라는 구체적인 프롬프트를 작성하기 시작했다.

그 결과, 버전 151까지 만들어졌으며… 많이 예뻐졌다!

UI/UX 디자인

특히 신경쓴 부분은 ‘아무것도 모르는 사회초년생들이 주택 계약할 때 이것만 보고 따라와도 중간은 갈 수 있게 해주자’는 서비스 기획 의도를 반영하는 것이었다. 그래서 체크리스트 항목을 설명하는 부분에 ‘중1 수준의 WHAT (이 체크리스트가 무슨 내용인지), WHY (왜 이걸 해야 하는지)’ 설명을 추가하고 생소한 용어 같은 경우는 챗봇에게 바로 물어볼 수 있는 UX를 고안했다.

그리고 우리의 서비스의 컨셉이 ‘아기새’가 엄마 품에서 벗어나 ‘새로운 둥지’를 찾아 나서는 여정을 함께하는 것이기 때문에 이 세계관을 보여줄 수 있도록 UI를 디자인했다. 둥지, 아기새, 어미새를 로고와 서비스 대표 이미지에 적절히 배치해서 ‘집 찾는 어미새’를 컨셉으로 귀엽게 디자인했다. 이에 맞춰서 기존의 체크리스트, 챗봇 등 기능 이름으로 두었던 서비스명을 ‘둥지 짓기 플랜’, ‘어미새 챗봇’ 등으로 톤을 맞추어주었다. 특히 진행상황에 따라 둥지를 찾아 날아가는 아기새의 모습을 그려 귀여운 포인트를 주었다.