Nelydo ProductFrame 상세 프로젝트 기획서

1. 표지

• 프로젝트명: 제품 UI 설계 데모
• 한 줄 요약: 첫 화면부터 핵심 행동까지 제품 흐름을 빠르게 검토합니다.
• 공개 데모 URL: https://nelydo-universal-product-ui-demo.pages.dev/
• 작성 기준일: 2026-06-16
• 브랜드: Nelydo

2. 프로젝트 개요

제품 UI 설계 데모는 대표/기획자, 서비스 운영팀, 디자인 검토자가 공통으로 겪는 업무 흐름을 빠르게 확인할 수 있게 만든 공개 샘플 데모입니다. 기존 공개 데모 6개를 분석해 특정 프로젝트 하나에 묶이지 않는 공통 구조로 재설계했습니다.

3. 문제 정의

기능은 있어도 첫 화면 메시지, 화면 이동, CTA가 정리되지 않으면 서비스 가치가 한눈에 전달되지 않습니다.

반복 확인, 수동 정리, 상태 누락, 화면 이동 비용이 커질수록 실제 운영자는 중요한 결정을 늦게 내리게 됩니다. 이 데모는 그 문제를 한 화면의 상태판과 업무 큐로 정리합니다.

4. 제안 목표

• 클라이언트가 3분 안에 핵심 업무 흐름을 이해하게 합니다.
• 실제 고객정보 없이 샘플 데이터만으로 기능 범위를 설명합니다.
• 착수 후 필요한 데이터, 연동, 권한 범위를 미팅 질문으로 전환합니다.
• 업종별 변형이 가능하도록 화면을 범용 구조로 둡니다.

5. 사용자/이해관계자

• 대표/기획자: 상태 확인, 처리 판단, 다음 액션 결정
• 서비스 운영팀: 상태 확인, 처리 판단, 다음 액션 결정
• 디자인 검토자: 상태 확인, 처리 판단, 다음 액션 결정

6. 업무 흐름

1. 가치 메시지 확인
2. 주요 사용자 선택
3. 핵심 화면 비교
4. 개선 우선순위 결정

7. 화면 구성

• 상단 다운로드 CTA: 기획서를 바로 확인합니다.
• 운영 대시보드: 주요 지표와 현재 상태를 요약합니다.
• 업무 큐: 샘플 업무를 검색, 필터링, 선택합니다.
• 상세 패널: 선택한 업무의 상태와 다음 액션을 설명합니다.
• 기능 카드: 실제 구축 시 구현 가능한 기능 단위를 보여줍니다.
• 샘플 데이터 표: 공개 가능한 예시 데이터만 보여줍니다.

8. 기능 범위

필수 기능:

• 첫 화면
• 사용자 여정
• 핵심 CTA
• 카드 UX
• 모바일 화면
• 개선 우선순위

이번 공개 데모에서 제외한 기능:

• 실제 로그인
• 실제 외부 시스템 연동
• 실제 고객 데이터 저장
• 실제 결제, 메시지 발송, 파일 업로드 처리

9. 데이터 구조

샘플 데이터는 이름, 담당 영역, 상태, 값, 우선순위만 사용합니다. 실제 구축 시에는 고객이 보유한 파일, 기존 시스템, 수기 입력 방식 중 어떤 경로를 사용할지 확인해야 합니다.

10. 연동 구조

공개 데모는 모의 연동입니다. 실제 구축에서는 계정 권한, 데이터 형식, 전송 주기, 오류 처리 기준을 먼저 확정합니다.

11. 디자인/UI 방향

고급형 업무 도구처럼 보이되, 첫 화면에서 바로 이해되도록 큰 글자, 넓은 여백, 명확한 상태 배지, 짧은 CTA를 사용했습니다. 모바일에서는 카드가 한 줄로 쌓이도록 구성했습니다.

12. 구현 단계

1. 요구사항 확정
2. 핵심 화면과 데이터 구조 확정
3. 샘플 업무 흐름 구현
4. 실제 연동 범위 검토
5. 검수와 운영 반영

13. 일정/범위

우선 1차 범위는 대시보드, 업무 큐, 상세 패널, 리포트 요약입니다. 외부 연동과 권한 분리는 2차 범위로 분리하는 것이 안전합니다.

14. 보안/공개 안전

이 문서와 공개 데모는 실제 고객정보 없이 샘플 데이터만 사용합니다. 실제 구축 단계에서는 개인정보, 접근 권한, 보관 기간, 외부 연동 권한을 별도로 확정해야 합니다.

15. 리스크와 대응

• 요구사항 불명확: 화면별 목적을 먼저 확정합니다.
• 데이터 형식 불일치: 샘플 데이터와 실제 데이터 매핑표를 만듭니다.
• 외부 연동 제약: 모의 연동과 실제 연동을 분리해 착수합니다.
• 운영자 사용성 문제: 업무 큐와 상세 패널을 먼저 검수합니다.

16. 검수 기준

• 첫 화면에서 목적과 다운로드 CTA가 보임
• 샘플 업무 검색/필터가 작동함
• 상세 패널이 선택 업무에 맞게 바뀜
• 모바일에서 가로 넘침이 없음
• 실제 고객정보가 포함되지 않음

17. 미팅에서 확인할 질문

• 현재 가장 자주 반복되는 확인 업무는 무엇인가요?
• 실제 구축에서 꼭 필요한 데이터 항목은 무엇인가요?
• 관리자와 일반 사용자의 화면을 분리해야 하나요?
• 외부 시스템 연동은 1차 범위에 포함해야 하나요?
• 제품 UI 설계 데모에서 가장 먼저 검증하고 싶은 화면은 무엇인가요?

18. 다음 단계

1. 공개 데모 확인
2. 실제 업무 흐름 비교
3. 우선 구현 화면 확정
4. 데이터/연동 범위 확정
5. 견적과 일정 조율

19. 부록

분석에 사용한 공개 샘플 수: 6개

공개 기획서에는 기존 프로젝트의 내부 식별자나 원본 URL을 넣지 않고, 테마에서 재사용 가능한 구조만 반영했습니다.

라이브 화면에서 확인한 공통 신호:

• 첫 화면 요약 구조가 필요함
• 예약/접수 상태 흐름이 공통 패턴으로 확인됨
• 리포트/요약 출력 요구가 반복됨
• 검색/필터/상세 패널은 모든 테마에 재사용 가능한 기본 틀임
• 공개 샘플 데이터와 실제 구축 범위 분리가 필요함
• 모바일에서 먼저 확인 가능한 단순 카드 구조가 적합함