제품 첫인상부터 기능 설명, 요금제 비교, 문의 유도까지 방문자가 위에서 아래로 한 번에 읽는 구성입니다.
검색이나 광고로 처음 들어온 방문자에게 제품을 설명하고 가입이나 문의로 연결할 때 사용합니다.
패턴 조합
낱개 패턴을 실제 화면 한 장으로 이어 붙인 조합 예시를 모았습니다. 레시피 20종을 6개 계열로 나눴고, 모두 합쳐 패턴 106종을 사용합니다. 각 레시피는 필요한 패턴만 순서대로 배치해 한 화면으로 이어 붙인 결과를 보여줍니다.
처음 들어온 방문자에게 설명하고 신청이나 문의로 연결하는 공개 페이지입니다.
제품 첫인상부터 기능 설명, 요금제 비교, 문의 유도까지 방문자가 위에서 아래로 한 번에 읽는 구성입니다.
검색이나 광고로 처음 들어온 방문자에게 제품을 설명하고 가입이나 문의로 연결할 때 사용합니다.
진행 방식과 결과물, 기술 근거를 순서대로 보여주고 상담 신청으로 마무리하는 서비스 소개 구성입니다.
제품 판매가 아니라 프로젝트 수주가 목적일 때, 신뢰 근거를 쌓아 상담 요청을 받는 페이지에 사용합니다.
행사 소개와 남은 시간, 일정, 연사, 자주 묻는 질문, 알림 신청까지 이어지는 행사 안내 구성입니다.
컨퍼런스나 웨비나처럼 신청 마감이 있는 행사를 알리고 참가 신청을 받을 때 사용합니다.
기능 하나를 깊게 설명하고, 연동 범위와 경쟁 제품 대비 차이, 실제 도입 사례까지 붙이는 구성입니다.
랜딩에서 기능 카드를 눌러 들어온 방문자에게 그 기능만 자세히 설명할 때 사용합니다.
긴 글의 위치를 잡아 주는 레일과 근거 수치, 사례 이미지, 다음 읽을거리, 구독 신청을 이어 붙인 구성입니다.
리서치 노트나 사례 기사처럼 긴 글을 끝까지 읽히고 다음 글로 넘기고 싶을 때 사용합니다.
같은 자리를 두고 경쟁하는 첫 화면 후보를 성격순으로 늘어놓아 제품에 맞는 인상을 고르는 구성입니다.
랜딩의 첫 화면 방향을 정할 때, 후보를 말로 설명하는 대신 실제 동작으로 비교할 때 사용합니다.
매일 들어와 상태를 확인하고 처리할 일을 정리하는 내부 화면입니다.
서비스 상태와 목표 달성률, 지표 추이, 처리 대기 항목을 한 화면에서 확인하는 내부 운영 화면 구성입니다.
매일 아침 담당자가 먼저 여는 화면처럼, 이상 여부와 오늘 처리할 일을 함께 확인해야 할 때 사용합니다.
업무 공유, 작업량 배분, 우선순위 조정, 회의 진행, 결정 기록, 인계까지 한 스프린트의 운영 흐름입니다.
스프린트 시작과 마감 주간에 팀이 반복해서 쓰는 화면들을 한 번에 검토할 때 사용합니다.
역할별 권한과 로그인 세션, 외부 연결, 되돌릴 수 없는 계정 작업을 한 화면에서 다루는 관리 구성입니다.
운영자가 팀 접근 권한을 점검하고 이상한 세션이나 연결을 정리할 때 사용합니다.
작업 선후 관계와 일정 가능 시간, 진행 보드, 참여자 현황, 들어온 피드백을 한 화면에서 다루는 구성입니다.
여러 사람이 동시에 붙은 프로젝트에서 오늘 무엇이 막혀 있는지 확인할 때 사용합니다.
찾고, 고르고, 입력해서 하나의 절차를 끝내는 화면 묶음입니다.
조건으로 상품을 좁히고 옵션을 고른 뒤 장바구니와 주문 요약을 거쳐 결제까지 이어지는 구매 흐름입니다.
쇼핑몰이나 예약 서비스에서 탐색과 결제 사이의 화면 전환을 한 번에 검토할 때 사용합니다.
가입 정보를 나눠 입력하고 인증을 마친 뒤, 프로필과 로그인 보안, 외부 연결 계정까지 설정하는 흐름입니다.
신규 사용자가 처음 계정을 만들고 설정 화면까지 도달하는 구간을 한 번에 점검할 때 사용합니다.
조건을 세워 검색하고, 적용한 조건을 확인하며 목록을 정렬하고, 자주 쓰는 조건을 저장하는 검색 구성입니다.
사내 문서나 자료실처럼 검색 조건이 복잡하고 같은 조건을 반복해 쓰는 화면에 사용합니다.
답변에 따라 항목이 바뀌는 폼에 주소, 금액, 첨부 파일, 서명을 차례로 배치한 신청 화면입니다.
견적 요청이나 계약 신청처럼 입력 항목이 많고 조건에 따라 달라지는 폼을 설계할 때 사용합니다.
수치를 여러 각도로 나눠 보여 주고 해석을 돕는 보고 화면입니다.
잔존율, 변화폭, 구성 비중, 분포를 순서대로 놓아 하나의 질문에 답하는 분석 리포트 구성입니다.
월간 지표 회고처럼 수치를 여러 각도로 나눠 보고 원인을 좁혀 갈 때 사용합니다.
찬반 응답의 균형, 응답자 이동 경로, 집단별 구성, 여러 기준의 동시 비교를 이어 붙인 조사 결과 구성입니다.
설문이나 사용자 조사 결과를 공유할 때, 수치 하나가 아니라 응답 구조를 함께 보여 줘야 하는 경우에 사용합니다.
값을 조정하고 결과를 즉시 확인하는 편집 도구 화면입니다.
장면 구성부터 자막 타이밍, 오디오 구간, 레이어 합성, 썸네일 초점까지 이어지는 편집 작업 구성입니다.
영상 편집 도구의 화면 배치를 검토하거나 편집 단계별로 어떤 조작이 필요한지 정리할 때 사용합니다.
색, 그라디언트, 타이포 축, 배경 질감을 조정하고 결과를 기기 폭별로 확인하는 디자인 도구 구성입니다.
디자인 시스템의 값을 정하고 실제 화면에서 어떻게 보이는지 바로 확인할 때 사용합니다.
좁은 화면과 알림처럼 본문 위에 겹쳐 뜨는 요소를 다루는 구성입니다.
처음 온 사용자를 안내하고, 작업 결과를 알리고, 지난 알림을 모아 보고, 변경 사항 검토까지 연결하는 구성입니다.
기능을 새로 붙인 뒤 사용자에게 알리는 경로를 한 번에 점검할 때 사용합니다.
모바일 폭에서 쓰는 카드형 정보, 메뉴 드로어, 조건 드로어, 앱 설치 안내, 실수 방지 확인을 모은 구성입니다.
모바일 화면을 설계할 때 좁은 폭에서 메뉴와 조건, 확인 동작을 어떻게 배치할지 정할 때 사용합니다.