풀스택

이지프롬(EasyPrompt) 개발일지

오늘 한 줄 요약

프롬프트 데이터 품질(내용 중복 정리, 난이도 재분류, 조건부 톤 기능)을 다듬고, 홈 화면을 2개 섹션에서 4개 섹션(AI 처음이에요 / 일반사용자용 / 사무용 / AI 코딩 입문) 구조로 확장하면서 어르신 전용 큰 글씨 UI와 "일반사용자용" 카테고리·프롬프트 10개를 새로 만들었다. 마지막엔 그 과정에서 생긴 카테고리 필터링 버그도 잡았다.

---

1. 프롬프트 데이터 정리

1-1. D1 전체 데이터 확인

wrangler d1 execute로 prompts × prompt_forms × categories를 JOIN해서 전체를 훑어봤다. 원래 "40개"로 기억하고 있었는데 실제로는 64개였다 — 그동안 여러 세션에 걸쳐 계속 추가돼온 걸 한 번에 파악하지 못하고 있었던 셈.

브라우저에서 보기 편하게 아티팩트 페이지로 정리했는데, Claude 데스크톱 앱은 아티팩트 링크를 못 여는 문제가 있어서 d1_export_prompts.json으로 로컬 파일도 따로 뽑아줬다. (참고: 아티팩트는 claude.ai 인증이 필요한 웹 페이지라 데스크톱 앱 자체 뷰어와는 안 맞는 것 같다.)

1-2. 겹치는 프롬프트 관점 분리

"인수인계서"(일반사무)와 "퇴사 인수인계"(인사HR) 두 개가 내용이 겹쳤다.

• 인수인계서: "당사자 본인이 업무를 넘기는 관점"으로 좁힘. 퇴사뿐 아니라 휴직·부서이동까지 포괄하고, 업무 프로세스·노하우 전달에 초점.
• 퇴사 인수인계: "인사담당자가 퇴사 행정을 처리하는 관점"으로 좁힘. 계정 비활성화, 사원증·장비 반납, 4대보험 상실신고 같은 행정 체크리스트 중심.

두 description만 봐도 관점 차이가 바로 느껴지게 문구를 다듬었다.

1-3. 난이도(level) 전수 재분류

"초보/일반/고급"을 정성적으로만 붙여놨던 걸, 아래 기준으로 64개 전부 다시 봤다.

• 초보: 입력 2~3개, 판단 없이 사실만 채우면 완성 (공지문, 안내문 등)
• 일반: 입력 3~4개, 맥락 판단·톤 조절 필요 (보고서, 이메일, 기획안 등)
• 고급: 조직적으로 민감하거나 다수 이해관계자 고려 필요 (조직개편, 예산초과 승인, 인사평가, 합격불합격 통보 등)

결과를 먼저 리스트로 보고한 뒤 승인을 받고 반영했다. 18개가 바뀌었고, 특히 "고급"이 1개(조직개편 안내문)에서 6개로 늘었다 — 예산초과 승인요청, 인사평가 피드백, 합격불합격 통보, 면접 평가서, 이슈 대응 메시지가 새로 고급으로 편입됐다. 회의록 정리·구두보고 정리처럼 "정리만 하면 되는 것 같지만 사실 맥락 판단이 필요한" 애매한 케이스들을 초보→일반으로 많이 옮긴 게 특징.

1-4. 대표 프롬프트 6개에 "조건부 톤" 필드 추가

각 카테고리 대표작에 상황을 더 세밀하게 반영할 수 있는 입력 필드를 하나씩 추가했다.

프롬프트	추가된 조건
조직개편 안내문	구성원이 가장 불안해할 지점 → 직접 언급할지 우회할지 자동 판단
예산초과 승인요청	초과 심각도 → 경미(담백한 톤) vs 심각(신중하고 무게감 있는 톤)
광고 카피	타겟 반응이 저조할 경우 대안 톤 카피 1개 추가 생성
반론 대응	반론 강도 → 가벼운 의문(정보 보완) vs 강한 거부감(감정 인정 후 신뢰 회복)
에러 해결	사용자 이해도 → 완전 초보(용어 풀이) vs 기초(핵심 원인 위주)
사내 공지문	예상 질문·우려를 공지문에 선제적으로 반영

기존 {0}~{2} 순서는 그대로 두고 새 필드를 4번째({3})로만 추가해서, 기존 데이터 매핑이 깨지지 않게 했다.

작업 방식 메모: 이번엔 D1(운영 DB)에 먼저 반영한 뒤, 로컬 개발용 seed SQL 파일들(more_prompts.sql, hr_prompts.sql, seed_data.sql, dev_prompts.sql, dev_planning_prompts.sql)에도 매번 동일하게 동기화해줬다. 안 그러면 로컬 D1을 재시딩할 때 옛날 내용으로 덮어써지기 때문.

---

2. 홈 화면 4섹션 구조로 재편

기존엔 "AI 처음이에요" / "프롬프트 활용하기" 2개 토글뿐이었는데, 사용자층이 늘면서(5060세대·어르신, 코딩 입문자) 아래처럼 4개로 나눴다.

1. AI 처음이에요 → /guide (기존 유지)
2. 일반사용자용 → /senior (신규 — 5060세대·어르신 대상)
3. 사무용 프롬프트 활용하기 → /prompts (기존 유지, 경영기획/마케팅/영업/일반사무/인사HR 5개만 필터링)
4. AI 코딩 입문 → /coding (신규 — AI 코딩 입문 카테고리 전용)

Home.jsx는 2x2 카드 그리드로, 카드마다 파스텔톤(cream/peach/lavender/mint)을 하나씩 배정했다. Header.jsx 토글도 4개로 늘렸는데, 라벨이 길어져서(특히 "사무용 프롬프트 활용하기") 데스크탑 노출 기준을 md에서 lg로 올려 태블릿 폭에서도 햄버거 메뉴로 접히게 했다.

Senior.jsx, Coding.jsx는 처음엔 Prompts.jsx를 그대로 복제한 뼈대만 만들어두고(다음 단계에서 다듬기로), Prompts.jsx 쪽은 바로 5개 사무 카테고리만 보이도록 필터링을 걸었다.

---

3. 어르신 전용 UI — Senior.jsx

일반 페이지 대비 눈에 띄게 큰 UI로 다시 만들었다.

• 폰트: 본문 22px~, 제목 32~40px (기존 대비 1.5배 이상)
• 버튼·입력창: 최소 56px 높이 (터치하기 쉽게)
• 카테고리 필터·검색창 같은 복잡한 UI는 아예 제거 — 세로 카드 목록만
• 레벨(초보/일반/고급)에 따라 큰 이모지 아이콘(🌱/📄/⭐)을 텍스트 옆에 배치해 글을 안 읽어도 감이 오게
• 색상은 파스텔톤 유지하되 카드 배경을 200번대 톤 + text-gray-900 조합으로 써서 대비를 다른 페이지보다 진하게

PromptDetail.jsx(상세 페이지)에도 카테고리 이름이 "일반사용자용"이면 자동으로 같은 큰 글씨/큰 버튼 스타일이 적용되도록 조건부 스타일링을 넣었다. 공용 컴포넌트인 Button엔 size="senior", ErrorMessage엔 large prop을 새로 추가해서 재사용 가능하게 했다.

"일반사용자용" 카테고리 + 프롬프트 10개 신설

D1에 새 카테고리(생활 타입)를 만들고, 5060세대·어르신의 실제 생활 상황에 맞춘 프롬프트 10개를 추가했다.

• 자녀·손주에게 보낼 문자 다듬기
• 보이스피싱 의심 문자 판별
• 병원·관공서 안내문 쉽게 풀어주기
• 건강검진 결과 용어 설명
• 경조사(결혼/돌잔치/부고) 문자 만들기
• 가족 모임 안내 문자
• 스마트폰·키오스크 사용법 "물어보는 법" 자체를 알려주기
• 환불·교환 전화하기 전 할 말 정리
• 병원·관공서 전화 문의 내용 정리
• 온라인 쇼핑 후기·SNS 글쓰기

다른 카테고리는 입력 폼이 보통 3~4개인데, 여기는 부담을 줄이려고 전부 1~2개로 최소화했다. 문구도 한자어·전문용어를 최대한 빼고 쉬운 말로 썼다.

---

4. 버그 수정 — 카테고리 필터링 누수

섹션을 늘리는 과정에서 실제 버그가 하나 발견됐다.

Coding.jsx가 카테고리 필터링을 전혀 안 하고 있었다. Prompts.jsx를 복제할 때 만든 임시 뼈대 코드가 그대로 남아 있어서, /coding 페이지에 들어가면 사무용 48개 + 코딩 16개 + 일반사용자용 10개, 총 74개가 다 섞여서 나오고 있었다. /categories에서 "AI 코딩 입문" id를 찾아 그 id로만 /prompts를 조회하도록 고치고, 의미 없이 남아있던 카테고리 탭 UI(사무용 카테고리들이 탭으로 보이던 부분)도 제거했다.

반면 Prompts.jsx는 이전에 만들어둔 화이트리스트 필터링(경영기획/마케팅/영업/일반사무/인사HR)이 이미 정상 동작하고 있었다 — 실제로 두 페이지가 쓰는 로직을 그대로 재현한 Node 스크립트로 배포된 API를 대상으로 검증해서 확인했다 (이 환경엔 브라우저 도구가 없어서 실제 콘솔 로그 대신 이 방식으로 교차검증).

마지막으로 Guide.jsx 하단 "프롬프트 활용하러 가기" 버튼도, 섹션이 4개로 늘면서 /prompts 고정 이동이 안 맞아 /(홈)으로 바꾸고 문구도 "다른 섹션 둘러보기"로 수정했다.

---

오늘 커밋 목록

1. seed: id36/47 인수인계 프롬프트 문구를 D1 반영 내용과 동기화
2. seed: 18개 프롬프트 level을 D1 반영 내용과 동기화
3. seed: 6개 대표 프롬프트에 조건부 톤 조절 필드 추가 반영
4. Restructure home toggle into 4 sections
5. Add senior-friendly large UI for general user section
6. Fix category filtering leak between office and coding sections
7. Fix guide page bottom button to route to home instead of office prompts
8. Add 2026-08-06 worklog entry

다음에 할 일 (TODO)

• "일반사용자용" 카테고리·프롬프트 10개가 아직 로컬 seed SQL 파일엔 반영 안 됨 (D1엔 있음) — 동기화 여부 결정 필요
• Senior.jsx/Coding.jsx를 만들 당시 "다음 단계에서 다듬을 예정"이라고 남겨둔 TODO 주석들 — 오늘 Senior는 큰 글씨 UI로 다듬었지만, Coding.jsx는 필터링 버그만 고쳤을 뿐 UI 자체는 아직 Prompts.jsx 카드 스타일 그대로임
• 실제 브라우저로 반응형 레이아웃(특히 Header 4토글 접힘, Senior 카드) 눈으로 직접 확인 필요 — 이번 세션엔 브라우저 도구가 없어 빌드 성공 + API 응답 검증으로만 확인함