NO. 004 · 개발일지 · 2026-09-10

첫 행동이 보일 때, 좋은 화면이 일을 한다

작품을 감상하는 화면에서 실제로 써 보는 화면으로. TLLHOUSE 소비자 QA에서 찾은 것은 더 큰 장식이 아니라 선택과 문의의 순서였다.

상황 · 감상 다음에 무엇을 해야 할까

TLLHOUSE를 소비자의 순서로 살펴봤다. 먼저 첫 화면을 보고, 관심 있는 작품을 고르고, 전자책의 샘플을 읽은 뒤 문의할 곳을 찾았다. 점검 당시 화면에는 차분한 색과 입체 표지, 서로 다른 작품 이미지가 있었다. 그러나 그 사이에서 지금 가능한 행동을 고르는 일은 예상보다 번거로웠다.

모든 작품이 같은 단계에 있지는 않았다. 바로 체험할 수 있는 작품도 있고 소개 화면만 공개된 작품도 있었다. 전자책은 판매 준비 중이었지만 무료 샘플은 읽을 수 있었다. 이 차이가 늦게 드러나면 방문자는 소개를 더 읽어야 하는지, 버튼을 찾아야 하는지부터 판단해야 한다. 첫 문제는 장식의 부족보다 상태와 선택의 순서에 있었다.

판단 · 보기 좋은 순서와 쓰기 좋은 순서를 맞춘다

이번 수정에서는 작품 이미지를 새로 만들기보다 설명과 행동의 위치를 바꿨다. 작품 목록에는 체험 가능 여부를 고르는 필터를 더했다. 모바일 작품 상세에서는 큰 이미지보다 설명과 체험 버튼을 먼저 보게 했다. 이미지가 주는 감각은 보존하되, 무엇을 할 수 있는지를 먼저 판단할 수 있도록 한 선택이다.

전자책 페이지에는 소개가 여러 번 이어져 있었다. 제목과 간단한 구성 안내를 정리하고 무료 샘플을 읽을 수 있다는 사실을 앞에 놓았다. 샘플을 연 다음에도 이전·다음 버튼을 찾기 위해 본문 끝까지 내려가지 않도록 페이지 이동을 위로 옮겼다. 입구를 줄이는 일과 들어간 뒤의 길을 정리하는 일을 함께 다뤘다.

관찰 · 424픽셀은 매출이 아니라 위치의 변화다

같은 390×844 크기의 화면에서 첫 책의 상단 위치를 비교했다. 수정 전에는 화면 위에서 약 976픽셀 떨어져 있었고 수정 후에는 약 552픽셀에 나타났다. 약 424픽셀 앞당겨져 첫 화면 안에서 책을 볼 수 있게 된 것이다. 이는 같은 조건에서 관찰한 배치의 변화다.

이 수치만으로 사람들이 더 많이 구매한다고 말할 수는 없다. 이번 점검에는 실제 고객의 구매 전환 실험이 없었다. 샘플의 다음 페이지로 이동하고, 작품 필터가 결과를 바꾸고, 상담 답변의 링크가 출간 문의 화면으로 이어지는 것은 직접 확인했다. 반면 실제 결제나 문의 수신까지 확인한 것은 아니다. 관찰한 행동과 아직 모르는 결과를 따로 남겨야 다음 검사가 정확해진다.

문의 · 작성한 것과 전달한 것은 다른 상태다

출간 소식을 묻는 사람에게 외주 프로젝트의 예산과 일정을 먼저 요구하면 질문 하나를 보내기 위해 큰 일을 시작하는 느낌이 들 수 있다. 전자책 문의에는 관심 있는 책과 회신 정보가 먼저 보이도록 항목을 줄였다. 특정 미니북에서 넘어온 경우 그 선택이 양식에 남도록 했다.

문의 내용을 복사하거나 메일 앱으로 옮기는 기능도 접수 완료와 구분했다. 복사본에는 읽을 수 있는 항목명을 쓰고, 필수 정보가 비어 있으면 먼저 입력할 곳을 알려준다. 현재 경로에서는 사용자가 이메일 보내기를 마쳐야 한다. 버튼이 반응하는 것과 담당자에게 내용이 도착하는 것 사이의 차이를 화면 문구가 설명해야 한다.

다음 질문 · 방문자가 설명 없이도 움직일 수 있는가

다음 화면을 검수할 때는 방문 목적 하나를 정한 뒤 시작해 볼 수 있다. 예를 들어 ‘이 책이 내 상황에 맞는지 알아보고 싶다’라면 책을 찾고, 샘플을 읽고, 궁금한 점을 문의하는 데 필요한 선택을 차례로 적는다. 그때마다 찾기 어려웠던 버튼, 이해할 수 없었던 상태, 다시 입력해야 했던 내용을 기록한다.

모든 설명을 없애거나 모든 버튼을 첫 화면에 넣자는 뜻은 아니다. 결정을 돕는 설명은 해당 선택 곁에 두고, 아직 필요하지 않은 설명은 다음 단계로 옮겨 본다. 이 글에서 제안하는 기준은 화면의 밀도를 낮추는 것 자체가 아니라 방문 목적에 필요한 다음 행동이 보이는지 확인하는 것이다. 아름다움을 보존하면서도 사람이 길을 찾을 수 있는지, 같은 조건에서 다시 살펴보는 작업이 남는다.

독자 연습

내 사이트에서 방문 목적 하나를 정하고 ‘찾기 → 확인하기 → 다음 행동’의 세 화면을 캡처해 보세요. 각 화면에서 망설인 이유 하나와 바꿀 순서 하나를 적고, 수정 전후를 같은 화면 크기로 비교하세요. 위치의 변화와 실제 이용 결과는 따로 기록합니다.

실제 QA 기록과 산출물을 바탕으로 AI가 편집한 개발일지입니다. 사용법 제안은 편집 해석이며, 제작자의 직접 발언이나 실제 고객의 구매 후기, 전환율 실험 결과가 아닙니다.