고객이 한눈에 읽는 제작 과정

나는 방문자가 궁금해할 순서를 먼저 골랐다

처음 서비스를 맡기는 사람은 내부 조직도와 방법론보다 내가 요청하면 다음에 무엇이 일어나는지를 알고 싶을 수 있다. 무엇을 확인하고, 어떤 선택을 하고, 언제 화면이나 결과를 보며, 이후 수정은 어떻게 이어지는지가 먼저다. 과정 설명의 시작점을 방문자의 다음 행동에 맞추었다.

실제 작업에서는 이 영역을 첫 소개 다음으로 올리고 상단의 첫 메뉴와 대표 버튼도 같은 영역으로 연결했다. 방문자가 긴 서비스 목록을 다 읽기 전에 진행 순서를 볼 수 있는 구성이다. 이 배치는 모든 홈페이지의 정답은 아니다. 신청을 받아야 하는 사이트와 자료를 찾아야 하는 사이트는 첫 설명의 역할이 다를 수 있다.

단계의 제목은 실제로 하는 일로 썼다

현재 여섯 단계는 확인한다, 정리한다, 고른다, 만든다, 시작한다, 수정한다는 행동을 담고 있다. 추상적인 단계 이름을 읽은 뒤 다시 뜻을 해석할 필요가 적도록 제목과 짧은 설명을 붙였다. 이때 문장의 주어는 서비스를 수행하는 쪽이다. 누구의 업무인지 분명하게 했다.

고객에게 준비하라고 할 항목과 내가 수행할 업무가 한 카드에 섞이면 역할이 흐려질 수 있다. 자료 제공과 승인 같은 협의는 필요하지만 과정의 첫 설명에 모든 체크리스트를 넣지는 않았다. 기본 순서를 먼저 설명하고, 각 단계에 들어간 뒤 필요한 협의를 따로 알려주는 방법이다.

나는 큰 흐름에서 중복을 덜었다

진행 과정을 옮길 때 이전 위치에 같은 단계가 다시 남으면 방문자는 새 설명인지 반복인지 판단해야 한다. 같은 페이지에 서로 다른 네 단계와 여섯 단계가 있을 때도 두 가지가 어떤 관계인지 설명하지 않으면 혼란이 생긴다. 나는 대표 흐름 하나를 먼저 정하고 다른 설명이 그것과 충돌하는지 확인한다.

현재 핵심 과정 영역은 여섯 단계 카드로 구현됐다. 다른 전문 설명이 필요한 경우에는 그 단계 안의 상세 내용인지 별도의 서비스 분류인지 역할을 밝히는 편이 좋다. 숫자가 많고 도식이 촘촘하다고 작업이 더 체계적으로 전달되는 것은 아니다. 같은 일을 여러 이름으로 보여주는 부분부터 줄인다.

한 카드에는 한 가지 행동과 필요한 범위만 남겼다

단계 하나에 확인, 분석, 디자인, 운영을 모두 넣으면 다음 카드와 경계가 없어진다. 내가 확인한 소스에서는 제목 아래에 해당 업무를 설명하는 한 문장을 두었다. 예를 들어 제작 단계에서는 문구와 이미지를 필요한 크기에 맞게 만든다고 설명하고, 시작 단계에서는 설정과 시작을 설명한다.

짧게 만드는 과정에서도 범위는 지워서는 안 된다. 결과 확인은 클릭과 문의 같은 반응을 보고 수정하는 업무의 설명이지 성과를 보장한다는 뜻이 아니다. 자료를 만든다는 말도 제공하지 않는 촬영이나 별도 제작을 자동으로 포함하지 않는다. 자세한 범위가 필요한 부분은 상세 설명과 협의로 이어지게 한다.

홈페이지 제작에 적용하면 이런 순서로 풀 수 있다

아래 여섯 단계는 앞선 서비스 화면을 그대로 옮긴 것이 아니라 홈페이지 제작에 적용하기 위해 새로 정리한 설명 예시다. 실제 계약의 단계나 일정으로 확정한 것은 아니다. 제작하려는 홈페이지의 목적과 자료, 검증 조건에 맞춰 조정할 수 있다.

이 예시에서도 방문자가 이해할 행동을 앞에 둔다. 내부에서 사용하는 도구 이름은 필요할 때 설명하고, 첫 과정에서는 어떤 판단과 결과로 다음 단계가 이어지는지를 보여준다. 제작 후 바꾸는 운영까지 포함하면 공개 뒤의 책임도 처음부터 설명할 수 있다.

1. 목적 정하기: 방문자가 무엇을 이해하고 어떤 행동을 할지 정한다.
2. 자료 확인하기: 문구와 이미지, 사용할 수 있는 자료와 공개 범위를 확인한다.
3. 구조 정하기: 첫 설명, 메뉴, 상세 페이지와 연락 흐름을 연결한다.
4. 화면 만들기: 정한 구조에 맞춰 문구와 자료를 넣고 필요한 기능을 만든다.
5. 공개 전 확인하기: 실제 적용 범위에 맞춰 화면·주소·기능·공개 정보를 점검한다.
6. 운영 이어가기: 수정 요청을 기록하고 변경·발행·복원 방법을 남긴다.

나는 보기 쉬움과 이해했음을 따로 확인한다

단계를 크게 보여주면 읽을 수 있는 크기를 확보하는 데 도움이 된다. 그러나 큰 글씨가 곧 내용 이해를 증명하지는 않는다. 제목과 설명만 보고도 다음에 내가 하는 일이 무엇인지, 방문자가 결정해야 할 것이 무엇인지 짚을 수 있어야 한다.

새 화면을 검토할 때는 작은 화면에서 단계 순서가 이어지는지, 화살표가 문장을 가리지 않는지, 대표 버튼이 올바른 과정으로 연결되는지 확인한다. 또 읽은 사람이 자기 말로 순서를 설명할 수 있는지 확인하는 방법도 있다. 이런 이해도 질문은 앞으로 적용할 검토 방법이며 실제 사용자 인터뷰를 했다는 결과로 만들지 않는다.

현재 확인한 것은 문구와 구조다

이번 집필에서는 대화의 요청 방향, 프로젝트에 남긴 디자인 지침, 현재의 여섯 단계 배열과 출력 코드를 대조했다. 단계가 첫 소개 뒤에 있고 제목·설명이 데이터로 나뉜 구조를 확인했다. 이전 대화의 성공 주장만으로 현재 화면이 모두 검증됐다고 판단하지 않았다.

이 글은 해당 서비스 업무를 실제로 실행해 얻은 성과 보고가 아니라 홈페이지에 과정 설명을 구성한 경험이다. 현재 PC·모바일 화면을 새로 열어 검수한 결과도 아니다. 공개된 이 글의 한영 응답과 목록 반영은 확인하지만, 그 확인으로 원본 화면의 방문자 이해도나 사업 성과를 증명하지 않는다.

나는 전문성을 이해할 수 있는 순서에 담는다

전문성은 어려운 단어의 수보다 판단을 어떻게 이어가는지에서 드러날 수 있다. 무엇을 확인하고 어떤 근거로 선택하며 무엇을 만든 뒤 다시 점검하는지 설명하면, 처음 맡기는 사람도 자신의 요청이 어떤 과정으로 바뀌는지 볼 수 있다.

나는 고객에게 내부 작업의 모든 문서를 한꺼번에 보여주기보다 읽기 쉬운 기본 순서와 필요한 상세 설명을 연결하려 한다. 단계 이름을 다시 쓰는 일은 카피를 짧게 만드는 작업이면서 업무의 책임을 정리하는 작업이기도 했다.