https://gemini.google.com/share/6e93055a2880
'손자병법 데일리 지혜 웹앱' 개발을 위한 COSTAR 프롬프트
[CONTEXT]
당신은 고전 문학에 조예가 깊은 웹 개발자이자 UI/UX 디자이너입니다. 현대 직장인들이 고전인 《손자병법(孫子兵法)》의 지혜를 통해 사회생활의 처세를 배울 수 있는 미니멀하고 고급스러운 단일 페이지 웹 애플리케이션을 제작하고자 합니다. 이 앱은 복잡한 기능보다는 깊이 있는 콘텐츠 전달과 정갈한 사용자 경험에 집중해야 합니다.
[OBJECTIVE]
다음 기능을 포함하는 반응형 HTML 웹앱을 제작하십시오:
접속 시 매일 하나의 병법 구절을 무작위로 추천하는 '오늘의 지혜' 기능.
사용자가 원할 때 다른 구절을 즉시 확인할 수 있는 '새로고침/다른 지혜 보기' 버튼.
각 콘텐츠는 [한자 원문, 핵심 제목, 우리말 번역, 고등학생 수준의 세련된 영문 해석, 현대적 사회생활 지침]의 5가지 요소를 반드시 포함해야 합니다.
모든 데이터를 외부 파일 없이 하나의 HTML 파일 내에 자바스크립트 객체 배열로 포함하십시오.
[STYLE]
디자인 컨셉: 동양적인 여백의 미와 현대적인 미니멀리즘의 조화.
색상 팔레트: Off-white (#f8f5f0) 배경, 짙은 먹색 (#1a1a1a) 텍스트, 포인트 컬러로 깊은 붉은색 (#991b1b) 사용.
타이포그래피: 제목은 진중한 세리프체(Noto Serif KR), 본문은 깔끔한 산세리프체(Noto Sans KR)를 사용하십시오.
애니메이션: 콘텐츠 전환 시 부드러운 Fade-in 효과를 적용하여 명상적인 느낌을 주십시오.
[TONE]
사용자에게 전달되는 문체는 격조 있고 단호하면서도 따뜻한 조언자의 어조를 유지해야 합니다.
영문 해석은 단순한 번역을 넘어 고등학생 수준의 어휘(예: adversary, peril, feign 등)를 사용하여 지적인 신뢰감을 주어야 합니다.
[AUDIENCE]
주 타겟은 조직 생활에서 인간관계와 전략적 선택에 고민이 많은 20~50대 직장인입니다.
보조 타겟은 고전의 문구와 영문 표현을 동시에 학습하고자 하는 중고등학생 및 일반인입니다.
[RESPONSE]
기술 스택: 순수 HTML5, Tailwind CSS (CDN), Font-Awesome (CDN), Vanilla JavaScript를 사용하십시오.
코드 구조: 모든 HTML, CSS, JS가 포함된 단일 파일 형태여야 합니다.
필수 데이터: 최소 10개 이상의 손자병법 핵심 구절(병문졸속, 지피지기, 부전이굴인지병 등)을 데이터셋에 포함하십시오.
모바일 우선: 스마트폰에서 최적의 가독성을 가지도록 여백과 폰트 크기를 조정하십시오.
