[7] 기술 스택을 바꾸기 앞서 정해야 할 것들

핵심이 되는 기능을 개발하는 데 성공했으니, 이제 서브 기능인 자랑하기 페이지를 만들어야 했다.

바닐라JS로 만들면 필요없는 렌더링이 생기고, 렌더링될 때 깜박임이 생기기 때문에,

그리고 지금보다 더 길어질 코드가 예상되어 리액트로 스택을 바꾸려고 생각하고는 있었다. 

 

원했던 기능 

1. CRUD 가 가능한 자랑하기 페이지를 만들고 싶었기에 (인스타처럼 각자 만든 이미지를 공유할 수 있도록)

2. 프로필 그림 1차 완성 후 -> 페이지 이동해서 2차 가공 (그리기, 글씨 쓰기) 가 가능하게 하고 싶음

이렇게 두가지 기능을 원했기에 서버가 필요했다. 

 

주변 개발자 분들께 여쭤봤는데 지금 할 수 있는 건

1. React + express

2. Next JS 사용하기

 

이렇게 두가지였는데 이 두가지 중에 어떤 스택으로 할 지 고민이였다. 

그러다 문득 왜 고민되나 생각해봤는데

내가 만들고자 하는 앱의 구체적인 이미지가 없어서! 라고 생각됐다.

페이지는 얼마나 필요한지, 백엔드와의 상호작용은 어느 정도로 사용될지, 앞으로 어떤 식으로 확장될 수 있을지 등

대략적으로 정하지 않고 작은 앱인데 뭘 해야하지 하고 있었다...!

 

그래서 먼저 조금은 더 구체적으로 이 앱이 제공할 기능들을 구상해보기로 했다.

 

 

 

---

 

 

레퍼런스 조사

 

 

Avatar generator 라는 이름으로 다양한 앱들의 예시가 있었다.

 

 

페이지 구성

- 환영 인사 (?)

=> 둘러보기(자랑하기 페이지) || 나만의 아바타 만들기

- 아바타 만들기 (canvas) : 캐릭터 및 고정된 아이템 선택, 배경 컬러 선택

=> 1차 완성 후 : 추가 꾸미기 페이지 : 크기 조절 가능한 아이템, 그리기 기능, 텍스트 삽입 기능

(fabric js 로는 페이지 이동 없이 가능할 것 같긴 하다.)

=> 완성 후 : 다시 만들기 or 저장하기 or 자랑하기 선택 가능 

-> 저장하기를 하면 저장하기 하고 끝 

-> 자랑하기 하면 자랑하는 posting 페이지로 넘어감 -> posting 후 자랑하기 페이지로 넘어감

 

 

피그마로 대략적인 페이지 이동과 구성을 만들어봤다

 

 

 

 

 

 

 

출처

https://dribbble.com/shots/15020933-Game-Profile-Dashboard-Daily-UI/attachments/6744133?mode=media

https://dribbble.com/shots/6745812-Skyeng-kids-hero-skills

https://dribbble.com/shots/15009114-3D-Avatar-Generator-Mobile-Exploration