새로운 개인 프로젝트를 시작하려 합니다.

프로젝트 시작 이유

기술적 이유

이번 프로젝트는 그동안의 Javascript를 이용하며 겪었던 불편함을 해소하기 위해 공부겸 서비스를 만들어 보려고 시작했습니다. 그렇다면 저의 개발 커리어중 Javascript를 사용하면서 겪었던 불편함이 어떤 것이 있을까요?

1. Vue.js

제가 다니는 회사는 Vue.js로 프론트엔드를 만들었습니다. Vue.js의 특징은 뭐가 있을까요?

템플릿 형식으로 간편하게 HTML과 CSS, Javascript를 한 파일에 구성할 수 있다.
따라서 간편하게 사용가능하고 배우기 쉽다.

제가 생각한 Vue.js의 특징이자, 다른 프레임워크와 구분할 수 있는 장점입니다. Vue.js에 대한 특징들은 다른 블로그(예: React 인가 Vue 인가?)에서 많이 찾아 볼 수 있습니다. 이외에도 여러 특징들이 있습니다만, 하나를 꼽자면 주어진 template에 맞춰서 기능을 만들면 쉽게 사용이 가능했습니다.

그러나 저는 객체지향적인 프로그래밍이 더 재밌습니다. 그저 (동작)하는 프로그래밍이 아닌, 유지보수가 용이하고 논리적인 흐름으로 잘 짜여진 코드를 사용하고 싶었습니다. 이를 위해선, Javascript 본연의 힘으로 Render함수를 만들어 객체지향적으로 코드를 짜거나, React를 사용하는 것이 답이라 생각했습니다. 그래서 혼자 하는 프로젝트들은 React로 하려고 노력 중이기도 하고요..

2. Test 코드의 부재

테스트코드가 없으면 테스트를 일일이 해야합니다. 기초적인 구성단계일 때는 console.log와 같은 도구들을 이용하여 몇번만 시도하면 쉽게 테스트할 수 있지만, 코드의 구성이 복잡해지면 일일이 테스트하기 어렵습니다. 예외케이스를 찾아내지 못해 hotfix로 fix하는 경우가 비일비재했고요 ㅜ
테스트 커버리지는 꼭 필요하다고 생각했습니다.

3. TypeScript!

위와 같은 이유이기도 합니다. Javascript에서 타입을 설정할 수 있으면, 많은 오류를 줄일 수 있습니다. 이는 Javascript를 쓰는 많은 사람들이 공감할 것입니다. API를 fetch할 때 null값을 받는지, Object를 받는지, Array를 받는지,, 너무 헷갈립니다. 이를 명시해줄 수만 있다면 수많은 오류를 줄일 수 있습니다. 또한 Javascript처럼 런타임 방식이 아닌 컴파일방식이라 컴파일되면서 오류를 잡아낼 수 있어 에러핸들링이 더 용이합니다.

4. CSR

이는 프론트엔드 개발자로써의 고민의 흔적이라 봅니다. 사용자의 입장에서 화면의 전환이 얼마나 깔끔한지, 로딩이 얼마나 빠른지 등의 UX가 편해야 웹/앱을 자주 사용할지 결정합니다. 그 면에서 CSR은 굉장히 좋은 방식입니다만 SEO측면에서는 굉장히 안좋았습니다. 또한 웹/앱이 커질 수록 하위컴포넌트들이 무수하게 많이 생성되어 상위컴포넌트를 찾기가 힘들어집니다..

이로인해 SSR 방식의 서비스를 구현해보고 싶어졌습니다. 특히 랜더링 초기에는 SSR로 하고, 이후에는 CSR방식으로 페이지를 이동하여 UX까지 좋은 Next.js에 눈길이 갔습니다.

위와 같은 이유로
React를 사용하고, SSR방식을 사용할 수 있는 Next.js
Javascript보다 안정적인 컴파일러 형식을 지원하는 Typescript

를 사용하기로 결정했습니다.
이외에도 Jest를 이용하여 테스트주도 개발을 unit단위로 진행하려고 합니다.

서버는 간단하게 Node.js를 이용할 것이고, 백엔드에 대한 지식은 최근에 조금씩 생성 중이라...DB도 간단하게 MySQL을 이용할 예정입니다.

서비스의 이유

지금까지 프로젝트 진행에 있어 기술적인 문제에 대해 적어보았습니다. 그렇다면 서비스의 창의적? 발상은 무엇이었을까요??

그러고보니 서비스 소개를 안했네요 ㅎㅎ.. 개발자다 보니 기술이 더 중요했습니다.
제가 이번에 하려는 서비스, 프로젝트이름은 COINSS!!! 입니다. 음... 어디서 들어본 이름같죠??ㅋㅋㅋ TOSS의 모방서비스입니다. ㅋㅋㅋ

최근에 TOSS에서 토스증권을 만들어 주식시장에 발을 들였습니다. 저는 거기에서 착안하여 코인시장에 발을 들이밀어보고 싶었습니다. 또한 TOSS는 UI/UX에 굉장히 중점을 두면서 개발을 합니다. 이런 토스처럼 UI/UX가 이쁘고 편리한 웹을 목적으로 합니다.

프로젝트 기획

저는 기획자가 아니기 때문에... 몇가지 블로그를 참고 좀 했습니다.
1. 20년 차 웹/앱 서비스 기획자의 앱 기획 노하우를 공개합니다
2. 개발자도 알면 좋은 UI 디자인

그러면 위의 블로그 대로 기획한 것을 설명해 보겠습니다.

1. 무엇을 하는 서비스인가를 정의하라.

암호화폐 거래소의 종목들을 쉽게 접근할 수 있게 해주는 사이트

UI/UX가 좋고, 사용자가 쉽게 거래소에서 거래할 수 있게끔 도와주는 사이트를 만드는 것이 목적입니다.
개인 프로젝트기 때문에 제가 거래소가 되진 못하고, 업비트 API를 이용해서 중개해주는 역할을 할 순 있을 것 같습니다. 그치만 API를 이용하기 때문에 사용자가 거래를 하려면 OPENAPI KEY를 업비트에서 따로 발급을 받아야 합니다. 이부분은... 개인프로젝트이기 때문에 key를 알아서 발급받는 다는 가정하에 진행하려 합니다.

그리고 거래 뿐만이 아니라 종목별, 인기 순위별, 등 여러 검색기능을 제공 할 것이기 때문에 용도는 다양하게 꾸려나갈 예정입니다.

2. 초간단 서비스 구도를 그려라.

서비스의 뼈대를 그리는 단계입니다.

거래의 핵심일 것 입니다.

내 자금 확인, 시세 확인, 매수/매입

3. 사용자의 사용방식을 흐름도로 그려라.

하라는대로 그려봤는데 이게 맞는지 모르겠습니다. 제 예상을 이렇지만... 더 있을 수 있고, 아닐 수 있으니 참고만 해주세요 ㅎㅎ

간단하게 그려보았습니다. 정말 간단하죠? 사실 사이트가 그렇게 필요한지 모르겠지만... 제가 토스 증권을 쓰면서 굉장히 편리하다고 생각한 부분을 구현하려고 한 것이기 때문에 서비스 자체의 흐름도는 크게 중요하지 않다고 생각했습니다.

그래서 4단계인 마인드 맵과 다른 부분은 생략했습니다.

4. 사이트 맵을 만들어라

제가 제일 중요하게 생각한 부분입니다.
프론트엔드 개발자로서, 화면 구성이 제일 중요하죠!

중요하다고 생각하면서 그린것 치곤 단촐하죠?ㅎㅎ

일단은 꼭 필요하다고 생각한 부분만 그렸습니다. 이 부분은 UI를 구성하면서 더 추가될 수 있습니다.

이후 서비스 흐름도 등을 만들라 하지만,,, 생략하고 UI부터 구성하기로 결정했습니다. 이미 사이트맵을 그린것 만으로도 UI를 구성하긴 충분하니깐요!

5. UI구성하기

전문적인 UI팀은 AdobeXD나 스캐치, 피그마 등을 사용한다고 합니다. 더 자세히 알아보고 싶으시면 참고 를 클릭하여 참고해주세요.

저는,,, 그런돈을 쓰기가...

그래서 무료 간단 UI툴인 Oven.io 를 사용했습니다. 카카오에서 만들어서 베타버전 무료로 배포중이라고 하는데, 진짜 간단하게 사용할 만 합니다. AdobeXD처럼 폰트나 사이즈 같이 상세하게 설정할 수는 없고, 그냥 모양만 간단하게 어떻게 구성할지만 구성할 수 있었습니다.

UI/UX디자이너가 아니라 여기에 많은 시간을 할애하기도 그렇고.. 어렵고 해서 간단하게 어떻게 화면을 구성할지만 틀을 잡았습니다.

자세히보기: https://ovenapp.io/view/SQ71XzgjcNprjJUOSY5B6rPCmSoeg0pH/ufKj1

자세한 구성과 디자인들은 하면서 즉흥적으로 추가하기로 합니다. ㅎ

기획의 마무리

기획을 거의다 마무리 한 것 같습니다. 많은 글과 포스팅, Pinterest와 같은 UI 페이지까지 프로젝트를 위해 참고를 좀 했습니다. 모방은 창조의 어머니다! 라는 말이있죠? ㅎㅎ

UI까지 머릿속과 화면에서 구성을 완료했으면 시작을 해야겠죠?
이제 Next.js와 Typescript로 Frontend 틀부터 잡으면서 개발을 시작하려 합니다.

1년차 개발자의 개인프로젝트 시작단계! 글 잘 보셨으면 하트와 댓글 달아주세요!