만다라트 프로젝트 - 개발일지 0

현재 블로그를 기술블로그(티스토리)와 일상블로그(네이버)로 이분해서 활동하고 있습니다.

일상블로그는 원래 노션에 적어내려오던 것을 네이버 블로깅을 하는 지인들이 있어 공유하고 싶은 마음에 옮기게 됬네요.

일단은 기술블로그에서는 개인의 견해나 인생에 대한 주관적 이야기를 담고싶지 않아서 그런 결정을 내리게 되었습니다.

 

 

 

새로운 사이드 프로젝트

이전에 HTML, CSS, JavaScript를 공부하면서 테트리스를 만들겠다는 생각을 했었고, 실제로 어느정도 동작하는 수준의 웹 어플리케이션을 제작하였습니다. 아쉽게도 개발일지나 문서화 등은 일절 하지 않아 자료로 남길 수 있는게 호스팅 되어 있는 URL밖에 없더군요. 그래서 이번엔 좀 더 제대로 의미있는 프로젝트를 진행해보고자 합니다.

 

 

 

 

만다라트 프로젝트

Figma를 통해 제작해본 도안(?)

이번에 리액트를 공부하면서 만들게 될 프로젝트는 '만다라트 계획표'입니다. 9개의 격자가 9개 있는 형태의 계획표인데, 이를 만다라트라고 부르며, Manda(깨달음) La(성취) Art(기술)의 합성어 입니다. 9개의 격자들 중 중간의 9개 원소에는 중심 목표나 본인에게 중요한 가치를 적습니다. 그리고, 각 방향의 격자에는 해당 주제나 가치에 대한 목표를 8개 적는거죠. 그렇게 모든 격자를 채워나가는 겁니다. 마인드맵과 유사하지만, 1년 계획을 세울때 쓰면 굉장히 가시성도 좋고, 목표를 수립하는데에도 큰 도움이 되더군요.

 

 

 

리액트로 제작한 레이아웃. 구분을 위한 배경색상을 일부러 이렇게 둔것임..!!

오늘까지 작업한 결과물은 다음과 같습니다. 웹 SPA(Single Page Application)형식으로 제작할 예정이며, 기본적인 레이아웃만 완성한 상태입니다. 여러개의 컴포넌트를 생성하고, 각 컴포넌트의 css 모듈까지만 연결해 둔 상태이죠.

목표하는 기능은 유저의 클릭에 따른 만다라트 채워나가기, PDF(또는 이미지)형태의 export, 가능하다면 SNS 공유기능까지 넣어보고 싶습니다. 기한은 무조건 12월 31일까지 최소한의 기능까지라도 구현하고자 합니다. 어떻게 될지는... 한 번 달려봐야겠지요.

단순히 클론코딩이나 문법서적을 보면서 배우는 것 보다 이렇게 삽질을 하면서 배우는게 더 클거라 생각해서 도전해보려고 합니다.