기획자가 꼭 알아야 할 UI 레이아웃 구조 정리

UI 레이아웃 구조 정리

🤔 UI 레이아웃 정리는 왜 중요한가?

기획자는 목적을 달성하기 위한 최적의 상황을 고려하여 기획을 한다.

사용자의 행동을 유도하거나 정보를 전달하기 위해 페이지 구조를 설계한다.

 

화면은 크게 헤더, 콘텐츠 영역, 서브 메뉴 영역, 하단 플로팅/고정 영역, 푸터로 구성된다.

• 헤더(Header) : 뒤로 가기, 타이틀, CTA(ex. 장바구니, 설정) 등
• 콘텐츠 영역 : 텍스트/이미지/리스트/탭 등 실제 정보 표현
• 서브 메뉴 영역 : 필터, 정렬, 검색 등 콘텐츠 조작 기능
• 하단 플로팅/고정 영역 : 버튼, 네비게이션, 가격정보 등 빠른 액션 유도
• 푸터 : 페이지 정보(ex. 사업자정보, 고객센터, 개인정보 처리방침 등)

목적에 따라 위 내용은 바뀔 수 있다.

 

1. 레이아웃을 정하기 전에 목적을 정의해야 한다. 

유사서비스 또는 최근 핫한 서비스를 벤치마킹을 하다 보면 목적을 잃는 경우가 많은데,

목적 없이 기획을 하다보면 괴물을 만들어내곤 한다.

 

2. 목적에 부합하는 서비스 맥락도 고려해야 한다.

서비스 내에 있는 여러 요소를 인지하고 있어야 한다. 다른 서비스에서는 일반적으로 사용되는 흐름이지만.

자사 서비스에서는 다르게 사용되고 있을 수 있다.

그렇게 된 히스토리가 있겠지만 전반적인 서비스 맥락을 인지하고 있어야 한다.

 

3. 내부 리소스를 존중해야 한다.

모든 서비스와 기능은 돈과 시간만 있다면 못할 게 없다. 카톡, 토스처럼 할 수 있다.

하지만 내부 리소스를 고려하여 기획할 줄 알아야 한다.

 

✅ UI 레이아웃 구조 정리

명칭	설명	대표 사례
1단 레이아웃 (Single Column Layout)	콘텐츠를 세로로 한 줄로 배치 모바일에서 가장 보편적	블로그, 기사, 인스타 피드
2단 레이아웃 (Two-Column Layout)	콘텐츠와 보조영역(사이드바)을 좌우로 분할	커뮤니티, 포털 뉴스
3단 레이아웃 (Three-Column Layout)	좌측 탐색, 중앙 콘텐츠, 우측 추천/광고 등 구성	네이버 메인, 에이비앤비, 네이버지도
카드형 레이아웃	정보를 박스 형태로 분할, 가로/세로 반복 구성	쿠팡, 인스타그램, 핀터레스트
탭형 레이아웃	영역을 탭으로 전환 동일한 위치에서 콘텐츠 변경	쇼핑앱 상품정보/리뷰, 설정 화면
아코디언 레이아웃	접었다 펼 수 있는 패널 정보 밀도 높을 때 사용	FAQ, 필터 옵션 영역
그리드 레이아웃	동일 너비의 행/열 형태로 구성 이미지 중심 UI에 적합	갤러리, 상품 진열
슬라이딩 패널	특정 영역을 눌렀을 때 우측/하단으로 상세 패널 등장	지도앱, 다이얼로그, 설정 디테일
모달/팝업 (Modal/Dialog)	화면 위에 떠서 현재 흐름을 잠시 차단	알림, 확인창, 퀙세팅
플로팅 레이아웃 (Floating UI)	하단이나 우측에 겹쳐진 버튼/패널로 UI 강조	플로팅 공유버튼, 챗본, 장바구니

 

🔥 실무에서 기획자가 고려할 포인트

• 정보 우선순위 : 가장 먼저 보여줘야 할 정보는 어디에 위치해야 할까?
• 사용자 흐름 : 사용자가 클릭 -> 탐색 -> 행동하는 흐름이 자연스러운가?
• 디바이스 대응 : PC, MW, 앱에서 이 구조가 모두 적합한가?
• 확장성 : 향후 콘텐츠/기능이 늘어나도 유지될 수 있는 구조인가?
• 접근성/반응성 : 한눈에 들어오는가? 모바일에서 불편하지 않은가?

 

📌 고정/유동/조건형 요소 구분

유형	정의	예시
고정 영역	항상 노출되는 UI	하단 탭 메뉴, 상단 네비
유동 영역	콘텐츠에 따라 길이/내용 달라짐	리스트 영역, 콘텐츠 탭
조건형 영역	특정 상황일 때만 노출	쿠폰 배너, 토스트 메시지, 오류 안내 등

 

페이지 전체 레이아웃을 만들거나 개선할 때에는 위 내용을 고려해야 한다.

각 요소는 목적에 따라 달라질 수 있으며 강조되어야 할 부분을 다르게 표현할 수 있다.

 

페이지 성격이 '상품상세'와 '고객센터'에서는 같은 목적의 기능이더라도 다르게 표현된다.

예를 들면 1:1 상담 같은 경우, 상품상세에서는 하단 영역에 탭으로 구분되어 노출되지만

고객센터에서는 플로팅 버튼으로 항상 노출시킬 수 있다.

 

⭐ 개발자와 디자이너 협업을 위한 팁

• 디자이너 : 비주얼 우선 -> 레이아웃 안에 콘텐츠 구성이 명확해야 디자인 방향 설정 가능
• 개발자 : 기능 우선 -> 어떤 요소가 클릭/입력/응답해야 하는지 구조 파악이 쉬어야 함

기획자가 작성한 문서를 바탕으로 일이 진행되기 때문에 다수의 이해관계자가 참고할 수 있도록 작성되어야 한다.

그들이 가장 궁금해하는 것은 "목적"과 "개선 방향"이다.

왜 이 일을 해야 하는지. 그럼 어떤 기대효과가 있는지. 그래서 어떻게 할 것인지 말이다.

---

서비스기획자의 가장 큰 업무 중 하나는 "커뮤니케이션"이다.

대부분의 서비스기획 채용공고를 보면 빠짐없이 커뮤니케이션 내용이 들어간다.

특히, 개발자와 디자이너와 직접적으로 소통해서 목표한 산출물을 얻은 경험은 귀하다.

 

현업에서는 당연하게 매일 루틴 하게 돌아가는 업무 중 하나지만.

때로는 답답하기도 한 상황을 겪는다.

같은 이야기를 하고 있지만 다른 세상에 있는 듯한 느낌이 들 때가 있다.

 

그런 상황이 발생하는 이유를 고민하다보면, 결국 나의 불명확한 목적이 시작일 때가 있다.

나도 왜 해야하는지 모르는 기획서를 작성할 때.

정확한 원인을 파악하지 못한 채 해결책을 찾아야만 할 때가 그러하다.

 

특히, 기획자의 산출물은 글이다. 형태는 문서, 메일, 메시지로 다양할 뿐.

글로 표현되어야 한다.

이 글이라는게 참 웃기다. 본인 스스로 명확하게 알지 못한 상황에서 작성하다 보면 읽는 사람에 따라 다르게 읽힌다.

입장에 따라 다르게 이해할 수 있다.

 

본인은 그래서 블로그에 글을 남기고 있다.

유시민 글쓰기특강 책에 나오는 글을 잘 쓰는 방법 중 첫번째인.

글을 잘 쓰기 위해서는 글을 많이 써야 한다는 것을 믿고 말이다.