📜사용자 여정 중심 - 키 스크린 설계 시행착오

📜지난 이야기

https://www.gpters.org/uiux/post/idea-pivot-3-times-EUlLyNq5w6vAlI0

안녕하세요 진여진입니다. 🙇

1주차 과제 - 개발 목표 설정, Figma를 활용한 키스크린(초안) 설계
"개발 목표 설정" 에 이어 "키스크린(초안) 설계 작업"을
사용자 여정 (User Journey) 관점에서 작성합니다.

🔍 용어 정의 : 키 스크린이란?

• UI/UX 디자인 분야의 키 스크린

  • 키스크린은 프로젝트에서 핵심이 되는 주요 화면을 의미합니다.

  • 서비스나 앱의 전체 플로우에서 중요한 전환점,

  • 사용 시나리오의 핵심 단계, 또는 대표 기능이 구현되는 화면을 지칭합니다.

  • UI 기획자가 리서치와 분석을 거쳐 도출한 결과물이 구체적으로 시각화되는 단계로,

  • 주로 디자인 소스 없이 레이아웃과 인터페이스 중심으로 설계됩니다

  • 개발자, 디자이너, 사업팀 간의 커뮤니케이션 기준점이 되며, 이후 상세 플로우와 인터랙션 설계의 기반이 됩니다

• 출처 :

  • 키스크린(Key Screens)이 나오기까지의 과정

  • UX가 궁금한 개발자에게 보내는 편지

🛠️ 단계별 가이드 (UI 키스크린 설계 기준)

1. 프로젝트 리서치 및 분석

• 사용자 시나리오, 서비스 플로우, 기능 요구사항 파악

2. 핵심 플로우 도출

• 전체 흐름 중 중요한 전환점, 대표 기능 선정

3. 키스크린 설계

• 디자인 소스 없이 레이아웃, 인터페이스, 주요 인터랙션 중심으로 화면 설계

• 각 요소의 역할, 동작, 상태 변화 명확히 기술

4. 팀 간 검토 및 피드백

• 개발, 디자인, 기획 부서와 논의하여 구체적 방향성 확정

• 필요시 수정 및 보완

5. 상세 플로우 및 화면 설계로 확장

• 상세 화면 설계: 키스크린을 기준으로 세부 화면과 플로우를 확장 설계

• 프로토타입 제작: 필요시 프로토타입 도구(Figma, XD 등)로 실제 동작 흐름 확인

• 최종 문서화: 모든 설계 결과를 화면 설계서, 플로우 차트 등 공식 문서로 정리

💡 여기서 떠오른 생각

• 구현이 쉬워졌으면 그 시간을 기획에 투자해야한다고 느껴짐

• 사용자의 기획 역량은 어떤 방향으로 발전해야할까? 라는 고민

• 이런 맥락에서 저는 프롬프팅 구현 능력과, 분야 별 배경지식을 중심으로 탐구하려 합니다.

📚 최신 학습 리소스

• UI 키스크린 설계 과정 : [pxd UX 블로그 참고]

• 화면 설계서 작성법: [Brunch UX 방법론 글]

🧪 UX 아이디어 검증 과정

🔍 UX 진단소를 통한 아이디어 검증

• 우선 다이앤님이 만들어 준 UX 진단소에 아이디어 검증을 해봅니다.

  https://chatgpt.com/g/g-67f519ee65248191b9f6f0930d5cac73-moduyi-ux-jindanso

  https://chatgpt.com/g/g-67f519ee65248191b9f6f0930d5cac73-moduyi-ux-jindanso

ALT

한국어 버전의 스크린 샷

• 내용 그대로 복사해서 작업을 진행했습니다.

ALT

한국어 텍스트가있는 검은 색 화면

• 물어보니 지피티가 사용자 정보를 얻기 위해 구체적 질문을 했습니다.

🔍 Q1. 이 웹사이트의 가장 중요한 목적은 무엇인가요?
🎯 Q2. 타겟 사용자에 대해 더 자세히 알려주세요.
🧭 Q3. 사용자가 이 웹사이트에 들어왔을 때 거치게 될 흐름을 간단히 상상해보셨나요

👥 사용자 여정 구체화 작업

개인적으로 사용자 여정을 디자인하는 생각은 못해봤기에
여기 부분을 구체적으로 정의하고 싶어서 다음과 같이 GPTs 에서 구체화 작업을 진행했습니다.

ALT

한국 문자 메시지의 스크린 샷

개인적으로 자주 사용하는 멘트인데

모호/불분명하다면 사용자에게 날카롭고 세밀하게 재질문

이 질문을 통해 사용자와 AI의 정보 방향성를 맞추는 작업을 선호합니다.

그럼 아래와 같이 "구체적으로 말해주세요" 라는 제안서가 나오는데
계속 대답해주면서 나와 GPT 의 방향성을 맞춰갔습니다.

질의응답하면서 본인도 서비스 타겟을 구체적으로 정의합니다.

📋 정의된 서비스 PRD

웹사이트 목적: 20~30대 사무직/IT 직장인이 '동기에게 주는 가벼운 선물'을 빠르게 고를 수 있는 큐레이션 웹사이트입니다.

홈페이지 구조:

- 상단에는 상황 선택 필터를 배치해주세요. (예: 동기 / 상사 / 신입 / 퇴사)
- 그 아래에는 8개의 추천 상품을 카드 레이아웃으로 보여주세요.
- 각 카드에는 아래 요소가 들어갑니다:
  - 상품 이미지 (정사각형)
  - 상품명 (간결하게)
  - 가격
  - 추천 이유 요약 태그 (예: 센스 있는 / 감성 있는 / 실용적인)
  - '자세히 보기' 버튼
전체 디자인 톤:
- 신뢰감 + 따뜻함을 동시에 주는 디자인
- 메인 컬러는 블루 계열 (#4A90E2), 포인트 컬러는 따뜻한 오렌지 (#FFA94D) 또는 골드 톤 사용
- 둥근 모서리 카드, 가벼운 그림자, 친근한 폰트 사용

추가 안내:

- 모바일에서도 카드가 2열로 잘 보이게 반응형 구성
- 상품을 클릭하면 상세 페이지 또는 하단 모달로 정보 노출
- '추천 이유'는 태그 형태로 강조되어 시각적 피로도를 줄이기

🎨 UX Builder와 Figma Make 활용

🤖 UX Builder로 프롬프트 생성

https://chatgpt.com/g/g-6863abe6e74c81918f2e63617e7d1a09-ux-ui-builder

이제 제공받은 맥락 정보를 들고 프롬프트를 만들어봅니다.

ALT

한국 문자 메시지의 스크린 샷

ALT

한국어 텍스트가있는 검은 색 화면

이렇게 재질문이 나오는데 성심성의껏 답변 해줍니다.

🖌️ Figma Make로 디자인 구현

답변 해주면 프롬프트 나오고 이제 만들러 가야죠!

ALT

Joyeux Anniversaire apyle이라는 단어가있는 풍선 개

참고할 컬러톤, 이미지는 따듯하면서 포근한 풍선 강아지 이미지를 바탕으로 만들었고

ALT

프로젝트 PDR 8 사무실 선택의 스크린 샷

사진을 첨부해 컨셉, 컬러톤의 맥락을 제공합니다.

• 만들어진 사이트 : https://syrup-close-03236480.figma.site/

  https://syrup-close-03236480.figma.site/

🖼️ 키 스크린 설계 결과

만든 사이트를 캡쳐한 다음, 역으로 키 스크린 추출안을 달라고 부탁했습니다.

만들어진 키 스크린 설계안:

(한국어로 만들어달라고 부탁했어야 했는데, 그 부분을 못했네요. 🥹)

ALT

웹 사이트의 구조를 보여주는 다이어그램

추가로 스크린 설계안 PDF도 만들어달라 부탁해서 PDF 형태로 만들었습니다:

📝 정리 및 다음 단계

• 앞으로 작업 할 일:

  • 2주차 과제를 준비하며 얻은 인사이트 정리

  • 비 디자이너 + 비 개발자의 입장에서 프롬프트와 디자인 컴포넌트 요구서 밀키트 제작

• 학습 성과:

  • Figma Make를 활용한 실제 구현 경험

  • 사용자 중심 기획의 중요성 체감

  • 프롬프트 작성 능력 향상