My Profile Project | 개인프로젝트 후기

프로젝트 깃허브 주소 👉 https://github.com/fun1ty/MyProfile2

프로젝트 배포 ⚡ https://in-my-profile.vercel.app/

Intro

리액트 수업이 끝난 후 일주일동안 개인프로젝트 시간이 주어졌다. 무엇을 만들까 고민하다가 그동안 프로젝트를 하면서 내 이력이나 포트폴리오를 보여주는 사이트를 만들어 본적이 없다는 것을 깨닫고 MyProfile 프로젝트를 진행하게 되었다.

MyProfile

나의 이력이나 연락처, 포트폴리오가 있는 '공간'으로 보여주고 싶었기 때문에 집의 형태로 구성하였다. 이번엔 프론트엔드적인 부분과 사용자 인터렉션에 집중하고 싶었기 때문에 일부러 DB나 기능을 여러가지 넣지 않았다. (사실 주제자체가.. 그런게 필요한가 싶기도하다. 물론 방명록 페이지 때문에 DB는 추가할 것이다.)
개발하면서 작고 소소하지만 새롭게 시도한 방식은 아래와 같다.

ide: 기존에 사용하던 vscode가 아닌 codesandbox를 이용하였다. 덕분에 spline 랜더링 시 웹페이지에서 바로바로 디버깅하기 편했다.
Spline : 처음 사용해본 3d 그래픽툴. 국내자료는 정말 없어서 해외자료를 많이 참고하였다. 생각보다 직관적인 인터페이스라 사용하기 그닥 어렵진 않았다.
bgm : 생각해보니 웹사이트를 만들때 효과음이나 음악을 넣어본적이 없는 것 같아서 이번 기회에 넣게 되었다. 아무 배경에나 클릭하면 음악이 재생되며, 음악은 직접 편집했다. 출처는 아래에 기입한다.
page 음악 출처링크
메인페이지 https://www.youtube.com/watch?v=AunAZS5yYmw
/inhouse https://www.youtube.com/watch?v=qn5-caUy2xc

page	음악 출처링크
메인페이지	https://www.youtube.com/watch?v=AunAZS5yYmw
/inhouse	https://www.youtube.com/watch?v=qn5-caUy2xc

구성된 페이지

로그인과 회원가입 기능이 없기도 하고 딱히 RESTFul하게 개발되지 않고 전부다 GET방식이기에 REST API라고 적는건 무리가 있는것 같아 타이들을 구성된 페이지로 적었다. 리액트 라우터를 이용하여 구현하였고 버튼태그와 useNavigate를 이용하여 일일히 이미지 위에 심었으나 Spline 특유의 마우스 이벤트에 따라 그래픽의 각도가 달라지는 점과 반응형으로 설정 시 버튼심어놓은 위치의 싱크가 계속 맞지 않아 결국 버튼을 다 지우고 그래픽 툴에서 직접 심었다.

GET/ inhouse - 모든 페이지로 갈수 있는 페이지
GET/ profile - 프로필 페이지
GET/ portfolio - 포트폴리오 페이지
GET/ visit - 방명록 페이지

개발기간

2023.10.11 ~ 2023.10.19(총 8일)

기술스택

Frontend : React.js, ES6, Npm
Backend : codesandbox
DevOps : vercel

주요기능

마우스 호버시, 물체가 움직이거나 변하며 해당 물체를 클릭하면 각각의 페이지로 넘어간다.

중간에 있는 솥을 클릭하면 프로필페이지로 이동한다.

물감을 클릭하면 포트폴리오로 이동한다.

움직이는 책을 클릭하면 방명록 페이지로 넘어간다. 방명록 작성과 수정은 모달창으로 구현했으며, useForm Hook과 리액트 리덕스 툴킷으로 개발하였다.

추가로 이미 등록된 유저명과 동일한 유저명으로는 추가할 수 없다.

마지막으로 연락처는 아래와 같이 애니메이션으로 구현하였다.

배포하기

배포는 Vercel을 이용하여 배포하였다. 이 블로그도 Vercel로 배포하였기도 하고 간단하고 쉽게 되기 때문에 선택하였다. DB가 붙으면 또 어떻게 될지 모르겠다. Vercel은 프론트엔드용 호스팅 서비스를 제공하는 사이트 이기 때문이다. 자체 db 스토리지를 제공하긴하는데.. 아직 자세히 들여다 보진 않았다.

발생한 문제

3d그래픽인데다가 이벤트까지 여러개 추가하다보니 랜더링이 너무 느리다. 이 부분을 최적화 시킬 방법이 필요해 자료를 찾고있는 중이다.

codesandbox

처음 codesandbox를 사용했는데 vscode보다 더 편했던 거 같다. 일단 의존성 주입이 간편하고 깃과의 연동도 손쉽게 되서 바로바로 커밋도 쉽게 했다. 이걸로 팀프로젝트도 하면서 코드도 같은 페이지에서 공동작업할 수 있다면 엄청 효율적일거 같다는 생각이 들었다. (오래전부터 이런 기능을 원했기 때문에..)

Review

추후 개발사항
방명록을 저장하기 위해 DB를 붙일것이다. 사실 방명록에 대한 부분을 어떻게 보여줄지 고민을 많이 했다. 모달창의 버튼은 디자인을 좀더 생각해봐야 될거같고 일단 줄이 그어진 공책처럼 보여주고 싶어서 그렇게 만들긴했는데 그닥 재밌어보이진 않는다. 방명록이 하나 생성되면 깃허브 잔디처럼 보여주게 만드는 것도 생각해보고 책장넘기듯이 하나하나 넘기는 것도 생각해봤는데.. 결국 돌고돌아 디자인 이슈이다. 좀 더 고민해봐야될거 같다.
추후 개선점
i: 3d 랜더링: 일단 3d 그래픽 랜더링을 최적화 시키려면 Three.js라이브러리에 대한 지식이 필요한것 같아 이 부분을 공부해서 개선할 예정이다. 이 부분은 자료와 지식이 너무 부족하지만 어떻게든 해내야겠다.
ii: 포트폴리오, 프로필페이지: 3d랜더링 최적화가 되면 내용을 채울 예정이다.
iii: 방명록: 비밀번호에 유효성 검사를 추가할 것이다.