결과물 URL

https://jiwondev.netlify.app/

https://github.com/gonnabea/JRoom

자기소개

안녕하세요, Jiwon 입니다.

제 소개는 최대한 간략히 개발 경험 & 생각 위주로만 소개하겠습니다 ㅎㅎ

우선 전 그냥 질병 때문에 쉬고 있는 사람입니다

개발은 2020년 초 시점에 노마드코더 해커톤과 유튭클론 챌린지를 졸업했으니

개발 입문한 지는 이제 1년 반 좀 안된 것 같네요

노마드 코더 해커톤 행사가 끝난 시점에 저는 그냥 node.js 로 혼자서 간단한 게시판 만들 수 있는 정도의 흔한 실력이었습니다

그래도 해커톤 프로젝트로 포폴을 나름 인상 깊게 만들어서 그런지

코드 퀄리티는 정말 다시는 손대지 못할 정도로 최악 중 최악이었지만 ㅋㅋ

고졸 개발자, 짧은 준비기간 치고는 나쁘지 않은 조건으로

어렵지 않게 프론트 개발자로 바로 취업은 했었습니다

근데 역시 질병이 있는 몸이라 버티지 못하겠더라구요..

그래서 한달도 안돼서 바로 퇴사하고

그 다음부터는 근 1년간 몸 치료하면서 메일매일 최소 하루 3-4시간 정도는 개발하고 있습니다

한가지 분야를 파기 보다는 (예를 들어, 웹 프론트 공부만 집중적으로 한다던지), 웹 프론트, 백엔드 외에도 최대한 많은 분야를 걸쳐 배우려고 노력했습니다.

왜냐하면

1. 만들어보고 싶은 것들이 꼭 웹에만 국한 되어 있지 않았고

2. 분야를 융합 해서 만들었을 때 개발의 가능성이 극대화 된다는 점

3. 연결성이 좋은 기술을 위주로 배우기 위해 ( 쉽게 말해서 하나를 배우더라도 더 실력을 키우기 좋은 기술들 위주로 )

4. 현업에서는 오히려 혼자서 다양하게, 분야 넓게 사용해 볼 기회가 적을 수 있으므로

5. 현재 핫한 트렌드 ( 메타버스 등 )가 기술 융합과 관련한 것들이 우후죽순 쏳아져 나오고 있는 점

6. 주위 억대 연봉 개발자 분들은 하나 같이 "분야 상관 없이" 풀스택으로 공부하라고 조언해준 점

7. (잘하는) 풀스택 개발자의 수요가 엄청 높은 점

8. 개인적으로 공부 기간을 길게 가질 수 있는 점

등의 이유 때문입니다.

물론 한 가지 분야를 파는 것보다 멀고 험하고 지치고 나만 다르고 힘들고 하지만

오래달리기좀 하면 되죠.

토끼와 거북이에서 거북이랄까요?

아무튼 간단히 말해 시작은 좀 더뎌도 장기적으로 유리하다 판단했습니다.

만약 풀스택으로 준비하시고 싶으시면 최소 1년 ~ 3년 까지도 공부 기간을 생각하시는 걸 추천드립니다.

여기서 말하는 풀스택은 웹에만 국한된 건 아니에요 ㅎㅎ

ps. 저도 짧게 준비하실 거면 일단 한 분야만 파시는 게 유리하다고 생각해요

지금의 저처럼 아직 어설픈 풀스택은 취업을 못할 정도는 아니지만

같은 기간 동안 한 분야만 파신 분에 비해서 당장은 좀 불리한 편이라고 생각해요 ㅋㅋ

서비스 소개

그냥 제 소개 사이트입니다.

제가 만든 일부 작품들을 Three.js를 이용해 만든 3D 그래픽 안에 모아놓았습니다

그 외 개발 관련 기록들을 모아놓으려고 몇가지 페이지를 라우팅했습니다

개발 과정 (어려웠던 점과 해결방법)

우선 언제나 그렇듯 예술 감각 별로 없는 전 디자인은 포기 했구요. ㅋㅋ

사실 원래 이 프로젝트는 그냥 Three.js 배우려고 막 건드려보던 아수라장이었습니다

이걸 진짜 포폴로 쓰기엔 좀 뭐한 컨셉이라고 생각합니다 ㅎㅎ

webgl 자체가 좀 무거워서 구인하시는 분이 보시기엔 좀 번거롭게 할 것 같아요

그래도 연습 삼아서 포폴 컨셉으로 만들면 재밌겠다 해서 방향을 좀 틀었습니다.

그런데 마침 이벤트를 한다고 해서 조금씩 다듬어서 제출하게 됐습니다 ㅎㅎ

(프로젝트 설계 부터가 좀... 흠흠)

암튼

React로 웹 프론트 구현한 부분과 css animation 등은 자주 하던 거라서 크게 어려운 것은 없었습니다.

문제는 3D 그래픽 😵

3D 그래픽 부분은 완전 문외한이어서 전부 구글링으로 배웠습니다

그래서 다 어려웠지만

Three.js 에서 가장 번거롭고 어려웠던 점을 꼽으라면,

성능 최적화 부분이었습니다.

머 3d 오브젝트 좀 여러개 로드하다 보면 로딩하는 데 한 세월 돼버리고,

어떤 오브젝트는 용량이 더럽게 커서 메모리와 로딩 속도 먹는 하마더군요 ㅋㅋ

그것 뿐만 아니라 무슨 이유인지 직접 mesh를 많이 생성하면

Frame Per Second (FPS)가 확확 떨어져서 킹받드라구요

그래서 열심히 구글링을 했습니다

역시 구글신은 알고 있더군요 ㅋㅋ

https://www.youtube.com/watch?v=hC9RxhVmrGM

https://discourse.threejs.org/t/how-can-i-increase-fps-after-loading-this-glb-model/9237

https://discourse.threejs.org/t/how-to-optimize-objects-in-three-js-methods-of-optimization/2242

https://stackoverflow.com/questions/30245990/how-to-merge-two-geometries-or-meshes-using-three-js-r71

위와 같은 자료들을 찾아보며 원인을 알게 되었고 해결 방법을 찾아서 직접 적용했습니다.

가장 핵심적인 해결책은 Geometry를 Merge 하고, 불필요하게 큰 텍스처의 크기를 줄이는 것, 해상도를 줄이기 등이었습니다.

일단 시간 관계상 많이 처리를 하지 못했지만

PC에서 어느 정도 봐줄만한 프레임을 만들어 놓는 수준까지만 했습니다

지금은 모바일에서 보기엔 너무 발적화니깐 아직 들어가지 마세요 ㅋㅋ

그 외에도 blender라는 3D 모델링 툴을 깔짝대며 3D Object에 애니메이션 넣어주는 것이나,

WebGLRenderer와 CSS3DRenderer를 합치는 것 등이 어려웠고.. 흠 그냥 다어려웠음!

그리고 시간 관계상 물리엔진은 아직 구현해보지 못한 것이 아쉬웠습니다.

암튼 ugly하지만 역시 돌아가는 플젝을 만들어보고 나니 눈이 뜨이는 느낌이었습니다.

웹으로 치면 게시판 정도의 수준은 된 느낌이랄까요 ㅋㅋ

개인적으로 무언가를 직접 먼저 만들어 본 경험이 있어야

그와 관련된 이론을 공부할 자격이 생긴다고 생각합니다.

물론 자동으로 뭘 공부해야할 지 알게되는 부분도 있구요

그런 의미에서 성공적인 플젝이었습니다 ㅎㅎ

앞으로 계획

아마 여름쯤에 다시 현업으로 돌아갈 수 있을 것 같으니

그 전까지 거대하고 탄탄한 플젝을 하나 만들겁니다 ㅎㅎ

웹 브라우저와 안드로이드 위에서 돌아가는 온라인 3D 레이싱 게임을 만들건데,

노마드코더 우버이츠 클론에서 배운 기술 스택들과

개인적으로 배운 기술, 그리고 알고 있지만 거의 써보지 않은 기술들을 전부 총합해서 만들 예정입니다

제작기간은 3개월로 잡고 있습니다 ㅎㅎ

그리고 CS 이론도 계속 정리해야죠 😪

제가 공부할 게 너무 많다고 입에 달고 살지만

그래도 생각해보면 그게 공부 잘하고 있는 것 같습니다

암튼 화이팅! ㅋㅋ