vibeui

SERVICE BLUEPRINTS / 08

사업마다 다른 화면의
출발점.

템플릿은 색만 바꾼 페이지가 아닙니다. 누가 들어오고, 무엇을 확인하고, 어디에서 사람이 개입하는지가 달라지면 읽는 순서와 문장의 목소리도 달라집니다.

PICK A WORKING SHAPE

서비스가 해야 할 일부터.

모든 샘플에서 비교하기

01

전문 서비스

처음 온 사람이 믿고 다음 행동을 고르는 자리

누가 어떤 일을 맡는지부터 보이게 하고, 긴 설명보다 확인할 수 있는 근거와 다음 연락 방법을 가까이 둡니다.

먼저
전문 분야
그리고
신뢰 근거
마지막
상담 동선
이 골격의 샘플 보기

02

상품·예약

고르는 이유와 다음 선택이 이어지는 상점

  1. 01선택 기준
  2. 02상태 피드백
  3. 03구매 전 안내

가격을 부풀리거나 가짜 재고를 만들지 않습니다. 사진과 선택 기준을 먼저 보여 주고, 담기·예약·문의 상태를 정직하게 남깁니다.

이 골격의 샘플 보기

03

교육·코호트

배우는 사람이 다음 수업을 찾는 구조

  1. 첫 수업

    학습 순서

  2. 진행 중

    자료 자리

  3. 함께 남는 것

    참여 안내

과정의 순서와 참여자가 할 일을 가볍게 보여 줍니다. 과장된 성과 대신 수업 자료, 진행 방식, 질문이 오가는 곳을 설계합니다.

이 골격의 샘플 보기

04

업무 도구

반복되는 일을 덜 헷갈리게 만드는 화면

NOW
업무 상태
EMPTY
빈 화면
SAFE
권한 경계

대시보드 장식보다 지금 처리할 일과 그 상태를 우선합니다. 숫자는 실제 데이터가 있을 때만 강조하고, 비어 있을 때의 화면도 설계합니다.

이 골격의 샘플 보기

05

운영 자동화

사람이 확인해야 할 순간을 남기는 자동화

입력 경로검토 지점실패 처리

무엇이 자동으로 흐르고 무엇을 사람이 확인하는지 드러냅니다. 성공을 꾸며내기보다 대기·실패·재시도 상태를 작업 언어로 남깁니다.

이 골격의 샘플 보기

06

스튜디오·포트폴리오

작업의 결을 보고 함께할 이유를 찾는 곳

작품을 모두 같은 카드로 줄 세우지 않습니다. 한 장면을 크게 남기고, 맥락과 다음 프로젝트 이야기는 조용히 이어 둡니다.

대표 장면 / 작업 맥락 / 문의 여백

이 골격의 샘플 보기

07

콘텐츠·아카이브

읽을거리와 탐색의 리듬을 갖춘 아카이브

한 화면에 정보를 다 넣기보다 제목·분류·짧은 맥락을 분리합니다. 사람 이름과 날짜, 작품 정보처럼 주어진 사실만 사용합니다.

분류 체계 · 읽기 흐름 · 작은 맥락

이 골격의 샘플 보기

08

캠페인·체험

ONE CLEAR SCENE

한 장면을 눌러 보고 다음 장면으로 가는 경험

첫 장면선택 반응모션 대안

첫 장면의 감각은 선명하게 잡되, 사용자가 조작할 이유도 남깁니다. 움직임을 줄인 환경에서도 문장과 선택지는 즉시 읽혀야 합니다.

이 골격의 샘플 보기

템플릿을 쓰는 순서

  1. 01

    운영 장면을 한 줄로 적습니다.

    ‘예약을 받는다’보다 ‘처음 온 사람이 가능한 시간을 고른다’처럼 씁니다.

  2. 02

    그 장면에 맞는 설계 골격을 고릅니다.

    화면의 분위기보다 상담, 선택, 학습, 운영 중 무엇을 끝내야 하는지 봅니다.

  3. 03

    샘플을 열어 문장과 상태를 바꿉니다.

    연결하지 않은 결제·발행·예약은 데모에서도 완료됐다고 말하지 않습니다.