[ 항해99 실전프로젝트 ] 아바타 페이지를 만들어보자 ( 1 )

11월 20일 시작

 

참고할만한 자료를 아직 많이 찾지는 못해서, 저번 기수가 만든 프로젝트를 참고하기로 했다.

 

• 습관삼끼

https://github.com/dokyunglee0905/makehabit_FE (습관세끼)

GitHub - dokyunglee0905/makehabit_FE: 갓생삼일 프로젝트 (FE)

일단 습관삼끼에서 구현한 캐릭터페이지는 아래와 같다.

 

 

습관삼끼

위에 캐릭터를 다양하게 의상부터해서 악세사리까지 입힐 수 있다.

그렇다면, 이걸 어떻게 구현했냐

 

습관삼끼에서는 프론트에서 여러가지 이미지들을 public폴더에 저장을 해놓고, 불러오는 방식으로 진행이 된다.

여기까지는 구현로직이 어렵진 않은 것 같다. 신경써야 할 점은 여러 이미지를 불러올 때, 최적화가 되어야한다는 거? (webp 이미지사용 등)

 

근데 이렇게 경로를 미리 정해놓고, 각 사진들을 불러왔을 때의 위치를 정해놓는 방식은 가장 기본적인 방식이라 생각한다.

위의 내용을 현재 멘토분께 말씀드렸을 때, 아래 "마플"이라는 사이트를 말씀해주셨다.

 

• 마플

https://www.marpple.com/kr?utm_source=goole&utm_medium=cpc_sa&utm_campaign=mplbrand&utm_term=%EB%A7%88%ED%94%8C&gclid=Cj0KCQiA99ybBhD9ARIsALvZavXsACSVXxZs0H5t3EGbLS-K0Wy7KL_x5ZjFk8zzSQUGkJMk6vp2O-EaAhzvEALw_wcB 

마플 내손안의 프린팅

 

 

 

마플 예시

 

아마 우리 팀은 미리 저장한 뒤, 꺼내오는 방식을 택할 것 같다.