최근 지피터스 17기에서 진행 중인
“Figma AI, Replit과 함께하는 나만의 웹앱 AtoZ” 수업에 참여 중입니다.
디자인부터 MVP 퍼블리싱까지 한 번에 경험할 수 있는 프로그램인데,
1주차 실습 주제로 저는 민감한 주제를 다루는 ‘유언 메시지 작성/전달 서비스’를 선택했어요.
💡 기획 주제:
죽음을 준비하며, 사랑하는 사람에게 마지막 메시지를 남기는 서비스
생전에 유언 메시지를 작성하고
임종 직전 또는 사후에
지정한 사람에게만 열람되도록 설정하는 웹앱
🎯 프롬프트부터 UI 구성까지
처음에는 단순히 “감정적으로 차분한 분위기의 랜딩페이지를 만들어줘”라고 ChatGPT에게 프롬프트를 작성했는데,
감성 톤을 담기엔 부족하더라고요.
그래서 아래처럼 구체적인 Design Prompt로 다듬었습니다:
그리고 섹션 구조도 직접 기획해 넣었습니다:
Hero 섹션 – 문구 + CTA
감정적 후킹 문장
How it works – 전달 대상 지정 / 프록시 설정 / 전달 방식
FAQ
리소스
푸터 (개인정보 보호, 암호화 설명 등)
히어로 섹션 치곤 너무 핵심점이 안보이는 느낌!
너무 단조로운 톤이어서 심심한 느낌..
🌀 삽질 포인트: 이미지 교체
UI 텍스트나 구조는 프롬프트로 제법 잘 나왔지만,
문제는 이미지 교체.
대체 뭐가 40대 이미지라는건지?!!
흠칫한 사진까지 등장하고 마는데..😭
아무리 프롬프트에 “사진을 이걸로 바꿔줘”, “배경을 흐린 글씨 배경으로 교체해줘”라고 해도 계속 기본 사진만 유지되거나 엉뚱한 이미지를 보여줘서 꽤 애 먹었어요.결국엔 Figma Make에서 수동으로 이미지 교체하고 레이아웃도 직접 다듬어야 했습니다.
“AI가 다 해줄 줄 알았는데…” 하는 착각을 깨달았달까요 😂
✅ 결과물 스냅샷
감성 문구 중심의 첫 화면
전달 방식 설명 블럭
보안 강조 섹션 (AES-256, 조건부 열람 등)
🔚 느낀 점
Figma Make의 프롬프트 생성 능력은 텍스트 기반 구조 생성에는 강하지만,
이미지나 섬세한 UI 디테일은 여전히 수작업 보완이 필요
감정적인 주제를 UI에 담는 건 색/톤/여백뿐 아니라,
프롬프트 설계의 정교함이 핵심
중급 이상 디자이너라면 더 정제된 결과를 빠르게 얻을 수 있을 듯
📌 2주차엔 이 페이지에 주요 섹션을 Figma AI로 더 다듬고,
Replit과 Supabase 연동까지 들어갈 예정이에요.
계속 삽질하며(?) 만들어가는 과정을 공유해볼게요!
