지난 1주차에선 '죽음 이후의 메시지 전달'이라는 민감한 주제를 웹앱으로 정의하고 구조를 설계했다면, 이번 주는 Figma Make 기능을 중심으로 실제 서비스 MVP를 구성한 경험을 공유하려 합니다. 단순히 “보이는 UI”를 넘어서, 감성적 설득력과 정보 구조 간 균형을 잡는 과정이 핵심이었습니다.
🧱 Step 1. 실제 서비스처럼 보이게 하기 위한 메뉴 구성
처음엔 간단한 플로우 화면만 있었지만, 점차 ‘실제 서비스처럼 보여야겠다’는 인식이 생겼습니다. 그래서 홈, 이용 방법, FAQ, 실제 사례까지 서비스 메뉴에 걸맞는 구조로 확장했고, 각 섹션을 페이지로 만들며 전체 맥락의 내러티브를 설계했습니다.
결과적으로 “서비스 같은 허구”를 만든 셈이지만, 실제 MVP로서의 설득력이 생겼습니다.
🎨 Step 2. 톤앤매너 시도: 흑백에서 파스텔까지
처음은 무채색(블랙&화이트) 위주로 구성했지만, 비주얼이 너무 딱딱하다는 피드백을 받았습니다. 반대로 컬러풀하게 전환하니 너무 산만해졌고요.
그 결과 얻은 인사이트는 하나:
Make 프롬프트는 ‘컬러풀’ 대신 ‘파스텔 톤’, ‘감성적’ 대신 ‘가족 이미지’로 구체화해야 원하는 스타일이 나온다.
블랙앤 화이트 요청
너무 서비스가 무겁고 칙칙한데...
이렇게 바꾸면 어떨까?
오 좋아 감성적인데?
스크롤 내렸더니
..잠깐만....? ㅠㅠ ㅋㅋ....
모 아니면 도세요?
이후 히어로 섹션은 가족이 함께하는 이미지 + 스크롤에 따라 점점 톤다운되는 구조로 자연스럽게 감정을 이끌 수 있게 만들었습니다.
예상보다는 휴먼리소스가 많이 들어가야만 했습니다. (딸깍이 10번은 넘음)
📐 Step 3. Make의 한계 보완: 정렬, 카드 사이즈 통일, 넘버링
Make로 생성한 카드는 내용에 따라 자동으로 크기가 달라졌고, 일부 컴포넌트는 잘리는 문제도 있었습니다. 그래서 다음과 같이 직접 수정했습니다:
카드 높이를 고정값으로 맞춰 달라
넘버링 위치를 안으로 넣어달 라
폰트/그리드 정렬: Line-height와 padding 기준 수동 보정
숫자 넘버링을 카드에 넣어달라고 했는데..
잘라서 넣어줄줄은..
이러면 되겠지?
어... 잠깐만 숫자는 컨텐츠 아냐? 이상하게 간격만 커졌네.
ㅠㅠ 여기서 프롬프트 수정을 오래했습니다. 사실 지금도 맘에 들지는 않아요.
그리고 MVP로서 서비스를 완성해보았습니다. 일단 서비스 기능 위주 구현까지,
디테일한 기능의 정의를 다 하지는 않았습니다.
이제 실제로 구현된 메뉴페이지.
기존에는 스크롤하는 섹션 메뉴가 있었지만 필요없어보여
서비스 메뉴 페이지로 구성하였습니다.
시작하기
실제 사례
자주 묻는 질문
전체 홈페이지는 어떤구성인지 캡쳐로 보여드립니다.
마무리
좀 더 디자인시스템으로 정의된 동일한 구조를 썼으면 하는데, 페이지마다 구현되는 버튼의 느낌이나 디자인이 조금씩 다른 부분이 있어서 이부분을 공통 컴포넌트를 이용해서 깔끔하게 디자인할수 없을까 고민됩니다.
피그마의 컴포넌트를 업데이트하면 모든 인스턴스에 적용되듯이 말이죠.
그래도 디자인을 신경쓰지 않고 이렇게 빨리 구현할수 있다니, MVP 만들기는 딱이라는 생각이 듭니다.
앞으로 남은 기간에는 디자인 디테일 올리는걸 신경쓰기 보다는 구현에 좀 더 집중해보려합니다.
