화면을 보는 순간부터,
필요한 일을 마칠 때까지.

페이지 수보다 먼저,
방문자가 마칠 일을 정합니다.

“회사 소개를 잘하고 싶다”와 “기관 고객이 견적을 요청하게 하고 싶다”는 다른 목표입니다. 소개가 목적이면 사업과 작업의 근거가 먼저 필요하고, 견적이 목적이면 품목·규격·수량을 어떻게 받는지가 중요합니다. 모든 화면에 문의 버튼을 늘리는 것보다 방문자의 가장 중요한 일 하나를 분명하게 정합니다.

첫 회의에는 고객을 상대하는 사람과 실제 운영 담당자가 함께 참여하는 것이 좋습니다. 가장 자주 받는 질문, 관리가 어려운 정보, 기존 주문과 문의가 어디서 막히는지 듣습니다. 새 사이트의 범위는 ‘필수로 열어야 할 것’, ‘다음 단계에 추가할 것’, ‘이번에는 하지 않을 것’으로 나눕니다.

기획 회의의 결정

핵심 이용자, 주요 행동, 페이지와 기능 목록, 자료 제공자, 일정·예산, 운영 책임.

범위 구분

화면 디자인, 퍼블리싱, 서버 개발, 쇼핑몰 솔루션 설정, 콘텐츠 등록, 도메인·호스팅과 유지보수의 포함 여부.

잘 만든 사이트를 모으기 전에,
지금의 질문과 빈칸을 봅니다.

기존 사이트가 있다면 페이지와 콘텐츠를 목록으로 만듭니다. 계속 쓸 정보, 고칠 정보, 없어진 상품, 아직 없는 자료를 구분합니다. 사진의 해상도와 사용 권한, 상품 정보의 정확성, 연락처와 담당 부서도 점검합니다. 준비되지 않은 내용을 디자인 단계에서 긴 임시 문장으로 덮으면 실제 자료가 들어왔을 때 화면이 다시 무너질 수 있습니다.

고객 인터뷰와 문의 기록에서 이용자가 쓰는 단어를 찾습니다. 회사 내부 분류가 고객의 검색어와 다를 수 있기 때문입니다. 분석 도구가 이미 있다면 이탈 화면과 검색 실패를 참고하되, 방문 수가 적거나 자료가 없으면 숫자를 만들어 판단하지 않습니다. 개인정보와 측정 도구의 도입은 수집 목적·동의·보관 등 필요한 검토를 거쳐 별도로 결정합니다.

고객 언어와 상품 분류의 차이를 설명하는 가상 예시입니다. 실제 수요나 검색 통계가 아닙니다.

경쟁 사이트에서는 보기 좋은 부분뿐 아니라 메뉴 깊이, 검색과 필터, 모바일 입력, 품절·배송·반품 안내를 살핍니다. 기능이 많다는 이유만으로 따라 넣지 않고 운영 인력과 실제 상품 자료가 감당할 수 있는지를 함께 봅니다.

길을 먼저 그리면,
중복 메뉴와 막다른 화면이 보입니다.

사이트맵은 페이지들이 어떻게 연결되는지 보여 주는 지도입니다. 사용자 흐름은 한 사람이 특정한 일을 마칠 때 거치는 길입니다. 둘을 함께 그려야 같은 내용으로 가는 버튼이 여러 개 생기거나, 자세한 설명을 읽고도 다음 행동을 찾지 못하는 문제를 줄일 수 있습니다.

이후 와이어프레임을 만듭니다. 색과 장식에 앞서 제목·본문·이미지·입력란의 자리를 정한 화면 뼈대입니다. 실제 길이에 가까운 한국어 문장과 실제 상품 정보를 넣어 보고, 모바일에서 중요한 조건이 너무 아래로 밀리지 않는지 확인합니다.

목록이 비었을 때, 검색 결과가 없을 때, 너무 긴 제목이 들어올 때, 오류가 났을 때의 화면도 설계합니다. 클릭 가능한 모형으로 “조건에 맞는 상품을 찾아 견적을 요청해 보세요” 같은 과제를 수행해 보면, 설명해야만 통과할 수 있는 화면을 발견할 수 있습니다. 디자인 설명을 듣고 이해한 것과 스스로 사용할 수 있는 것은 다릅니다.

브랜드의 인상과,
읽고 조작하는 편안함을 함께.

정보 구조가 정리되면 대표 화면의 디자인 방향을 제안합니다. 회사 소개 중심의 화면과 상품을 비교하는 화면은 이미지의 비중과 정보 밀도가 다릅니다. 같은 브랜드 색을 쓰더라도 무엇을 강조하고 어디에서 쉬어 읽게 할지 조절합니다. 모바일 화면도 마지막에 축소하지 않고 처음부터 함께 검토합니다.

버튼·입력란·카드·메뉴처럼 반복되는 요소는 컴포넌트, 즉 다시 쓸 수 있는 화면 부품으로 정리합니다. 글자 크기와 간격, 강조색의 역할을 규칙으로 만들면 페이지가 늘어도 서로 다른 사이트처럼 보이지 않습니다. 색만으로 성공과 오류를 구분하지 않고 문구와 아이콘을 함께 사용합니다.

위 네 칸은 입력 화면의 상태 설계 견본이며 실제로 정보를 전송하는 폼이 아닙니다.

사진과 그래픽은 역할이 있을 때 배치합니다. 상품의 크기를 알려 주는 비교 사진, 복잡한 순서를 설명하는 그림, 회사의 실제 작업 자료는 서로 목적이 다릅니다. 움직임은 꼭 필요한 곳에만 쓰고, 멈춤 기능과 사용자의 동작 줄이기 설정을 고려합니다.

한 장의 화면이 아니라,
하나의 일을 끝내는 장면으로 발표합니다.

첫 검토에서는 브랜드 인상과 정보 우선순위를 확인하고, 다음 검토에서는 실제 문구·이미지·상태별 화면을 대조합니다. 피드백은 “메뉴를 더 크게”라고 바로 해결책만 제시하기보다 “모바일에서 업무 안내를 찾지 못했다”처럼 관찰한 문제와 이유를 함께 남깁니다. 어떤 해결이 맞는지 디자이너와 개발자가 다시 확인할 수 있습니다.

최종 프레젠테이션은 방문자의 시작점에서 출발합니다. 어디로 들어와 어떤 정보를 읽고 어느 버튼을 누르는지, 잘못 입력하면 어떻게 회복하는지를 이어 보여 줍니다. 추가 기능이 운영 업무와 일정에 주는 영향도 설명합니다. 디자인 승인본과 개발 범위, 콘텐츠 확정본, 남은 결정 사항을 구분해 기록합니다.

시안의 그림을,
읽히고 작동하는 구조로 옮깁니다.

웹 퍼블리싱은 화면을 HTML·CSS와 필요한 JavaScript로 구현하는 작업입니다. 제목·문단·목록·버튼에 알맞은 의미를 부여하고, 화면 폭에 따라 열과 여백이 바뀌도록 만듭니다. 중요한 설명을 하나의 긴 이미지로만 넣으면 검색·확대·보조기기 이용과 내용 수정이 어려워질 수 있어 실제 텍스트와 구분해 설계합니다.

1. 01 · 의미 있는 문서

   제목의 순서와 탐색 영역, 링크·버튼·입력란의 역할을 정합니다. 키보드로 이동할 순서와 현재 위치의 표시를 함께 구현합니다.

2. 02 · 반응형 화면

   모바일·태블릿·넓은 화면에서 줄바꿈, 긴 제목, 표·메뉴의 넘침과 터치 영역을 봅니다. 기종 하나의 고정 크기에만 맞추지 않습니다.

3. 03 · 가벼운 자산

   사진은 필요한 해상도와 형식으로 준비하고 크기 정보를 지정합니다. 아래쪽 이미지는 필요 시 불러오되 첫 화면의 핵심 이미지를 무조건 지연시키지 않습니다. 장식용 동영상과 상시 효과는 필요성을 따져 넣습니다.

4. 04 · 기능 연결

   실제 문의 전송·검색·회원·결제는 서버나 솔루션의 기능과 연결합니다. 디자인 목업에 버튼이 있다는 이유만으로 저장·보안·결제가 구현된 것으로 보지 않습니다.

이미지의 용량과 불러오기 방식은 MDN 이미지 성능 안내를 참고합니다. 모든 이미지를 한 형식이나 같은 해상도로 바꾸는 일괄 처방은 하지 않습니다.

잘 보이는지와 잘 되는지는,
따로 확인해야 합니다.

디자인 검수는 글자·간격·이미지가 승인안과 맞는지 보는 일입니다. 기능 검수는 누르고 입력한 결과가 정확한지 확인하는 일입니다. 접근성 검수는 키보드·확대·보조기기 등 여러 이용 방식에서도 내용을 이해하고 조작할 수 있는지 보는 일입니다. 어느 한 검사로 나머지를 대신하지 않습니다.

접근성은 제작 막바지의 한 번짜리 검사보다 기획부터 반복 확인하는 방향으로 설계합니다. W3C WAI의 전 과정 접근성 관리 안내를 참고했습니다.

공개 직전에는 변경을 잠시 멈추고 승인 버전을 배포합니다. 배포 후에는 실제 주소에서 핵심 경로를 다시 확인합니다. 문제가 있으면 이전 버전으로 돌릴 책임자와 절차가 있어야 하며, 고쳤다는 기록뿐 아니라 정상화가 확인된 기록을 남깁니다.

열어 둔 웹사이트가,
관리할 수 있는 웹사이트가 되도록.

도메인과 호스팅 계정의 소유자, 갱신일, 자료 수정 방법, 백업과 복원, 문의 처리 담당자를 인계합니다. 비밀번호를 공개 문서나 소스에 넣지 않고 안전한 전달 방법을 따로 정합니다. 무엇을 운영자가 바꿀 수 있고 어떤 수정부터 디자이너·개발자의 확인이 필요한지도 안내합니다.

개선은 방문자 수 하나로 결정하지 않습니다. 문의를 완료하기까지의 단계, 반복해서 묻는 정보, 검색 결과가 없었던 말, 실패한 입력을 살핍니다. 필요한 측정은 적법한 수집 조건과 작은 표본의 한계를 함께 확인합니다. 매출이나 검색 순위를 디자인만의 결과로 보장하지 않습니다.

어디까지 만들고,
누가 확인할지 먼저 맞춥니다.

위 과정은 작업의 흐름을 이해하기 위한 안내입니다. 모든 단계를 같은 규모로 수행하거나 한 번에 계약해야 한다는 뜻은 아닙니다. 준비된 자료와 제작 조건에 따라 필요한 단계를 정하고, 시안 수·수정 범위·결과물·일정·비용을 작업 전에 합의합니다.

모든 답이 없어도,
지금 가진 것부터 이야기해 주세요.

아래 자료를 전부 갖춰야 상담할 수 있는 것은 아닙니다. 준비된 자료와 아직 정하지 못한 항목을 나누어 알려 주시면, 첫 회의에서 확인해야 할 질문을 함께 정리할 수 있습니다.

• 사이트의 가장 중요한 목적 한 가지
• 현재 주소와 유지해야 할 기존 링크
• 주요 고객과 자주 받는 질문
• 상품·회사 원고와 사용 가능한 사진
• 꼭 필요한 기능과 나중에 해도 될 기능
• 운영 담당자·희망 일정·예산·사용 중인 솔루션

처음 만나는 말도,
알고 나면 대화가 쉬워집니다.

사이트맵

어떤 페이지가 있고 서로 어디로 연결되는지 정리한 지도입니다.

와이어프레임

장식보다 정보와 조작 요소의 순서를 먼저 정한 화면의 뼈대입니다.

프로토타입

사용 흐름을 확인하기 위한 모형입니다. 클릭이 가능해도 실제 저장·결제 기능이 없는 경우가 많습니다.

퍼블리싱·프런트엔드·백엔드

퍼블리싱은 주로 화면 구조와 표현의 구현, 프런트엔드는 이용자 쪽 화면·상태·기능, 백엔드는 서버의 데이터·권한·처리를 다룹니다. 실무 범위가 겹칠 수 있어 계약에서 구체화합니다.

스테이징

공개 운영 환경과 분리해 변경 사항을 확인하는 검수 환경입니다. 실제 이용자의 데이터와 결제를 함부로 섞지 않습니다.