Information Architecture & UX

홈페이지 정보 구조 UX 설계 | 사용성과 전환을 함께 고려한 구조 설계

좋은 홈페이지는 보기 좋은 화면보다
먼저 이해하기 쉬운 흐름을 가져야 합니다.

IA·UX ANSWER

정보 구조·UX 설계는 무엇을 확정하는 단계인가요?

승인된 Project Brief를 사이트맵·메뉴·URL·페이지 역할·사용자 결정 여정·콘텐츠 위계·CTA·내부링크·와이어프레임으로 구체화하고, 디자인과 WordPress 구축에 들어갈 UX 승인 기준을 만드는 단계입니다.

이 단계의 목적은 메뉴를 보기 좋게 정리하는 데 있지 않습니다. 방문자가 어떤 질문을 먼저 해결하고, 어디에서 신뢰를 확인하며, 자신의 준비상태에 맞는 다음 행동으로 이동할지를 구조로 고정해 디자인·콘텐츠·구축이 같은 방향으로 움직이게 합니다.

핵심 결과물: 사이트맵 · 페이지 역할표 · 사용자 결정 여정 · CTA·내부링크 맵 · PC·모바일 와이어프레임 · UX 승인본
01STRUCTURE
02JOURNEY
03HIERARCHY
04APPROVAL
ROLE SEPARATION

Discovery·UX·SEO 구조·Build는 서로 다른 판단을 담당합니다.

비슷한 용어를 한 페이지에 섞지 않고 각 단계가 소유할 결정을 분리해야 프로젝트와 검색의도가 함께 선명해집니다.

01 DISCOVERY

왜·누구에게·어디까지

목표·핵심 사용자·Desired Identity·범위·책임·리스크를 Project Brief로 승인합니다.

프로젝트 기획 보기

SEARCH GOVERNANCE

어떻게 색인하고 연결할지

canonical·Redirect·허브·상세·근거·전환 구조와 검색 거버넌스를 다룹니다.

SEO 구조 설계 보기

03 BUILD

어떻게 WordPress로 구현할지

승인된 구조를 Divi·CPT·ACF·WPML·기능·관리자 편집 구조로 구현합니다.

구현 및 연동 보기

DESIGN GATES

Project Brief를 8개의 정보 구조·UX 설계 단계로 전환합니다.

각 단계는 질문·판단·산출물을 남기며, 화면을 예쁘게 그리기 전에 구조와 이동 흐름을 승인할 수 있게 합니다.

01

Project Brief 인계

입력목표·사용자·Desired Identity·범위판단미확정 항목·우선순위 확인산출물UX Input Pack
02

사이트맵·메뉴 구조

핵심 질문어떤 정보를 어디에 묶을까?판단허브·상세·지원 계층과 메뉴 깊이산출물Sitemap
03

URL·페이지 역할

핵심 질문각 페이지가 무엇을 소유할까?판단브랜드·서비스·근거·전환 역할산출물Page Role Map
04

사용자 결정 여정

핵심 질문어떤 의문을 순서대로 풀까?판단탐색·비교·검증·문의 흐름산출물Decision Journey
05

콘텐츠 위계

핵심 질문무엇을 먼저 읽게 할까?판단핵심답변·범위·증거·FAQ 순서산출물Content Hierarchy
06

CTA·내부링크 맵

핵심 질문준비상태별 다음 행동은?판단탐색·비교·상담·문의 분기산출물CTA & Link Map
07

와이어프레임·모바일

핵심 질문화면에서 어떤 순서로 배치할까?판단PC·모바일 우선순위와 컴포넌트산출물Wireframe
08

UX 승인·Build 인계

핵심 질문언제 디자인·구축으로 넘어갈까?판단사이트맵·역할·흐름·CTA 승인산출물Approved UX Pack
홈페이지 정보 구조 UX 8개 설계 단계 지도
홈페이지 정보 구조 UX 8개 설계 단계 지도 모바일
PAGE ROLE SYSTEM

페이지 수보다 먼저 각 URL이 소유할 역할을 정합니다.

Home·About·서비스·사례·비용·지식·문의 페이지가 서로 다른 질문을 해결하도록 해야 콘텐츠 중복과 자기잠식을 줄일 수 있습니다.

01

브랜드·Home

회사의 핵심 약속과 대표 서비스, 신뢰 증거와 주요 분기점을 짧게 보여주는 허브입니다.

02

서비스 허브·상세

선택 기준을 제시하고 각 서비스의 문제·방법·범위·사례·비용요인을 설명합니다.

03

근거·비교·지식

포트폴리오·성과 근거·가격·FAQ·문서로 검증과 비교에 필요한 정보를 제공합니다.

04

전환·운영

문의·자료 요청·상담·관리·지원으로 이어지는 다음 행동과 운영 경계를 담당합니다.

판단 원칙: 하나의 페이지가 모든 역할을 맡게 하지 않고, 각 URL이 해결할 핵심 질문과 다음 행동을 한 문장으로 정의합니다.
홈페이지 페이지 역할 질문 CTA 매트릭스
홈페이지 페이지 역할 질문 CTA 매트릭스 모바일
DECISION JOURNEY

사용자 여정은 이동 경로보다 ‘해결되는 질문의 순서’입니다.

방문자가 어느 메뉴를 눌렀는지만 보는 것이 아니라, 각 페이지에서 어떤 의문을 해소하고 다음 판단으로 넘어가는지를 설계합니다.

회사 이해서비스 적합성범위·차이 비교사례·근거 검증비용·일정 판단문의 준비
EXPLORE

탐색 단계 CTA

서비스 선택, 업종별 사례, 진행 과정과 핵심 기준을 확인하도록 안내합니다.

COMPARE

비교 단계 CTA

가격 구간, 포함·제외 범위, 체크리스트와 유사 프로젝트를 확인하게 합니다.

DECIDE

결정 단계 CTA

프로젝트 유형·예산·자료·일정을 정리해 범위 상담이나 견적 요청으로 연결합니다.

CONTENT HIERARCHY

와이어프레임보다 먼저 페이지 안의 정보 우선순위를 승인합니다.

박스 배치부터 시작하지 않고, 사용자가 가장 먼저 이해해야 할 답과 그 답을 뒷받침하는 증거, 조건, 다음 행동을 순서대로 정합니다.

PAGE HIERARCHY

한 페이지의 권장 판단 순서

  • 페이지가 답해야 할 핵심 질문
  • 첫 화면의 핵심 약속과 적합 상황
  • 제공범위·방법·차별점
  • 사례·근거·비용·일정 판단요소
  • FAQ·조건·다음 행동
WIREFRAME

구조 검수 항목

  • 섹션 역할과 콘텐츠 분량
  • CTA 위치와 내부링크 방향
  • 반복 컴포넌트와 고유 페이지 구분
  • PC·태블릿·모바일 정보 우선순위
  • 고객 제공·웹버스 작성·공동 승인 영역
디자인 진입 조건: 메시지·페이지 역할·콘텐츠 위계가 승인된 뒤 타이포그래피·색·이미지·인터랙션을 적용합니다.
RESPONSIVE · SEARCH · OPERATION

좋은 UX 구조는 모바일·검색·WordPress 운영까지 이어져야 합니다.

MOBILE FIRST

축소가 아니라 우선순위 재설계

비교표를 카드로 바꾸고 긴 시각자료는 세로형으로 분리하며 핵심 답변과 CTA가 지나치게 아래로 밀리지 않게 합니다.

SEARCH CONNECTION

검색의도와 랜딩 경험 연결

검색의도를 페이지 역할과 첫 답변에, 허브·클러스터를 메뉴와 내부링크에, 전환 의도를 CTA에 연결합니다.

WORDPRESS SYSTEM

운영 가능한 컴포넌트로 인계

고유 템플릿·반복 템플릿·CPT·ACF·FAQ·CTA·WPML과 관리자 편집 경계를 Build 단계에 전달합니다.

색인·canonical·Redirect 같은 기술적 검색 거버넌스는 SEO 구조 설계에서 더 깊게 다루고, 실제 구현은 구현 및 연동 단계로 이어집니다.

UX APPROVAL

UX 승인본은 디자인과 WordPress 구축의 공통 기준입니다.

다음 항목이 검토되고 미확정 사항의 책임과 기한이 정리되면 Build 단계로 넘어갑니다.

CHANGE CONTROL

승인 이후 변경 기준

페이지 추가, 역할 변경, 콘텐츠 범위 확대, 기능·다국어·연동 변경은 다른 페이지와 일정·비용·검색자산에 미치는 영향을 먼저 확인합니다.

구조 안에서 가능한 보완

승인 이후 영향 분석이 필요한 변경

별도 범위·일정 협의가 필요한 확장

전체 프로젝트 프로세스다음: 구현 및 연동01 제작형02 검색자산형리뉴얼 범위 보기

‘프리미엄 홈페이지 제작’은 한 번 만들고 끝나는 작업이 아니라, 영업과 신뢰를 쌓는 기반입니다. 상담에서 지금 단계에 필요한 것만 추려서 로드맵 형태로 정리해드립니다.

F.A.Q
정보 구조·UX 설계

QUESTIONS

정보 구조 설계와 UX 설계는 어떻게 다른가요?

정보 구조 설계는 페이지·콘텐츠·메뉴·URL의 체계를 정리하는 일에 가깝고, UX 설계는 사용자가 그 구조를 어떤 순서로 이해하고 이동하며 행동하는지까지 다룹니다. 두 작업을 함께 설계해야 사이트맵이 실제 화면과 전환 흐름으로 이어집니다.

Project Brief 이후 무엇을 가장 먼저 설계하나요?

승인된 목표, 핵심 사용자, Desired Identity, 범위와 콘텐츠 책임을 확인한 뒤 사이트맵과 페이지 역할을 먼저 정리합니다. 이후 사용자 결정 여정, 콘텐츠 위계, CTA와 내부링크, 와이어프레임 순으로 구체화합니다.

사이트맵은 단순한 페이지 목록과 무엇이 다른가요?

페이지 목록은 필요한 화면을 나열한 자료에 가깝습니다. 사이트맵은 각 페이지의 상하위 관계, 허브와 상세 구조, 메뉴 노출 여부, URL 역할과 사용자의 이동 흐름까지 함께 정리해 전체 사이트가 하나의 체계로 작동하도록 만드는 설계 문서입니다.

페이지 역할은 왜 하나씩 구분해야 하나요?

한 페이지가 브랜드 소개, 서비스 설명, 가격, 사례, FAQ와 문의를 모두 담당하면 핵심 메시지와 검색의도가 흐려지기 쉽습니다. 페이지마다 브랜드·서비스·근거·비교·지식·전환 역할을 정하면 콘텐츠 중복과 내부 경쟁을 줄일 수 있습니다.

상단 메뉴는 단순할수록 무조건 좋은가요?

무조건 적게 만드는 것이 목표는 아닙니다. 방문자가 핵심 서비스와 다음 경로를 빠르게 이해할 수 있도록 중요도와 관계를 기준으로 묶는 것이 중요합니다. 필요한 내용은 분리하되 비슷한 내용은 허브 아래에 구조화합니다.

사용자 결정 여정은 어떻게 정하나요?

방문자가 사이트에서 해결해야 할 질문을 순서대로 정리합니다. 보통 회사 이해, 서비스 적합성, 차이와 범위, 실제 근거, 비용·일정 판단, 문의 준비 순서로 진행되며 업종과 구매상황에 따라 여정을 조정합니다.

CTA는 모든 페이지에 문의하기만 넣으면 안 되나요?

방문자의 준비상태가 다르기 때문에 하나의 CTA만 반복하면 행동 장벽이 높아질 수 있습니다. 초기 탐색에는 서비스·사례·가격 확인을, 비교 단계에는 체크리스트와 범위 상담을, 구매 직전에는 견적·상담 접수를 제공하는 방식이 적합합니다.

와이어프레임에는 최종 디자인도 포함되나요?

와이어프레임은 최종 시각 디자인보다 정보 순서, 섹션 역할, 콘텐츠 분량, CTA 위치와 반응형 우선순위를 검수하는 구조 문서입니다. 이 기준이 승인된 뒤 타이포그래피, 색, 이미지와 인터랙션을 적용해 디자인을 발전시킵니다.

모바일 정보 구조는 PC와 다르게 설계하나요?

핵심 역할과 메시지는 같지만 화면 폭과 사용 맥락이 다르므로 우선순위와 배치 방식은 달라질 수 있습니다. 비교표를 카드로 바꾸고, 긴 인포그래픽을 세로형으로 제작하며, 핵심 답변과 CTA가 지나치게 아래로 밀리지 않도록 조정합니다.

SEO 구조 설계와 UX 설계는 어떻게 연결되나요?

검색의도는 페이지 역할과 첫 답변에, 허브·클러스터는 메뉴와 내부링크에, 랜딩 기대는 첫 화면과 CTA에 연결됩니다. 다만 canonical, Redirect, 색인 정책과 검색 거버넌스는 SEO 구조 설계에서 더 깊게 다룹니다.

기존 사이트 리뉴얼에서는 무엇을 먼저 확인하나요?

현재 URL과 메뉴, GSC 노출과 클릭, 핵심 랜딩, 내부링크, 문의 경로와 사용자가 막히는 지점을 확인합니다. 유지·보강·통합·이전할 페이지를 구분한 뒤 새 사이트맵과 사용자 여정에 반영해 기존 검색자산을 불필요하게 잃지 않도록 합니다.

언제 UX 설계가 승인되고 구축 단계로 넘어가나요?

사이트맵, 페이지 역할, 주요 사용자 여정, 콘텐츠 위계, CTA와 내부링크, 핵심 와이어프레임, 모바일 우선순위와 미확정 항목이 검토되고 승인되면 Build 단계로 넘어갑니다. 이후 구조 변경은 일정·비용·다른 페이지에 미치는 영향을 먼저 확인합니다.