난임 산모의 마음을 보듬는 'Serenova' 제작기

소개

산부인과에 갔다가 40대가 넘은 여성들이 난임치료로 많이 힘들어하는 것을 보았습니다. 난임 치료 과정은 단순히 병원을 다니는 것을 넘어, 끝을 알 수 없는 기다림과 호르몬 변화로 인한 급격한 감정 기복을 견뎌내야 하는 힘든 시간입니다.

  • 시도한 것: 병원 스케줄 및 투약 관리라는 실용적 기능에 '심리적 안정'을 위한 음악 테라피를 결합한 전용 대시보드 제작

  • 이유: 기존 앱들은 너무 기계적이거나 딱딱했습니다. 산모들에게 "오늘 주사 잊지 마세요"라는 알림뿐만 아니라, "오늘 고생 많았어요, 이 음악 어때요?"라고 말을 건네는 따뜻한 공간을 만들고 싶었습니다.

-> 시간이 없어서 만드는 과정 중에 사례글 먼저 올립니다.

진행 방법

  • Claude 3.5 Sonnet: 전체적인 기획, 로직 설계, 코드 작성을 담당하는 메인 파트너로 활용했습니다.

  • Vibe Coding: 구체적인 코드 명세보다 "포근한 담요 같은 느낌", "새벽 공기 같은 차분함" 등 감성적인 키워드를 전달하여 디자인 톤앤매너를 맞추는 방식으로 작업했습니다

한국 쇼핑 웹사이트의 스크린샷
한국 웹사이트의 홈페이지
한국어 MP3 플레이어 - 스크린샷 미리보기 이미지

-> 아직 다 연결은 안했지만, 구체적으로 필요한 것들을 넣고 빼며 만드는 중입니다.

활용 프롬프트 (핵심 전문)

프롬프트 1: 페르소나 및 디자인 바이브 설정
"난임 산모를 위한 '마음 케어 대시보드'를 만들 거야. 너는 최고의 UX 디자이너야. 전체적인 분위기는 산모들이 마음을 놓을 수 있게 따뜻하고 부드러운 파스텔 톤(Warm Sand, Sage Green)으로 디자인해줘. 첫 화면에 [오늘의 기분 선택]과 [음악 플레이어]가 가장 먼저 보이게 해줘."

프롬프트 2: 기분별 음악 매핑 로직
"사용자가 [평온, 불안, 슬픔, 희망] 중 기분을 선택하면 그에 맞는 YouTube 플레이리스트 ID를 매핑해서 들려주는 기능을 만들 거야. 음악이 나올 때 사용자를 다독여주는 따뜻한 '오늘의 확언' 문구도 랜덤으로 나타나게 해줘."

한국 컴퓨터 화면의 스크린샷

배운 점

  • 바이브 코딩의 힘: VS Code에서 직접 코딩하는 것보다 클로드와 대화하며 '어떤 느낌'을 원하는지 상세히 설명했을 때, 기대 이상의 감성적인 UI(모서리 곡률, 그라데이션 등)가 나왔습니다.

  • 심리적 배려의 중요성: 기술적인 기능보다 중요한 건 '언어'였습니다. "실패"나 "재시도" 대신 "휴식"과 "준비"라는 단어를 사용하도록 클로드에게 가이드를 준 것이 결과물의 완성도를 높였습니다.

과정 중에 어떤 시행착오를 겪었나요?

  • 처음에 너무 많은 기능을 한꺼번에 넣으려다 보니 대시보드가 복잡해졌습니다. "산모는 지금 심리적으로 지쳐있다"는 전제를 세우고, 정보를 최소화하여 단순하게 재구성하는 과정을 거쳤습니다.

앞으로의 계획

  • 실제 난임 커뮤니티에 공유하여 피드백을 받고, 정부 지원금 계산기나 주사 부위 기록 알람 등 실질적으로 도움이 되는 기능을 고도화할 예정입니다. 아직 연결해야할 것이 많아서 더 디벨롭 시켜보려고 합니다.

  • https://serenova-dashboard.vercel.app/

2
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요