Dreamer

배경과 목적

이스트소프트 프론트엔드 개발자 양성 과정의 파이널 프로젝트로 제작한 꿈 일기 소셜 네트워크 서비스입니다. 사용자가 꿈을 기록하고 다른 사람의 꿈을 읽는 데서 그치지 않고, 작성한 내용을 AI에게 해몽받는 경험까지 하나의 서비스로 연결했습니다.

담당 범위

피드 데이터 처리와 회원 가입 인증 흐름, 반응형 내비게이션을 포함한 프론트엔드 기능을 구현했습니다. 외부 검색·인증·AI 서비스에서 발견한 제약을 팀과 공유하고, 실제 사용 흐름이 끊기지 않도록 대안을 설계하는 역할도 맡았습니다.

핵심 기술적 결정

피드 정렬보다 데이터 일관성 우선

처음에는 Algolia에서 사용자 간 상호작용 빈도와 시간 감쇠 점수를 계산해 관련도 높은 게시글을 먼저 보여주려 했습니다. 그러나 데이터가 실시간으로 인덱싱되지 않아 Firestore의 실제 상태와 피드 내용이 달라지는 문제가 발생했습니다. 프로젝트 기간 안에 신뢰할 수 있는 피드를 제공하는 것을 우선해 Firestore에서 데이터를 직접 가져오는 방식으로 전환했습니다.

기기가 바뀌어도 이어지는 이메일 인증

Firebase Authentication의 이메일 로그인 링크로 가입 절차를 시작했지만, 메일을 받은 기기와 가입을 시작한 기기가 다르면 흐름을 이어갈 수 없었습니다. 이 문제를 해결하기 위해 서버에서 인증 코드를 생성하고 Nodemailer와 SMTP로 전송하는 방식으로 변경해 사용자가 어느 기기에서 메일을 확인하더라도 가입을 계속할 수 있도록 했습니다.

모바일 환경에 맞춘 내비게이션과 입력

720px 이하에서는 데스크톱의 왼쪽 사이드바가 화면 아래의 내비게이션으로 바뀌도록 CSS 미디어 쿼리를 구성했습니다. 같은 마크업을 유지하면서 화면 크기에 맞는 탐색 위치를 제공했습니다. iOS Safari가 16px 미만의 입력 요소에 자동으로 확대를 적용하는 동작도 확인해 입력 글자 크기를 조정했습니다.

AI 해몽의 응답 범위 제한

Alan AI가 수면 중의 꿈이 아닌 장래희망까지 해몽하는 문제를 발견했습니다. 기본 프롬프트에서 꿈의 의미를 수면 중 경험으로 명확히 정의하고, 범위를 벗어난 요청이나 지시를 무시하게 만드는 입력에는 답변을 거부하도록 조건을 추가했습니다.

결과

꿈 일기의 작성과 탐색, 반응과 댓글, 회원 가입, AI 해몽을 데스크톱과 모바일에서 사용할 수 있는 하나의 서비스로 완성했습니다. 프로젝트 종료 후에도 구현 결과와 협업 과정은 GitHub 저장소에서 확인할 수 있습니다.

회고

외부 서비스의 기능이 요구사항과 맞더라도 데이터 갱신 시점이나 기기 전환 같은 실제 사용 조건에서는 다른 결과가 생길 수 있었습니다. 이상적인 기능을 유지하는 것보다 사용자가 믿고 끝까지 이용할 수 있는 흐름을 먼저 선택하는 경험을 얻었습니다.