02 웹 서비스 정의 및 디자인 작업

웹 서비스 정의(디자인용)

우선 만들고 싶은 해당 기능을 가진 웹 서비스를 정의 합니다. 주로 디자인적인 요소를 부각시켜서 작성합니다.

1. 반응형 앱 서비스
2. 포스트 잇 처럼 디자인 해서 등록가능
3. 디자인은 파스텔 톤의 포스트잇처럼 보이고 끝에 약간 말라 올라간 느낌의 디자인
4. 일반 To-DO 메모장과, Task 메모장, 스케줄 메모장으로 기능을 나누어서 사용합니다.
5. 각 메모장은 기본적으로 MD 형식을 지원합니다.
6. AI로 전체 메모장의 요약과 현재 시점에 중요한 노티를 해 줄수 있습니다.
7. 회원 가입과 각 회원별 메모장 관리가 필요합니다.
8. Task 메모장은 각 Task 프로세스를 관리 할 수 있습니다. Plan(계획)->Progress(실행중)->Done(완료) 이 3가지 프로세스를 가집니다.
9. Desktop에서는 각 메모장은 자유로운 배치를 할 수 있습니다.
10. Desktop에서는 Task 별로 한눈에 JIRA의 일감처럼 해당 메모장을 볼수 있습니다.
11. 스케줄 메모장은 일시를 지정하고 D-Day를 나타내줍니다.

디자인 설계

프롬프트 요청

해당 디자인 설계를 위한 프롬프트를 생성합니다. 위 요구사항 앞에 다음 문구를 추가하여 LLM서비스에 요청합니다.

다음의 기능을 가지는 웹 서비스를 개발하고 싶습니다.
우선 아래 기능을 보고 Stitch에서 해당하는 디자인을 만들기 위한 기본 프롬프트를 자세하게 만들어주세요.

답변 예시

제안해주신 웹 서비스는 직관적인 아날로그 감성(포스트잇)과 강력한 디지털 기능(마크다운, 칸반 보드, AI 요약)이 잘 결합된 훌륭한 아이디어입니다.

Stitch(또는 유사한 AI UI/프론트엔드 생성 도구)가 이 요구사항을 완벽하게 이해하고 디자인과 코드를 생성할 수 있도록, 구조화되고 상세한 프롬프트를 작성해 드립니다. AI 생성 도구는 시각적 요소, 레이아웃, 컴포넌트 구조, 인터랙션을 명확히 분리해서 설명할수록 더 좋은 결과물을 냅니다.

---

### 📋 Stitch(AI UI 생성기)를 위한 프롬프트

**[역할 및 목적]**

당신은 UI/UX 디자인에 뛰어난 전문 프론트엔드 개발자입니다. 아날로그 감성의 '포스트잇' 컨셉을 가진 반응형 메모장 웹 어플리케이션의 UI와 기본 프론트엔드 로직을 만들어주세요.

**[전체 시각적 스타일 및 테마]**

- **색상:** 부드럽고 따뜻한 파스텔 톤(연한 노랑, 분홍, 민트, 하늘색 등)을 메인 컬러로 사용합니다.

- **포스트잇 디자인 (핵심):** * 각 메모장 컴포넌트는 실제 포스트잇처럼 보여야 합니다.

    - CSS `box-shadow`와 `border-radius`를 활용하여 메모장 하단 모서리(특히 오른쪽 아래)가 살짝 말려 올라가서 그림자가 지는 3D 입체 효과를 디테일하게 구현해 주세요.

- **타이포그래피:** 가독성이 좋으면서도 약간의 감성이 묻어나는 깔끔한 산세리프 폰트를 사용합니다.


**[레이아웃 및 반응형 동작 (Responsive)]**

- **Desktop (화면이 넓은 경우):**

    - **모드 1. 자유 배치 모드(Freeform View):** 넓은 보드(Board) 위에서 사용자가 마우스로 드래그 앤 드롭하여 포스트잇을 자유롭게 배치할 수 있습니다.

    - **모드 2. 칸반 보드 모드(Jira Style View):** Task 메모장들만 모아서 [Plan] - [Progress] - [Done] 3개의 컬럼으로 나누어 한눈에 볼 수 있는 보드 뷰를 제공합니다.

- **Mobile/Tablet (화면이 좁은 경우):**

    - 자유 배치 대신 1열 또는 2열의 Masonry(벽돌쌓기) 그리드 레이아웃으로 자동 정렬됩니다. 터치 친화적인 UI로 변경됩니다.


**[핵심 컴포넌트 및 기능]**

모든 메모장은 공통적으로 마크다운(Markdown) 렌더링을 지원해야 하며, 로그인한 사용자별로 독립적인 보드를 가집니다(UI 상에는 사용자 프로필 및 로그아웃 버튼을 우측 상단에 배치).

1. **일반 To-Do 메모장 (To-Do Note):**

    - 제목과 마크다운 텍스트를 입력할 수 있습니다.

    - 간단한 체크리스트 UI를 지원합니다.

2. **Task 메모장 (Task Note):**

    - 상단에 현재 상태를 나타내는 뱃지(Badge) 또는 드롭다운이 있습니다 (Plan, Progress, Done).

    - 칸반 보드 뷰에서 상태를 변경하면 이 뱃지도 동기화되어 보이도록 UI를 구성해 주세요.

3. **스케줄 메모장 (Schedule Note):**

    - 목표 일시를 설정할 수 있는 Datepicker UI가 포함됩니다.

    - 설정된 날짜를 기반으로 메모장 상단이나 하단에 크게 **[D-Day]** (예: D-5, D-Day, D+2) 뱃지가 시각적으로 강조되어 표시됩니다.


**[AI 요약 및 알림 UI (AI Assistant)]**

- 화면 우측 하단에 플로팅 버튼(Floating Action Button) 또는 상단 알림 바 형태로 'AI 비서' UI를 추가해 주세요.

- 이 UI를 클릭하면 모달(Modal)이나 사이드 패널이 열리며, "전체 메모장의 내용 요약"과 "현재 시점 기준 임박한 스케줄/Task에 대한 중요 알림(Notification)"을 텍스트 형태로 보여주는 디자인을 구현해 주세요.

Stitch 에서 디자인 설계

Stitch에 프롬프트를 입력하고 디자인을 시작합니다.
해당 프롬프트 하나로 전체 디자인이 나오지 않을수 있습니다. 단계별로 각 페이즈들을 확인해가면서 디자인을 설계합니다.*

디자인 예시

실습을 위한 화면(Free배치, 칸반, 회원가입, 메모입력창, 로그인, 회원가입, 모바일 뷰)를 만든다. 실습이기 때문에 더 자세한 기능은 기능구현에서 정의하고 해당 부분의 디자인은 참고로만 만든다고 생각하고 진행함*

참고 스크립트

메모 입력창

메모 생성 팝업화면도 만들어줘 메모는 다음과 같은 요소로 이루어져있어. 메모 타입: Free,Kanban Kanban인경우 상태 선택(Plan,Progress,Done) 옵션으로 Progress인 경우 해당 진척도 %선택 메모 색상: 여러 색상 선택(파스텔) 메모 제목: 입력 메모 내용: 입력 메모 D-day날짜:

리믹스를 위한 참고 링크(디자인 작업된 내용으로 복사)

https://stitch.withgoogle.com/projects/14159958111262173498

프로젝트명 변경

프로젝트명을 post-note로 변경합니다.(왼쪽 상단)