앞 이론에서 와이어프레임과 Lo-Fi·Hi-Fi의 차이를 배웠습니다. 이번 실습에서는 자신의 창업 아이템을 바탕으로 핵심 화면 하나를 선정하고, AI를 활용해 시각 디자인보다 구조와 정보 배치에 집중한 Lo-Fi 와이어프레임을 만들어 봅니다. 완성도 높은 UI를 만드는 것이 아니라, 빠르게 화면 구조를 만들고 검토하는 것이 이번 실습의 핵심입니다.

실습 목표와 산출물

• 실습 목표
  • 자신의 서비스에서 중요한 화면 하나를 정의하고, 화면에 필요한 정보와 기능을 구조화합니다.
  • AI를 활용해 Lo-Fi 와이어프레임을 생성하고, 결과를 보며 화면 구조를 개선하는 과정을 경험합니다.
• 최종 산출물
  • 자신의 서비스 핵심 화면 Lo-Fi 와이어프레임 1개

내 서비스의 핵심 화면 정하기

• 자신의 창업 아이템에서 사용자가 가장 중요한 행동을 하는 화면 하나를 선택합니다.
  • 예: 서비스 홈, 검색 결과, 상품 상세, 예약 화면, 대시보드 등
• 화면을 그리기 전에 아래 내용을 먼저 정리합니다.
  • 이 화면을 사용하는 사람은 누구인가?
  • 사용자가 이 화면에서 해야 하는 가장 중요한 행동은 무엇인가?
  • 반드시 보여줘야 하는 정보와 기능은 무엇인가?

단계별 진행 안내

• Step 1. 핵심 화면 정의
  • 자신의 서비스에서 핵심 화면 하나를 선택합니다.
  • 화면의 목적과 사용자의 핵심 행동을 한 문장으로 작성합니다.
  • 예: "사용자가 자신의 조건에 맞는 전문가를 탐색하고 한 명을 선택하는 화면"
• Step 2. 화면 구성 요소 정리
  • 화면에 반드시 필요한 요소를 나열합니다.
  • 예: 검색창, 필터, 전문가 카드, 가격, 리뷰, 상세보기 버튼, 하단 내비게이션
  • 아직 색상·폰트·이미지 스타일은 결정하지 않습니다.
• Step 3. AI로 Lo-Fi 생성
  • 서비스 설명, 화면 목적, 필수 요소를 프롬프트에 담아 AI 도구로 와이어프레임을 생성합니다.
• Step 4. 구조 검토 및 재생성
  • 생성된 화면을 보며 정보의 순서와 배치를 점검합니다.
  • 부족한 부분을 프롬프트에 추가해 한 번 이상 수정합니다.
  • 작성 예시: "AI가 추천 전문가보다 프로모션 배너를 크게 배치함 → 사용자의 핵심 행동은 전문가 선택이므로 배너를 제거하고 전문가 리스트를 상단으로 이동하도록 프롬프트 수정"
  • 예: "검색창을 가장 위에 배치", "주요 CTA를 화면 하단에 고정", "카드의 정보량을 줄여줘"
• Step 5. 최종 화면 정리
  • 1차 결과와 최종 결과를 나란히 놓고 무엇을 수정했는지 기록합니다.
  • 시각적 완성도가 아니라 사용자가 화면을 이해하고 행동할 수 있는 구조인지를 기준으로 최종안을 선택합니다.

체크리스트

• 자신의 서비스에서 핵심 화면 하나를 명확하게 선택했는가?
• 화면의 목적과 사용자의 핵심 행동을 정의했는가?