하루안부, 이렇게 만들었습니다
Enter또는 스크롤로 시작
0줄의 대화.
저희에겐
네잎클로버가 있었거든요.
그게 바로, 저희의 AI 팀원이었죠.
그러나 우리는 AI를
수동적으로 이용하지 않았다.
한 명의 팀원으로서, 함께 부딪치며 만들었다.
김지욱
손예찬
고해은
네잎클로버
단순하게 다시.
시그니처 한 곡선으로 가자.
AI 디자이너
메시지 입력
이거다.
로고 / final
오늘도 수고하셨어요,
정희님 잘 있어요
저녁 일과도 잘 되고 있어요.
일일 리포트
5월 17일 (일)
“오전 산책 때 햇빛이 좋아서 한참 머무르셨어요.
기분이 정말 좋아 보이셨어요.”
기분이 정말 좋아 보이셨어요.”
김미영 간호사 · 10:24
투약
33%
1/3 복용 완료
다음 복용 18:00
맥박
72BPM
평균 근처 (±74)
g-guardian-live.html
>
우리가 자주 보낸 말들.
/simplify정희님유저플로컬러 팔레트/loop현장 인터뷰리포트환자앱이건 아냐경쟁사 분석처방전Liquid Glass괜찮네Stripe일일 리포트햅틱스테이터스바결제 탭분석해봐safe area/simplify정희님유저플로컬러 팔레트/loop현장 인터뷰리포트환자앱이건 아냐경쟁사 분석처방전Liquid Glass괜찮네Stripe일일 리포트햅틱스테이터스바결제 탭분석해봐safe area
Higgsfield스크린샷Tailwind심플하게프롬프트 다시레퍼런스Vercel스러운행간 자간이거야푸시해줘여유 공간글라스홈화면롤백역할별톤앤무드피드백Pretendard간호사Higgsfield스크린샷Tailwind심플하게프롬프트 다시레퍼런스Vercel스러운행간 자간이거야푸시해줘여유 공간글라스홈화면롤백역할별톤앤무드피드백Pretendard간호사
김순자케어보호자앱음, 별로시장 조사알림의료진웹통과Apple Health타임라인벤토 그리드iOS 프레임오늘 일정스킬 써노치납부 이력X로 가자스크롤 스냅차트맥락 다시김순자케어보호자앱음, 별로시장 조사알림의료진웹통과Apple Health타임라인벤토 그리드iOS 프레임오늘 일정스킬 써노치납부 이력X로 가자스크롤 스냅차트맥락 다시
Next.js산만함 제거온보딩다시GitHub공간 마련여백더 단순하게커밋사용자별다크모드탭바다국어분기퍼소나반영해줘노트북에서보호자린캔버스정리Next.js산만함 제거온보딩다시GitHub공간 마련여백더 단순하게커밋사용자별다크모드탭바다국어분기퍼소나반영해줘노트북에서보호자린캔버스정리
리포트환자앱이건 아냐경쟁사 분석처방전Liquid Glass괜찮네Stripe일일 리포트햅틱스테이터스바결제 탭분석해봐safe area더미데이터왜 안 돼?스크롤 트리거SVG그대로 코드로디자인리포트환자앱이건 아냐경쟁사 분석처방전Liquid Glass괜찮네Stripe일일 리포트햅틱스테이터스바결제 탭분석해봐safe area더미데이터왜 안 돼?스크롤 트리거SVG그대로 코드로디자인
Vercel스러운행간 자간이거야푸시해줘여유 공간글라스홈화면롤백역할별톤앤무드피드백Pretendard간호사JTBD추가해줘복잡도 컷환자와이어프레임업데이트Vercel스러운행간 자간이거야푸시해줘여유 공간글라스홈화면롤백역할별톤앤무드피드백Pretendard간호사JTBD추가해줘복잡도 컷환자와이어프레임업데이트
AI와 한 학기.
여기까지 왔습니다.
그런데 이게, 학생 셋의 착각은 아닐까요?
KHF 2026 · COEX · 8.19–21
계원예술대학교 학생 셋.
한 학기 동안 AI와 만든 것을 들고 갔다.
현장이 말하는 문제는,
우리가 본 문제와 같았다.
그들도 이미, AI를 활용해 만들고 있었다.
착각은 아니었다.
AI는 도구다.
사람이 해야 할 일은 남는다.
그럼 그 도구를,
어떻게 활용하면 될까요?
MAKING OF
하루안부.
TEAM
김지욱
손예찬
고해은
네잎클로버
CAST
보호자
김미영, 52
간호사
박지현, 34
환자
김순자, 78
AI ENSEMBLE
Claude (Opus 4)
기획 · 디자인 · 코드
Higgsfield · Cinema Studio
AI 영상
Midjourney v6
AI 이미지 · 페르소나
Remotion
프로그래매틱 영상
Figma
초기 와이어프레임
Pretendard Variable
타이포그래피
Iconify · Fluent
아이콘
Next.js 16 · GSAP · R3F
이 사이트
PROMPTS
── 우리가 실제로 작성한 명령 그대로 ──
제 1 막 · 기획
#01
안에 있는 파일 분석해서 우리가 이 프로젝트를 만들기 전에 경쟁사 및 시장 조사를 할꺼야
#02
plan.md, architecture.md 도 작성해
#03
워드 파일로 만들어줘
#04
바로 반영하지말고 어떻게 구체적으로 구현하면 좋을지 알려줘
#05
우리 타임라인은 이거 보고 반영해줘
#06
추가하면 좋을 것 같다는 거도 추가하고, 타임라인도 모든 파일에 적용하고 예전 파일은 삭제해줘
#07
기능들을 한장에 하나씩 설명하도록 추가
#08
정리해서 만들어줘
#09
벤치마킹부터 해보자
#10
간호사한테 인터뷰할 질문
#11
의료인으로 단어 대체해서 다시 만들어줘
#12
안에 있는 문서들 폴더별로 정리좀 해줄래
#13
기반이 될 책 한권을 정리한 파일이 있어
#14
파일 전체 다 읽어봐
#15
디자인을 참고할 레퍼런스 3개랑 의료 서비스 3가지 구해와
#16
컬러 팔레트 추천해줘, 사용자별 컬러를 다르게하자는 얘기도 나왔는데
#17
키비주얼은 어케하는게 좋을지
#18
디자인을 대충 어떤 느낌으로 가는게 좋을 것 같아
#19
책 내용 다시 분석해서 없는 것들 하나하나 문서로 만든다 실시
제 2 막 · 디자인
#20
순차적으로 다 만들어
#21
AI스러운 배치 싫다
#22
산만하다
#23
불필요한 요소 삭제
#24
이모지 절대 쓰지마
#25
실제 앱처럼 보여줘
#26
카메라 구멍 여백 추가
#27
스테이터스바 삭제
#28
간호사 메인화면 이런식으로
#29
이거 두줄로
#30
기획에서 반영되지 않은 것 찾아봐
#31
하단바 밑에 아이폰 홈으로 가는 버튼 생각해서 여유 공간 마련해봐
#32
유리같이
#33
사용자 친화적이게
#34
통일감 있게
#35
행간 자간 점검
#36
얘처럼 아예 채팅창만 남기고 밑으로 내리면 탭바 생기면서 밑에 AI 요약하는거 보여달라고
제 3 막 · 정밀화
#37
글래스 요소들이 뷰포트 상관없이 잘 보이는 방법 없어?
#38
스크롤 내린버전으로 각각 다시 뽑아라, 온보딩 화면도
#39
온보딩 플로우 띄워봐
#40
파일 정리해라
#41
v8로 옮겨라
#42
v8-1로 보호자 홈 만들어봐
#43
결제창 카드 글라스 느낌 안 나는데?
#44
홈화면 오늘의 케어도 동일하게
#45
피그마 링크 던져줄건데 iOS 디자인 가이드다, 샅샅이 분석해라
#46
v8-1 네비게이션 아이콘 v8처럼 하고 텍스트 삭제해
#47
투약 위젯 파란색으로 통일
#48
식사 표도 파란색으로 하고 명도 차이
#49
채팅에 같은 간호사가 왜 두 개야
#50
납부하기 버튼 컬러도 우리 파란색으로 가자
#51
콘텐츠간 여유 공간 좀 더 만들어보자
제 4 막 · 메이킹 오브 (이 사이트)
#M-01
넌 이제부터 우리의 프로젝트 "하루안부"를 담당할 기획자이자 디자이너이자 영상 제작자야.
#M-02
누구를 위해 만들지부터 정해.
#M-03
그들이 진짜 원하는 게 뭔지 찾아내.
#M-04
시장에서 우리만 할 수 있는 게 뭔지도.
#M-05
우리 기획서 가지고 로고 만들어봐.
#M-06
이건 로고가 아니라 다이어그램이잖아. 다시.
#M-07
캐릭터 같아. 의료 신뢰감이 없어. 다시.
#M-08
색이 너무 많아 무거워. 단순하게 다시.
#M-09
기능 그대로네. 시그니처 한 곡선으로 가자.
#M-10
디자인 시작.
#M-11
다시.
#M-12
다시.
#M-13
다시.
#M-14
열세 번 다시 그렸다.
#M-15
이거야!
#M-16
근데 자주 틀렸다.
#M-17
영상까지 가자.
#M-18
다시.
#M-19
다시.
#M-20
4차에서 멈췄다.
ARTIFACTS
13 design iterations
v1 → v13
5 logo iterations
v1 → v5
4 Higgsfield videos
iter1 → iter4
168 cells
14 × 12 경쟁사
4 blue oceans
AI 가이드 / 본인 앱 / 챗봇 / UI
3,059줄의 대화
57 entries · 55 days
1 making-of site
이 화면
FOR
엄마와, 엄마의 엄마와,
그리고 우리 모두를 위한 하루.
THANK YOU.
MAKING
Claude
메인 파트너 · 기획·디자인·코드·시나리오
Higgsfield
영상 디렉팅 · 1차→4차 진화
Figma
디자인 본진 · 시스템·목업·핸드오프
VS Code
코드 에디터 · v8 보호자앱 구현 환경
GPT
이미지 생성 · 프롬프트·레퍼런스 비주얼
Codex
코딩 검토 · 코드 리뷰·패치 제안
─ FIN ─