디지털 프로젝트 화면 증거형 5종 · BLOCK TEMPLATE

사용자 여정 화면 보드

검색부터 확인까지 네 단계의 과업, 화면, 전달정보와 복귀 경로를 하나의 사용자 여정 보드로 설명합니다.

디지털 프로젝트 화면 증거사용자 여정4단계 화면·정보인계
무료제작 제공 · 판매 준비중개별 구매 미오픈
목록으로 돌아가기
사용자 여정 화면 보드 블록 화면

판매 전에 확인할 내용

무엇을 바꾸고, 무엇을 준비해야 하는지 먼저 공개합니다.

EDIT

편집 가능한 항목

  • 문구
CONTENT

준비할 콘텐츠

  • 실제 문구와 사실 자료
  • 사용 승인을 받은 이미지
  • 연결할 상세·문의 링크
RESPONSIVE

5단 반응형 기준

1500 / 1200 / 992 / 768 / 576

PC와 모바일은 같은 내용을 각 화면 폭에 맞게 다시 배치합니다.

CONTRACT

버전 · 이용 범위

버전 기존 카탈로그

본인·고객 사이트 사용 가능 · 원본 재판매·재배포 불가

EXPORT

내려받기(ZIP)에 담기는 것

내가 바꾼 사진은 ZIP 안 images/ 폴더에 파일로 함께 담깁니다.

바꾸지 않은 기본 사진은 파일로 담기지 않고 cmshom.com 주소를 그대로 가리킵니다. 사진을 모두 내 것으로 바꾸시면 우리 서버와 무관하게 동작합니다.

블록 활용 가이드

어떤 역할이고, 어디에 어떻게 쓰는지

국내 웹에이전시 포트폴리오의 큰 화면 전개를 그대로 복제하지 않고 프로젝트 맥락, 화면 역할, 반응형 변화, 데이터 정의와 구현 규칙까지 읽을 수 있는 HTML·CSS 증거 구조로 제공합니다.

01

이 블록이 맡는 역할

검색부터 확인까지 네 단계의 과업, 화면, 전달정보와 복귀 경로를 하나의 사용자 여정 보드로 설명합니다.

02

어디에 배치하나요

검색·신청·예약처럼 여러 화면을 거치는 서비스 사례에서 단계 사이 정보 인계와 이탈 방지 설계를 보여줄 때 배치합니다.

03

어떻게 사용하나요

실제 사용자 조사와 기능 흐름을 확인하고 예시 여정을 운영 서비스의 확정 절차나 사용성 성과처럼 표현하지 않습니다.

적용할 때 준비할 내용

샘플을 그대로 쓰지 않고 실제 콘텐츠로 바꿉니다.

  1. 문구와 사실회사·서비스·사례에서 실제로 확인할 수 있는 내용을 준비합니다.
  2. 연결할 행동상담, 상세 보기, 신청처럼 이 블록 다음에 이어질 행동을 하나 정합니다.
  3. 브랜드 표현사이트 스킨의 색·글꼴·여백에 맞춰 블록을 자연스럽게 조정합니다.

블록은 조합해서 사용합니다

이 블록을 사이트 흐름에 맞게 연결해 드립니다.

필요한 콘텐츠와 기능을 확인한 뒤 다른 블록, 사이트 스킨과 어울리도록 조정합니다.

AI 상담원과 실시간 상담