웹 페이지·서비스 구조
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
랜딩 페이지 Landing Page
특정 캠페인이나 유입 목적에 맞춰 하나의 주요 전환 행동을 중심으로 만든 페이지.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
첫 화면 영역 Above the Fold
초기 화면에서 스크롤하지 않고 보이는 콘텐츠 영역. 기기마다 범위가 달라진다.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
기능 소개 섹션 Feature Section
제품 기능과 사용 가치를 묶어 설명하는 콘텐츠 블록.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
사회적 증거 Social Proof
후기·고객 사례·사용 실적 등으로 판단에 참고할 근거를 제공하는 콘텐츠.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
추천 후기 Testimonial
고객이나 사용자의 경험을 인용하여 제시하는 콘텐츠.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
가격 비교표 Pricing Table
요금제별 가격·기능·제약을 비교해 선택을 돕는 표.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
비교표 Comparison Table
제품이나 선택지 간 차이를 동일 기준으로 정렬해 보여주는 구조.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
FAQ 영역 FAQ Section
자주 발생하는 질문과 답변을 모아 제공하는 구조.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
기능 그리드 Feature Grid
여러 기능의 이름·설명·아이콘을 반복되는 셀로 배열한 구성.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
고정 내비게이션 Sticky Navigation
스크롤 중에도 특정 위치에 남도록 만든 탐색 영역.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
스크롤텔링 Scrollytelling
스크롤 위치에 맞춰 이미지·텍스트·시각화를 전개하는 이야기 전달 방식.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
메가 푸터 Mega Footer
페이지 하단에 사이트의 주요 분류·정책·보조 탐색을 넓게 제공하는 구조.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
유틸리티 내비게이션 Utility Navigation
언어·계정·고객지원 등 핵심 콘텐츠 외 공통 기능을 모은 탐색 영역.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
앱 셸 Application Shell
내비게이션·헤더·작업 공간 등 여러 화면에 공통인 애플리케이션 골격.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
마스터·디테일 레이아웃 Master–Detail Layout
항목 목록과 선택 항목의 상세 정보를 함께 제공하는 구조.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
포털 레이아웃 Portal Layout
여러 서비스와 콘텐츠로 진입하는 시작점을 집중시킨 구조.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
풀블리드 레이아웃 Full-bleed Layout
이미지나 배경을 컨테이너 여백 없이 화면 가장자리까지 확장한 구성.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
분할 화면 레이아웃 Split-screen Layout
화면을 둘 이상의 대비되는 영역으로 나누는 구성.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
콘텐츠 우선 설계 Content-first Design
실제 정보의 양과 구조를 먼저 정한 뒤 레이아웃을 만드는 접근.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
우아한 성능 저하 Graceful Degradation
고급 기능을 지원하지 않는 환경에서도 핵심 작업은 가능하게 하는 전략.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
Web Pages & Service Architecture
Open an entry for its visual reference, comparisons and source-language text.
Landing Page 랜딩 페이지
A page focused on one primary conversion action for a particular campaign or traffic source.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Above the Fold 첫 화면 영역
The content visible before scrolling; its extent varies with the device and viewport.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Feature Section 기능 소개 섹션
A content block explaining product features and the value they provide.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Social Proof 사회적 증거
Evidence such as reviews, customer examples, or usage results that supports a user's judgment.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Testimonial 추천 후기
Content quoting a customer's or user's experience.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Pricing Table 가격 비교표
A table comparing plan prices, features, and limits to support a choice.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Comparison Table 비교표
A structure comparing products or options against the same criteria.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
FAQ Section FAQ 영역
A collection of frequently asked questions and their answers.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Feature Grid 기능 그리드
A repeated grid of feature names, descriptions, and icons.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Sticky Navigation 고정 내비게이션
A navigation area that stays at a particular position during scrolling.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Scrollytelling 스크롤텔링
A storytelling approach that reveals text, images, and visualizations in response to scrolling.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Mega Footer 메가 푸터
A broad footer containing major site categories, policies, and supplementary navigation.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Utility Navigation 유틸리티 내비게이션
Navigation grouping shared functions such as language, account, and support.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Application Shell 앱 셸
The shared application structure containing navigation, headers, and work areas.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Master–Detail Layout 마스터·디테일 레이아웃
A layout showing an item list together with details of the selected item.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Portal Layout 포털 레이아웃
A layout concentrating entry points to multiple services and content areas.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Full-bleed Layout 풀블리드 레이아웃
A layout extending an image or background to the screen edges without container margins.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Split-screen Layout 분할 화면 레이아웃
A composition dividing the screen into two or more contrasting areas.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Content-first Design 콘텐츠 우선 설계
An approach that establishes real content volume and structure before designing the layout.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Graceful Degradation 우아한 성능 저하
A strategy preserving essential tasks in environments that do not support advanced features.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.