IT 서비스 창업가 5기 2주차 · 일반 수업 미션·실습

UX/UI 실습 14 · 복지혜택길잡이 Lo-Fi 와이어프레임

운영 중인 지원 제도 탐색 화면을 바탕으로 필수 조건과 검색 상태를 개선한 Lo-Fi 실습.

제출 완료
02 · PART 2 · CLASS / UX·UI DESIGN

내 지역의 지원 정보를 찾는
Lo-Fi 와이어프레임

조건 선택은 명확하게,
검색 상태는 구분되게.

실습 14 · 최신복지혜택길잡이

운영 중인 Blogspot을 대상으로 만든 화면 설계 실습이다. 아래 V1·V2는 AI가 생성한 구조 제안이며 운영 사이트의 기능 변경이나 사용자 검증 결과는 아니다.

Step 1. 핵심 화면 정의

항목정의
서비스최신정부지원금 Blogspot · 최신복지혜택길잡이
사용자 상황 · 가정Threads나 검색을 통해 들어왔으며, 자신의 거주 지역과 필요한 분야에 맞는 지원 제도의 대상·기간을 확인하려는 방문자
핵심 화면홈의 지원 제도 검색·결과 화면 하나
목적과 행동지역과 필요한 조건으로 정보를 좁히고, 지원 제도 하나의 상세 안내를 선택한다.
수익화와의 관계유입 → 조건 탐색 → 상세 정보 확인이라는 유용한 행동을 우선한다. 광고·제휴는 별도 영역으로 구분하며 광고 클릭이나 수익 증가를 이번 실습의 성과로 가정하지 않는다.
유입→ 지역·조건 선택→ 결과 비교→ 상세 안내→ 공식 공고 확인

Step 2. 화면 구성 요소 정리

2026.09.09 공개 화면에서 검색어, 빠른 검색, 펼쳐진 상세조건, 검색 결과 0개와 검색 시작 안내, 데이터 업데이트 시각, 양쪽 제휴 영역을 확인했다. 지역 미선택 검색에서는 지역 선택을 요구하는 안내가 나타났다. API 정확성·수급 자격·수익 실적은 이번 UI 관찰로 검증하지 않았다.

분류필요한 요소역할 / 배치 제안
핵심 입력검색어·필수 지역상단, 지역 필수 표시와 안내
선택 입력연령·대상·분야·범위접을 수 있는 상세조건, 선택 요약 유지
핵심 행동조건 적용 검색·초기화주요 검색 CTA 하나, 초기화는 상세조건 안
판단 정보대상·지역·기간·지원 요약·확인일시결과 카드에서 상세 진입 전 비교
신뢰 정보공식 공고 확인·업데이트 시각결과 주변, 미확인 값은 미확인 표시
운영 요소제휴·광고검색과 구분, 신청 버튼처럼 표현하지 않음

Step 3. AI로 초안 생성

현재 요소를 빠르게 배치한 V1을 생성했다. 아래 프롬프트와 화면은 이번 실습의 생성 기록이다. 결과 카드의 텍스트는 실제 공고가 아닌 구성 예시다.

1차 생성 프롬프트
내 서비스 최신복지혜택길잡이의 지원 제도 검색 화면 하나를 흑백 Lo-Fi로 만들어줘. 사용자는 SNS나 검색에서 들어와 자신의 지역과 상황에 맞는 지원 정보를 찾으려는 방문자다. 검색어, 빠른 검색 주제, 연령·지역·지원 대상·지원 분야·검색 범위, 검색과 초기화, 결과 영역, 업데이트 시각, 공식 안내 확인 문구, 구분된 제휴 영역을 담아줘. 첫 초안은 현재 화면처럼 상세조건을 펼치고 결과 영역에는 0개와 검색 시작 안내를 함께 배치해줘. 사진·브랜드 색·실제 수급 금액 대신 박스와 예시 텍스트만 사용해줘.

Step 4. 구조 검토 및 수정

초안에서 발견한 점사용자 관점의 가설수정 방향
검색 전 0개와 시작 안내 혼재지원 정보가 없다고 오해할 수 있다검색 전 / 결과 있음 / 결과 없음 / 오류 상태 분리
많은 조건이 처음부터 펼쳐짐필수 지역 선택을 놓칠 수 있다지역 우선, 나머지 상세조건 접기
검색 버튼이 두 군데어느 버튼을 누를지 판단해야 한다핵심 검색 CTA 하나로 통일
조건을 접으면 적용 범위가 안 보임원하지 않는 범위로 찾을 수 있다선택 요약과 전국·미확인 포함 상태 노출
반영한 수정 프롬프트
첫 결과를 검토했어. 검색 전 0개는 결과가 없다는 뜻으로 오해할 수 있으므로 ‘아직 검색하지 않았어요’로 바꿔줘. 필수 지역 선택을 맨 앞에 두고 인라인 안내를 표시해줘. 연령·대상·분야·범위는 선택형 상세조건으로 접되 선택 요약과 현재 포함 범위는 노출해줘. 주요 검색 버튼은 하나로 통일하고 결과를 그 아래 배치해줘. 결과 카드에는 대상·지역·기간·확인일시·지원요약·상세 안내 진입점을 표시해줘. 검색 전 안내와 검색 후 카드 구조는 동일 영역의 다른 상태라는 점을 명시해줘. 광고는 탐색 버튼과 분리하고 수급 가능 여부를 확정하지 마. 흑백 Lo-Fi로 유지해줘.

Step 5. 초안과 최종안 비교

같은 화면의 구조를 한 번 수정했다. 회색 박스와 텍스트는 정보 위치를 설명한다. 클릭 가능한 서비스나 Figma 실행 결과가 아닌 Lo-Fi 설계 도식이다. V2 하단의 결과 카드는 검색 후 같은 영역에 표시될 구조를 부연한 것으로 검색 전 상태와 동시에 표시하지 않는다.

V1 · 1차 생성안

V2 · 최종 수정안

구조 변화 · 주요 검색 버튼 수

생성한 두 설계안의 버튼 수 비교이며 사용자 성과 지표가 아니다.

V1
2개
V2
1개

상태별 정보와 다음 행동

상태보여줄 내용다음 행동
검색 전아직 검색하지 않았어요지역 선택 후 검색
필수 조건 누락지역을 하나 이상 선택해 주세요지역 입력 근처에서 수정
검색 중조건에 맞는 정보를 찾고 있어요중복 검색 방지, 완료 대기
결과 있음결과 수·적용 조건·업데이트 시각·카드상세 안내 → 공식 공고 확인
결과 없음선택한 조건의 결과가 없어요조건 변경 또는 초기화
조회 실패정보를 불러오지 못했어요조건 보존 후 다시 검색
기간·자격 미확인미확인 표시와 공식 확인 안내확정적으로 신청 가능이라고 표현하지 않음

최종안 선택 이유와 검증 계획

판단 기준설계 반영검증 상태
시작 행동을 알 수 있는가필수 지역·인라인 안내·단일 CTA구조 반영 / 사용자 테스트 미실시
현재 상태를 이해하는가검색 전·없음·오류 분리설계 완료 / 실제 동작 미구현
자신에게 관련 있는 정보인가대상·지역·기간·공식 확인 경로구성 제안 / 실제 자격 판단 아님
후속 사용자 과제지역 선택 → 주거 분야 찾기 → 기간 확인 → 상세 선택성공 여부·혼동 지점·소요 시간 측정 예정, 현재 미측정

실습 제출 체크

요구사항산출물
핵심 화면 한 개지원 제도 검색·결과 화면
목적·사용자·필수 요소Step 1·2 표
AI 생성 후 한 번 이상 수정V1·V2와 두 프롬프트
전후 비교와 선택 근거비교 도식·버튼 수 그래프·검증표
Lo-Fi 수준흑백·자리표시자·구조 중심, 최종 색·폰트 미정

실습 14 요구사항 · 분석 대상 서비스 · 교육과정