바이브코딩으로 구현된 사이트에 대해 다루고 있습니다.
DOA
파스텔톤 UI에 귀여운 메이드 컨셉을 가진 개인용 챗봇 사이트 / 어플이에요.
ADHD+경증우울증 유저가 자신의 상황에 맞게 사용하기 위해 만들었어요. 일정관리를 해도 되고, 감정쓰레기통으로 삼아도 되고, 둘다 해도 상관없어요.
(다만, 인공지능 챗봇에게 감정을 공유하기 전에는 담당 의사선생님과의 상담을 먼저 거쳐주세요)
OpenAI API로 대화하면서 데드라인·루틴·일정·버킷리스트를 자동으로 기억했다가, 그 일을 상기시켜야 할 때가 되면 먼저 말을 걸어줘요.
- 프로필 사진은 일단 neka로 만들어져 있어요.
- 어느 정도는 책 <성인 ADHD의 대처기술 안내서> 에 나온 대처법을 기반으로 제작되었어요.
주요 기능
- OpenAI 기반 대화 — 답장 길이·속도를 사람처럼 조절(짧은 답은 빠르게, 고민 상담은 천천히 + 타이핑 인디케이터)
- 데드라인 / 버킷리스트 / 반복 루틴 / 일정을 대화 중 자동으로 기억·추가·수정·완료·삭제 : 물론 반만 자동이긴 합니다만...
- 알림톡 — 루틴/일정 시간, 마감일 전날, 24시간 무응답 시 자동으로 먼저 말 걸기 (Web Push 알림 포함, 확인 체크박스로 나만 체크 가능)
- 캘린더 / 위클리 페이지 - 루틴/일정/데드라인을 색상별로 한눈에 보여줘요
- 할 일 목록 페이지 - 포괄 실행 목록처럼 관리할 수 있어요
- 다중 유저 지원 — 유저별 데이터 완전 격리, 소유자가 신규 가입 잠금/해제 가능
- 개인 OpenAI API 키(BYOK) — 개인 키를 브라우저에 저장해두고 사용할 수 있어요. 서버엔 저장 안 되니 걱정하지 마세요. 푸쉬알림 같은 건 운영자의 키를 사용합니다.
- PWA - 홈 화면에 추가 하면, 모바일에서 앱처럼 동작할 수 있게 만들어져 있어요
기능
사이드바
모바일 버전의 사이드바이지만, PC버전도 같아요.
- 다른 페이지(캘린더, 위클리, 리스트 페이지)로 넘어갈 수 있어요.
- 푸쉬알림을 켤 수 있어요.
- 운영자의 경우 가입을 허용할지 여부를 선택할 수 있어요.
아래쪽에는 일정을 관리하기 위한 아주 기본적인 정보들이 표시돼요.
- DOA가 기억하는 나는 채팅이 진행되면 진행될수록 구체적인 인상이 되어요.
- 루틴은 매일 반복해야 하는 일이므로 맨 앞에 있어요.
- 데드라인은 언제 이 일을 시작해야 할지는 정해지지 않았지만, 마감 날짜가 딱! 정해진 일이에요.
- 일정은 일을 시작해야 하는 시각, 약속 시각, 집안을 돌보는 시각 등 유저가 직접 움직여서 무언가를 하기 시작해야 하는 일정이에요.
- 버킷리스트는 언제 해야 할 지도 모르고, 마감일도 없지만 언젠가는 하고 싶거나 해야 하는 일이에요.
- 마지막으로 API 키 항목에서 자신의 API키를 로컬 브라우저에 기억하게 할 수 있어요. 여러 디바이스를 사용하고 계신다면 모든 디바이스에 따로따로 입력해 주어야 해요.
채팅
챗봇과 실제로 대화를 하는 화면입니다.
- 일반적인 채팅 어플과 유사하지만, 파일 첨부 등의 기능은 없습니다.
- 챗봇에게 말을 걸면, 난이도에 따라 설정된 랜덤한 지연 시간 동안 마치 챗봇이 직접 타이핑을 하는 것처럼 타이핑 인디케이터가 뜨다가 답장이 올라옵니다.
- 여타의 모델과 다르게, 메시지를 보낸 시각이 기록되고 채팅에 반영됩니다.
- DOA의 알림톡에 확인 버튼 을 누르는 동작을 통해 해당 할일을 더욱 강하게 상기시킬 수 있습니다. (완료 버튼이 아닙니다!)
캘린더
챗봇과의 대화를 통해 누적된 일정 중, 날짜나 시각이 명확히 지정된 일정을 표시해요.
- 루틴, 일정, 데드라인이 색상을 구분하여 표시돼요.
- 날짜를 클릭하면 해당 날짜에 잡혀 있는 모든 루틴, 일정, 데드라인이 시간 순서대로 표시돼요.
- 여기에선 완료/삭제 처리를 할 수는 없어요.
위클리
챗봇과의 대화를 통해 누적된 일정 중, 날짜나 시각이 명확히 지정된 일정을 표시해요.
- 일정의 시작 시간만 명시했지 끝나는 시간을 지정하진 않았기 때문에, 일정은 블록이 아니라 선으로 표시 돼요.
- 루틴, 일정, 데드라인이 색상을 구분하여 표시돼요.
- 루틴, 일정은 선 아래에 글자가 들어가고, 데드라인은 선 위에 글자가 들어가서 둘을 구분할 수 있어요.
- 여기에선 완료/삭제 처리를 할 수는 없어요.
리스트
포괄 실행 목록과 같이, 유저가 해야 할 일들이 포스트잇 형태로 표시돼요.
- 당장 해야 하는 일들의 리스트보다는, 기억해야 하는 일들의 리스트예요. 그래서, 루틴과 일정은 포함되어 있지 않고, 데드라인과 버킷리스트(느슨한 계획) 만이 포함되어 있도록 지정했어요.
- 체크 표시를 눌러 완료할 수도, X 표시를 눌러 항목을 지워버릴 수도 있어요.
푸쉬 알림
모바일 디바이스 등에서 알림을 설정해 둔 경우, DOA가 알림톡을 보낼 때 위 사진과 같이 푸쉬 알림이 와요.
주소는요?
- 양방향 채팅을 할 때는 유저들이 OpenAI의 API 키를 사용하도록 되어 있지만, 알림톡의 경우에는 서버에서 설정된 공용 키를 사용해야 해요. 이것은 본 서버의 API키 사용량에 크지는 않지만 나름대로의 영향을 끼칠 수 있으며, 가입된 유저 수에 따라 정말로 생계가 위험해질 수도 있기 때문에, 현재 주소를 공개하지 않고 있어요.
- 뭔가 수익 모델을 붙이기보다는, 코드가 공개되어있는만큼 알아서 본인 서버에 올리고 사용해주세요 라는 정책을 유지하고 싶어요.