02 · PART 2 · CLASS / UX·UI DESIGN
팬마음 인기글
Lo-Fi 와이어프레임
많은 소식 속에서
읽을 글 하나를 고르는 구조.
실습 14 · AI 초안 → 구조 검토 → 수정안
사용자가 지정한 팬마음 커뮤니티 화면을 대상으로 재구성한 실습이다. 팬마음은 분석 대상인 실제 서비스이며, 아래 화면은 내가 작성한 개선 설계안이다. 원본 서비스 변경이나 사용자 테스트를 수행한 결과는 아니다.
Step 1. 핵심 화면 정의
| 항목 | 정의 |
|---|---|
| 대상 화면 | 팬마음 · BEST 인기글(실시간) |
| 사용자 상황 · 가정 | 좋아하는 스타와 팬들의 소식을 살펴보며, 여러 게시글 중 지금 읽고 싶은 글을 찾는 방문자 |
| 화면 목적 | 사용자가 글 제목과 반응 정보를 훑어보고 읽을 글 하나를 선택하는 화면 |
| 핵심 행동 | 인기글 목록에서 게시글 선택 → 상세 화면으로 이동 |
| 설계 범위 | 인기글 목록 화면 한 개. 상세·로그인·검색 결과는 이동 목적지만 정의하고 별도 화면은 만들지 않는다. |
① 인기글 진입→ ② 제목·반응 훑어보기→ ③ 읽을 글 선택→ 상세 화면
Step 2. 필요한 정보와 기능
2026.09.09 공개 화면에서 검색, 탐색 탭, 인기 게시판 요약, 공지 5개, 글 목록, 페이지 이동, 글쓰기를 확인했다. 공지 다섯 줄이 일반 글보다 먼저 표시됐다. 이 배치가 탐색을 늦추는지는 검증할 가설로 둔다.
| 우선순위 | 필수 요소 | 사용자에게 필요한 이유 | 최종 배치 |
|---|---|---|---|
| 핵심 | 인기글 제목·선택된 탭 | 현재 보고 있는 목록 확인 | 상단 |
| 핵심 | 글 제목·썸네일 자리 | 읽고 싶은 글 판단 | 목록 본문 |
| 핵심 | 작성자·게시일·조회·추천·댓글 | 시점과 반응을 함께 확인 | 글 제목 아래 |
| 지원 | 검색·페이지 이동 | 다른 글 탐색 | 상단 검색 / 목록 하단 |
| 지원 | 공지·인기 게시판 | 운영 안내와 다른 게시판 접근 | 접힌 공지 / 하단 게시판 요약 |
| 보조 | 즐겨찾기·알림·스크랩·작성글·글쓰기 | 재방문·개인 활동 | 헤더 / 하단 보조 버튼 |
Step 3. AI로 1차 생성
화면 맥락·핵심 행동·필수 요소를 아래 요청으로 구체화하고, AI가 편집 가능한 HTML 구조로 초안을 생성했다. 디자인 도구의 별도 실행 결과로 표기하지 않는다. 예시 게시글과 대시는 실제 인기 순위나 실측 반응 수치가 아니다.
1차 생성 프롬프트 보기
팬마음 커뮤니티 BEST 인기글 화면을 바탕으로 흑백 Lo-Fi 와이어프레임 한 개를 만들어줘. 사용자는 여러 팬 소식 중 읽을 글을 찾는 방문자이고 핵심 행동은 제목과 반응을 보고 글 하나를 선택하는 것이다. 상단 서비스명과 알림·스크랩·작성글, 검색, 즐겨찾기·전체·인기글·공지 탐색, 인기 게시판 요약, 제목, 공지 다섯 줄, 글 목록, 썸네일 자리, 작성자·게시일·조회·추천·댓글, 페이지 이동, 글쓰기를 포함해줘. 실제 글과 수치는 복사하지 말고 예시 제목과 대시를 사용해줘. 색상·사진·장식 대신 사각형과 텍스트로 정보 배치를 보여줘.
Step 4. 구조 검토와 재생성
| 1차 결과 검토 | 문제 판단 · 가설 | 수정 요청 |
|---|---|---|
| 공지 다섯 줄이 목록 앞을 차지 | 읽을 글에 도달하기 전 안내를 먼저 통과한다 | 공지 1줄 요약 + 펼침 진입점 |
| 인기 게시판 요약이 목록 제목 위 | 다른 게시판 탐색과 현재 목록 탐색의 우선순위가 경쟁한다 | 목록·페이지 이동 다음으로 이동 |
| 반응 수치를 기호로 표시 | 기호 의미를 해석해야 한다 | 조회·추천·댓글 이름 표시 |
실제로 반영한 수정 프롬프트 보기
핵심 행동은 글 선택이므로 인기글 제목과 목록을 우선 배치해줘. 공지 다섯 줄은 ‘공지 5건 · 펼쳐보기’ 한 줄로 접고, 삭제하지 말고 펼침으로 접근하게 해줘. 인기 게시판 요약은 목록과 페이지 이동 아래로 옮겨줘. 조회·추천·댓글은 기호만 쓰지 말고 이름을 함께 표시해줘. 검색과 현재 선택된 인기글 탭, 작성자·게시일·썸네일, 페이지 이동은 유지해줘. 글쓰기는 읽을 글을 고르는 행동을 방해하지 않게 하단 보조 버튼으로 둬. 흑백 Lo-Fi 수준을 유지해줘.
Step 5. 1차 결과와 최종 결과
같은 인기글 화면을 한 번 수정했다. PC에서는 나란히, 모바일에서는 위아래로 비교한다. 버튼과 입력창은 위치를 나타내는 도식이며 실제 서비스 기능은 연결하지 않았다.
V1 · 1차 생성안
팬마음알림 · 스크랩 · 작성글
검색어 입력 ⌕
즐겨찾기 전체 인기글 공지
인기 게시판 01 게시판 A ⌄
BEST 인기글 · 실시간☆ 즐겨찾기
공지 · 이벤트 안내
공지 · 프로필 기능 안내
공지 · 혜택 모아보기
공지 · 소통 기능 안내
공지 · 친구 초대 안내
공지 · 프로필 기능 안내
공지 · 혜택 모아보기
공지 · 소통 기능 안내
공지 · 친구 초대 안내
관심 있는 팬 소식을 나누는 글 1
이미지
관심 있는 팬 소식을 나누는 글 2
이미지
관심 있는 팬 소식을 나누는 글 3
이미지
이전 1 2 3 다음
글쓰기
V2 · 최종 수정안
팬마음알림 · 스크랩 · 작성글
검색어 입력 ⌕
즐겨찾기 전체 인기글 공지
BEST 인기글 · 실시간☆ 즐겨찾기
공지 5건 · 펼쳐보기 ⌄
관심 있는 팬 소식을 나누는 글 1
이미지
관심 있는 팬 소식을 나누는 글 2
이미지
관심 있는 팬 소식을 나누는 글 3
이미지
이전 1 2 3 다음
인기 게시판 01 게시판 A ⌄
글쓰기
구조 변화 · 공지의 기본 표시 행 수
생성한 두 와이어프레임의 공지 행 수를 비교했다. 사용자 성과나 원본 화면의 전체 높이를 측정한 그래프가 아니다.
1차5행
최종1행
최종안 선택 이유
| 선택 기준 | 최종안에서 반영한 구조 | 검증 상태 |
|---|---|---|
| 글 선택이 우선인가? | 검색·탭 다음에 제목과 접힌 공지, 곧바로 글 목록을 배치 | 구조 반영 완료 |
| 안내를 잃지 않았는가? | 공지 펼침과 인기 게시판 요약 진입점 유지 | 기능 동작은 후속 프로토타입에서 확인 |
| 정보를 해석하기 쉬운가? | 조회·추천·댓글을 텍스트로 명시 | 사용자 이해도 미측정 |
| Lo-Fi 범위를 유지했는가? | 회색 박스·선·예시 텍스트만 사용 | 브랜드 색·사진·최종 폰트 미정 |
후속 검증과 예외 상태
| 상황 | 예정된 안내·행동 |
|---|---|
| 목록 정상 | 글 선택 후 상세로 이동, 돌아오면 이전 목록 위치 유지 제안 |
| 글이 없음 | 아직 표시할 인기글이 없어요 → 전체 글 보기 |
| 목록을 불러오지 못함 | 글을 불러오지 못했어요 → 다시 불러오기 |
| 개인 기능 이용 시 로그인 필요 | 로그인 안내 후 원래 작업으로 복귀하는 경로를 후속 설계 |
| 사용자 검토 과제 | 읽을 글 1개 찾기, 댓글 수 찾기, 공지 펼치기. 성공 여부·소요 시간·혼동 지점을 기록할 계획이며 현재 미측정 |
제출 체크
| 요구사항 | 결과 |
|---|---|
| 핵심 화면 1개와 목적 | 팬마음 인기글 목록 / 읽을 글 선택 |
| 필수 정보·기능 먼저 정의 | Step 2 우선순위 표 |
| AI 초안 생성 | V1과 1차 프롬프트 보존 |
| 1회 이상 구조 개선 | V2와 수정 프롬프트·검토표 |
| 전후 비교와 최종 선택 | V1/V2 비교 도식·선택 이유 정리 |