SYSTEM BLUEPRINT

운세·사주 웹
화면 설계와 사용자 흐름

NFC 진입부터 결과 확인과 운영 화면까지, 실제로 이어지는 구조를 화면으로 미리 그려 둡니다.

스토리보드란?

스토리보드는 사용자가 서비스를 처음 만나는 순간부터 결과를 확인하고 다시 돌아오는 순간까지를 화면 단위로 나눈 설계도입니다.

  1. 첫 방문 고객이 NFC 태그로 진입하고 결과를 읽는 흐름
  2. 재방문 고객이 오늘 운세를 빠르게 확인하고 공유하는 흐름
  3. 운영자가 문구와 언어를 관리하는 흐름

마지막까지 보시면 서비스가 어떤 순서로 움직여야 하는지 바로 떠올리실 수 있습니다.

첫 방문 고객 시나리오

NFC를 태그한 첫 순간부터 결과를 보는 흐름

참을 찍고, 간단히 정보를 넣고, 바로 결과를 확인하는 가장 기본적인 사용자 여정입니다.

태그로 진입

NFC 태그를 읽고 서비스가 열린다는 사실을 즉시 보여줍니다.

서비스 소개

어떤 결과를 볼 수 있는지 짧은 문장으로 먼저 안내합니다.

정보 입력

생년월일시와 양력·음력을 빠르게 입력합니다.

결과 확인

기본 사주와 해설을 한 화면에서 읽게 합니다.

저장과 공유

다음에 다시 보거나 친구에게 공유할 수 있게 합니다.

첫 방문 고객 | 화면 01

태그 진입 화면

https://fortune.example.com/nfc
nfc landing
NFC 준비
태그를 찍으면 바로 열리는 운세 웹
가방 참을 태그한 뒤 바로 다음 단계로 이어지게 만드는 첫 화면입니다.
태그 상태
NFC 태그가 감지되었습니다.
다음 행동
생년월일시를 입력하면 사주 결과를 볼 수 있습니다.
핵심은 멋진 소개가 아니라, 태그 직후 바로 다음 행동이 보이는지입니다.

[화면 개요 및 목적]

태그 진입 후 가장 먼저 보게 되는 첫 화면입니다. 서비스 성격을 짧고 분명하게 전달해야 합니다.

[핵심 기능 로직]

NFC 링크로 들어온 뒤 세션을 남기고, 다음 화면에서 언어와 시작 방식을 선택하게 합니다.

  • 진입이 즉시 열림
    NFC 딥링크
  • 모바일에서 가벼움
    Next.js 모바일 라우팅
첫 방문 고객 | 화면 02

생년월일시 입력

https://fortune.example.com/birth
birth form
NFC 준비
사주 결과를 위한 정보 입력
사용자가 가장 오래 머무르는 화면이 아니라, 가장 빨리 끝내고 싶어 하는 화면입니다.
생년월일 1990.03.12
출생 시간 오후 3:20
양력
음력
입력은 선택지를 줄이고, 완료 버튼을 분명하게 보여주는 쪽이 좋습니다.

[화면 개요 및 목적]

입력 단계는 최소한의 정보만 받되, 사용자가 한 번에 끝냈다고 느끼게 해야 합니다.

[핵심 기능 로직]

필수값 검증과 시간대 입력을 분리하고, 다음 화면으로 넘어가기 전에 누락값을 바로 알려줍니다.

  • 입력 실수 감소
    폼 검증 규칙
  • 시간 정보 유지
    로컬 저장소
첫 방문 고객 | 화면 03

기본 사주 결과

https://fortune.example.com/result
result page
NFC 준비
오늘의 중심 문장과 해설
사주 결과를 한 번에 읽게 하고, 아래에서 보조 문구를 차례로 확인하게 만듭니다.
오늘의 핵심
새로운 시작보다 속도를 조절하는 날입니다.
강점
감각이 빠르고 사람을 잘 읽습니다.
주의
결정을 서두르면 놓치는 부분이 생깁니다.
결과는 짧고 명료해야 합니다. 긴 설명보다 먼저 읽히는 한 줄이 필요합니다.

[화면 개요 및 목적]

결과 화면은 서비스의 얼굴입니다. 사주 해설과 오늘 운세를 읽기 쉽게 나누어 보여줘야 합니다.

[핵심 기능 로직]

핵심 결과를 요약한 뒤, 보조 문구와 공유 데이터를 분리해 저장합니다.

  • 결과 계산 분리
    사주 결과 엔진
  • 공유 카드 생성
    이미지 렌더링
재방문 고객 시나리오

다시 들어와 오늘 운세를 빠르게 확인하는 흐름

처음 입력한 정보를 바탕으로 오늘 운세와 보조 문구를 바로 다시 보는 여정입니다.

오늘 운세 열기

재방문자가 가장 빨리 보고 싶은 정보로 바로 이동합니다.

보조 문구 확인

행운 색과 한 줄 조언을 함께 읽게 합니다.

언어 전환

한국어에서 다른 언어로 바꾸는 흐름을 보여줍니다.

공유 카드

친구에게 보낼 수 있는 결과 카드가 따로 있습니다.

이전 결과 보기

전날 결과와 비교해 재방문 가치를 보여줍니다.

재방문 고객 | 화면 01

오늘 운세 카드

https://fortune.example.com/today
daily fortune
NFC 준비
오늘의 운세와 행운 색
매일 바뀌는 부분을 카드로 분리해 재방문 이유를 만들어 줍니다.
오늘 운세
작은 선택이 하루 흐름을 크게 바꿉니다.
행운 색
딥 민트
한 줄 조언
한 번 더 확인한 뒤 움직이세요.
마지막 갱신 · 오늘 오전 7:30
운세는 매일 바뀌는 정보와 고정 결과를 분리해 보여주면 관리가 쉬워집니다.

[화면 개요 및 목적]

재방문자는 결과를 빨리 확인하고 싶어 합니다. 오늘 운세와 보조 문구를 한 묶음으로 보여줍니다.

[핵심 기능 로직]

오늘 기준 문구를 불러와 카드 단위로 렌더하고, 결과 갱신 시점을 함께 저장합니다.

  • 일별 갱신 관리
    콘텐츠 스케줄러
  • 문구와 결과 분리
    운세 카드 모델
재방문 고객 | 화면 02

언어 전환 화면

https://fortune.example.com/language
language switch
NFC 준비
한국어에서 다른 언어로
언어가 바뀌어도 같은 정보 구조를 유지해야 사용자가 혼란스럽지 않습니다.
한국어 English 日本語 中文
상태
선택한 언어에 맞는 문구만 바뀝니다.
운영 메모
번역 확인이 끝난 언어만 공개합니다.
언어 전환은 버튼 수가 아니라 운영 난이도를 줄이는 구조가 더 중요합니다.

[화면 개요 및 목적]

다국어는 같은 구조 위에 얹어야 합니다. 언어만 바뀌고 화면 구조는 유지되는 것이 좋습니다.

[핵심 기능 로직]

언어 선택에 따라 문구 테이블만 바꾸고, 결과 로직은 그대로 유지합니다.

  • 문구 분리 유지
    언어별 콘텐츠 테이블
  • 검수 경로 확보
    승인 상태값
재방문 고객 | 화면 03

공유 카드와 기록

https://fortune.example.com/share
운영 화면
공유 카드와 히스토리
편집 가능
공유 카드
친구에게 보낼 한 장 이미지
이전 결과
어제와 오늘의 변화를 비교
최근 기록
오늘확인 완료
어제공유됨
공유와 기록은 사용자가 서비스를 다시 떠올리게 만드는 장치입니다.

[화면 개요 및 목적]

운세는 읽고 끝나는 것이 아니라 공유하거나 다시 보는 흐름이 있어야 생명력이 생깁니다.

[핵심 기능 로직]

공유 카드와 다시 보기 기록을 나누어 저장하고, 재방문 시 이전 결과를 불러옵니다.

  • 공유 카드 분리
    이미지 생성 큐
  • 재방문 값 유지
    결과 히스토리
운영자 시나리오

문구와 언어를 관리하는 운영 흐름

운영자는 결과 로직보다 콘텐츠 상태와 번역 상태를 먼저 확인합니다.

콘텐츠 목록

현재 공개 중인 문구와 상태를 확인합니다.

문구 수정

해설과 보조 문구를 따로 관리합니다.

번역 검수

언어별 문구가 맞는지 비교합니다.

배포 확인

수정한 내용이 실제 화면에 반영되었는지 봅니다.

로그 확인

문구 오류와 입력 실패를 모아 봅니다.

운영자 | 화면 01

콘텐츠 대시보드

https://fortune.example.com/admin
운영 화면
운영 대시보드
편집 가능
공개 중인 문구
기본 사주공개
오늘 운세검수 대기
다국어준비 중
정상
오늘 반영 3건
오류
번역 누락 1건
운영 화면은 결과를 예쁘게 보여주기보다 상태를 분명하게 보여주는 편이 좋습니다.

[화면 개요 및 목적]

운영자는 서비스 결과보다 콘텐츠 상태를 먼저 봅니다. 무엇이 공개 중인지 바로 읽혀야 합니다.

[핵심 기능 로직]

문구 공개 상태, 번역 상태, 수정 요청 상태를 한 눈에 보이도록 분리합니다.

  • 상태 한눈에 확인
    관리 대시보드
  • 콘텐츠 분리 관리
    문구 상태값
운영자 | 화면 02

문구 편집 화면

https://fortune.example.com/admin/edit
운영 화면
문구 편집
편집 가능
기본 사주 문구 수정 가능
오늘 운세 문구 검수 필요
행운 색과 조언 분리 보관
편집 화면은 긴 설명보다 상태 표시가 더 중요합니다.

[화면 개요 및 목적]

운영자는 결과를 직접 수정하는 대신 문구와 해설만 편집합니다. 이 분리가 중요합니다.

[핵심 기능 로직]

기본 사주, 오늘 운세, 보조 문구를 각각 다른 저장 단위로 다룹니다.

  • 문구 교체 쉬움
    콘텐츠 편집기
  • 검수 후 반영
    발행 상태
운영자 | 화면 03

배포와 로그 확인

https://fortune.example.com/admin/logs
운영 화면
배포 기록과 오류 로그
편집 가능
배포 상태
오늘 오전 9시 반영 완료
오류 상태
영문 번역 1건 확인 필요
최근 로그
NFC 진입정상
언어 전환정상
문구 저장검수 중
로그는 문제를 찾는 도구이면서, 다음 업데이트의 기준점이 됩니다.

[화면 개요 및 목적]

배포 후에는 정상 동작과 오류 상태를 같이 확인해야 합니다. 로그는 운영자의 안전장치입니다.

[핵심 기능 로직]

배포 시점과 오류 시점을 분리해서 보여주고, 마지막 정상 상태를 참고할 수 있게 둡니다.

  • 배포 확인 쉬움
    배포 로그
  • 장애 대응 빠름
    오류 수집