The-Dreamer

간 밤에 꾼 꿈 해몽에 대해 검색할 수 있고, 꿈을 그림으로 기록할 수 있는 사이트

the-dreamer 위키

아이디어 기획

기획 과정

코드스테이츠의 프론트엔드 특별 심화반을 수강하기 위해서는 해당 기간 내 진행할 개인 프로젝트의 SR이 완성되어 있어야 했다.

아이디어 기획 시 고려한 점

• 백엔드에 많은 시간을 투자하지 않고 프론트엔드에 집중하여 구현할 수 있는 서비스
• 기존의 서비스되는 프로덕트가 있다면 그와의 차이점
• 유저에게 UI, UX 적인 재미를 줄 수 있을 컨셉

프론트엔드 개발자로써의 능력을 향상시키기 위한 코스이기 때문에 백엔드 쪽에 많은 시간을 투자하지 않는 것을 권장하였다.
(결과적으로는 생각보다 많은 시간을 투자하게되었지만)
또, 기존에 진행한 두번의 팀프로젝트에서 기능 구현에만 급급해 UI, UX를 매력적으로 구현하는데에 신경을 쓰지 못한 점이 아쉬워서 이번에는 UI,UX 적으로도 유저에게 어필할 수 있는 사이트를 구현하고 싶었다.

몇 가지의 아이디어를 추려 주변 지인들에게 의견을 물어본 결과 그 중 꿈 해몽 사이트가 유용할 것 같다는 의견이 많이 나왔다.

기획 의도

개인적으로 꿈을 꾸면 다음날 그 꿈이 어떤 의미를 갖고 있는지 찾아보는 편인데, 이미 서비스되고 있는 사이트들의 경우 다양한 카테고리가 있고 그 중 하나가 꿈 해몽 서비스이거나 꿈 해몽은 메인이 아닌 부가적인 서비스중 하나이어서 접근성, 가독성에서 직관적이지 않았다.

꿈 해몽을 중심적으로 서비스하는 사이트가 있으면 유용할 것 같다고 생각했다.

또, 꿨던 꿈들은 금방 잊혀지기 마련인데, 이를 기록으로 남겨두면 의미있을 것 같다고 생각해서 꿈을 그림으로 기록할 수 있는 서비스를 두번째 핵심 기능으로 결정하였다.

사용스택

...더보기

프론트엔드 쪽에는 컴포넌트 별 개발에 용이한 js 라이브러리인 리액트, css-in-js 스타일드 컴포넌트, 전역 상태 관리를 위한 redux 등, 백엔드 쪽에는 node.js(/express), mysql(/sequelize), 배포에는 aws를 사용하였다.

주요 구현 기능

꿈을 소재로 한 서비스라는 컨셉에 어울리게 사이트의 전체적인 UI, UX는 감성적이고 정적인 느낌으로 구현하려 했다.
밤 하늘을 연상시키는 배경색에 ts.particle 라이브러리를 활용하여 별빛의 느낌을 구현했고, green sock 라이브러리로 랜딩 페이지의 스크롤 애니메이션을 구현하였다.
또, naver 검색 API를 활용하여 검색 기능을, canvas API를 활용하여 그림판을 구현하였다.
다크/ 라이트 모드 토글을 만들어 UI, UX에 대한 유저 경험을 다양화했다.

스크롤 애니메이션 구현

랜딩페이지에서 스크롤 시 컨텐츠가 천천히 나왔다가 사라지는 효과를 위해
useRef로 스크롤 애니메이션을 적용시킬 엘리먼트들을 선택하고,
green sock 라이브러리에서 제공하는 ScrollTrigger 인스턴스를 이용해 애니메이션의 시작, 끝 지점 등 필요한 속성들을 설정해 주었다.

꿈 해몽 검색 기능

naver 검색 API 중 블로그 검색 기능을 활용했다.
클라이언트 사이드에서 바로 네이버로 호출할 수 없고 서버 사이드에서 호출해야 하기 때문에, 서버에 get 요청을 하고 파라미터에 검색 키워드를 첨부하면
서버는 받은 파라미터 값에 필요한 설정값을 더해 네이버에 get 요청을 하여 그 결과값을 클라이언트에 반환해준다. 이 때 파라미터에는 keyword + '꿈 해몽'으로 '꿈 해몽' 단어를 붙임으로써 유저가 어떠한 키워드를 검색하던지 꿈 해몽에 대한 결과가 검색되도록 했다.
(서버로 get 요청시 리액트에서는 리덕스의 thunk를 활용 비동기 작업을 처리했다.)

꿈 기록 기능(그림판)

useRef로 canvas 엘리먼트에 접근하고 getContext() 메서드를 호출하여 드로잉하는데 필요한 메서드들과 프로퍼티들을 이용했다.
마우스/ 터치 이벤트에 따른 함수들을 만들어 드로잉 시작-중간-끝을 연결하였고, 또 그림판에 색 채우는 함수도 구현하였다.
팔레트, 브러쉬, 페인트, 지우개, 새 페이지, 브러쉬 굵기 조절, 저장 등의 기능을 아이콘화 하여 화면에 배치하였다.

로그인한 유저의 경우 저장하면 마이페이지에서 기록한 꿈들을 조회할 수 있다.
클라이언트에서 post 요청을 하면 서버가 aws의 sdk를 이용해 s3 버킷에 이미지를 업로드하고, 데이터베이스에 해당 이미지의 url주소를 저장한다.
(이 후 클라이언트에서 get 요청을 하면 서버는 데이터베이스를 조회해서 해당하는 url을 반환해준다.)

다크/라이트 모드

custom hooks를 만들어 토글 클릭시 전달되는 이벤트 핸들러에 의해 다크/ 라이트 모드 테마(theme) 상태값을 변경하도록 구현했다.

(스타일 컨벤션, 자주 쓰는 스타일 값의 모듈화, 테마 변경의 용이를 위해 Styled Component에서 제공하는 Themeprovider(Context API 기반)를 이용했다. theme.ts 파일에 자주 쓰는 스타일 속성이나 다크/ 라이트 모드에 따라 변경될 스타일 속성을 설정해주고 App.tsx에서 Themeprovider가 props로 전달함으로써 하위 컴포넌트들에 적용할 수 있다.)

반응형

태블릿

모바일

디바이스의 디스플레이 종류에 따라 그에 맞는 UI가 배치되도록 코딩했다.
앞서 언급한 theme 파일에 반응형을 위한 media query값도 모바일,타블렛,데스크탑까지 5단계로 설정해 놓아, 보다 간편하고 가독성 있는 css 코드를 쓸 수 있었다.

에러 핸들링 및 알게된 점

Front-end

react, styled component, etc

typescript

canvas API

Back-end & Deploy

node.js/express, mySQL/sequalize, aws

잘한 점과 아쉬운 점

잘한 점

• 코드 품질, 오류 개선 및 포맷팅

  • 리액트에 타입스크립트를 적용함으로써 컴파일 단계에서 변수나 함수 등의 타입 오류를 미리 확인하고 수정할 수 있었다.
  • ESLint & Prettier 활용으로 코딩 컨벤션을 지키고 코드 포맷팅을 하여 가독성을 높였다.

• 재사용가능한 컴포넌트

  • 반복적으로 사용하는 모달, 해쉬태그, 검색바 등의 컴포넌트들을 모듈화하여 코드의 반복을 줄이고 수정을 용이하게 했다.

• aws 클라우드 프론트로 CDN 도입

  • 전 세계의 사용자가 빠르고 안정적으로 웹사이트에 접속이 가능하도록, 캐싱된 콘텐츠를 해당 사용자의 가까운 곳에서 전송했다.
  • https로 클라이언트의 정적 웹 호스팅을 하여 보안을 강화했다.

• 기획부터 배포까지 경험

  • 혼자 처음부터 끝까지 개발해봄으로써 두번의 팀프로젝트에서 느낀 서버, 배포쪽 지식의 부족함을 보완하고 개발 프로세스 이해 확장(서버-클라이언트 https 배포)

• 에러 핸들링 및 새로운 시도

  • 막히는 부분이 있어도 포기하지 않고 끝까지 이것저것 시도해보고 탐구했다.
  • TypeScript, GreenSock, Canvas API 등 처음 공부하는 스택들에 대한 시도를 아끼지 않았다.

아쉬운 점

• 모바일에서의 햄버거 바 위치
  • 모바일 디스플레이 종류에 따라 헤더부분의 햄버거 바 위치가 애매하게 오른쪽이 아닌 가운데에 위치할 때가 있다.
• 그림판의 뒤로가기 기능 부재
  • 꿈 그리기 페이지의 그림판 기능에서 뒤로가기 기능이 있으면 실수했을 때 작업 내역을 뒤로 돌릴 수 있어 유저 입장에서 편할 것 같다.
• 인피니트 스크롤 미구현
• 웹 퍼포먼스 최적화
  • 아쉬운 점이라기 보다는 앞으로 시도해볼 부분이다. 시간이 되는 대로 코드를 정리, 수정하며 가능한 웹 퍼포먼스 최적화를 시도해 보고 싶다.

느낀 점

아이디어 기획에서 ui 디자인, 클라이언트, 서버, 배포까지 처음으로 혼자 개발해본 서비스이다.
프특심의 추천대로 파이어베이스 등을 이용해 조금 더 서버리스하게 구현할까도 생각했지만, 기획한 아이디어를 발전시킬때 클라이언트로만 서비스를 구현하기에는 다소 무리가 있었다. 또, 프론트엔드 개발자여도 어느정도의 node.js(express), aws쪽의 프로세스를 알아야 실무시 협업에 수월할 것으로 판단했다.

새로운 스택, 라이브러리를 도입하면서 적용하는데에도 헤맸고 개발 과정에서 많은 오류들을 마주쳤지만
그것들을 해결해 나가고 새로운 환경에 익숙해지는 과정이 재미있었다.

작년, 코스에서 변수의 개념에 대해 배우기 시작한 적이 엊그제 같은데, 물론 대단한 기능을 개발한 것도 아니고, 개선사항도 많이 있지만 나만의 서비스를 구현해서 배포를 할수 있을 정도로 성장했다는 사실이 뿌듯하다.

또, 알면 알수록 점점 더 프론트엔드 개발자의 관점으로 사고방식이 확장되고 있다.
개발 측면에서 seo, 웹 퍼포먼스 최적화, 브라우져별 지원하는 스타일 속성, 유저에게 편리하고 매력적인 ui와 ux 등

협업 측면에서는 가독성 있는 코드 작성, 깃헙 work flow 등..

앞으로도 생각하고 공부하고 계속 발전하는 프론트엔드 개발자가 되고 싶다!