💡 이 포스트에는 Section3의 Unit 8. 미니 해커톤의 과제를 하고 회고를 정리했다!
과제 작업과정, 작업하며 느꼈던 점들을 정리했다.
과제 소개
이번에는 지난 섹션에 만들었던 것을 다시 고도화하는 것이 아니고, 처음부터 나만의 앱을 만들어보는 시간이었다. 어디서 주워들은 건데, 프론트엔드 개발자라면 간단하게 투두리스트 앱이나 게시판 같은걸 만들어본다는 이야기를 들은 적이 있다. 이번에는 투두리스트를 만들어보는 과제로 기획, 간단한 디자인(피그마)부터 피그마 프로토타입, 리액트로 직접 만들어보는 과정을 진행해야 했다. 일단 리액트로 만들어서 추가로 하는 건 section4까지 해야하므로 이번에는 기획과 피그마 까지 진행하였다.
과제 진행
1) 레퍼런스 찾아보기
일단 모양은 모바일 UI에 맞춰서 작업하고, pc에서는 모바일 크기로 작게 띄울 예정이었다.
그래서 갤럭시 유저인 나는 구글 플레이스토어에서 내가 원하는 기능이 있거나 내가 원하는 디자인의 앱들을 찾아보았다.
몇가지 마음에 드는 것들을 찾아서 다운로드하고 필요한 화면들을 캡처했다.
2) User flow
일단 적어도 CRUD(Create, Read, Update, Delete)기능은 갖춰야 한다고 생각했고, 내가 레퍼런스를 찾으면서 추가하고 싶었던 기능들로 유저 플로우를 그려보았다. (도구는 figma Jam을 사용했다.)
유저 플로우를 그려보며 내가 욕심 낸 부분들, 추가로 확장할 수 있는 부분들과 필수 기능을 나누어서 정리해보았다. 그리고 최대한 불필요한 기능들은 지우고 합칠 수 있는 부분들은 합쳐보았다.
3) Figma 작업
피그마를 단순히 그리는 것 뿐만 아니라 제출해야 했고, 프로토타입으로 작동도 가능하게 해야했기에 피그마 작업이 좀 오래 걸렸다.
나는 디자이너가 아니지만, 깔끔해보이는 디자인이 쉬운 디자인이 아니라는 것은 알고 있다. 그래서 비 디자이너로서 어떻게 작업해야 할지 다음에 포인트를 두었다.
- 색상이나 폰트는 너무 많이 쓰는 것보다 규칙을 정해서 소량만 쓰고, 통일해서 썼다.
ex) 회색1, 회색2, 회색3, 검정1 -> 회색1, 검정1 - 폰트, 간격은 Material 디자인을 참고했다.
- 강약을 신경썼다. 심플한 게 목적이라 강한 대비는 되도록 피했다.(포인트 컬러 자제하기 등)
- 강한 포인트는 의미상으로도 중요한 부분에만 쓰려고 노력했다.
그리고 피그마 사용이 익숙하지 않아 검색하며 사용해야 했는데, 몰랐거나 찾아낸 중요한 점들을 정리하자면 다음과 같다.
- [Prototype] 사용자 이벤트 발생시(클릭, 호버 등) 요소를 변하게 하려면
- 기본 상태를 컴포넌트로 만들고, 변한 후의 상태를 복사하여 따로 컴포넌트로 만든 뒤
- 둘을 합쳐 오른쪽 components 항목의 'combine as variants' 를 클릭한다.
- 각각이 어떤 상태인지 property1에 설정해주고, 각각 이벤트를 적용해주면 된다.
- 주의할 점은, 그 내부요소에 같은 이벤트가 중첩되어 있으면 안된다!
- [Components] 리액트로 개발할 예정이므로 컴포넌트 요소들은 따로 빼서 정리하였다.
배운 점, 느낀 점, 아쉬운 점
배운점
- 프로젝트 경험을 해보니 처음 기획, 디자인에서 중요한 요소를 확실히 정해야 다음 작업이 수월했다. 그래서 직접 피그마잼을 이용해 유저 플로우를 그려보니 막연한 기능들과 복잡한 내용에 대해 가닥이 잡혀서 유익했다.
- 피그마를 직접 작업해보니 피그마의 여러 기능들에 대해 익숙해지고, 프로토타입에 대해 잘 사용할 수 있었다. 앞으로 디자이너와 협업한다면 도움이 될 것 같다.
아쉬웠던 점
- 독특한 기능들, 정말 유용하다 싶은 기능들을 좀 더 넣고 싶었는데, 처음부터 욕심내면 잘 안될 것 같아서 일단은 필요한 기능만을 넣었다. 확장을 고려하고 있긴 하지만 그래도 아쉽긴 하다.
- 소그룹 회고를 해보니 벌써 리액트로 만들기 시작한 사람들도 있던데, 나도 일단 리액트로 만들어볼걸 그랬나 하는 생각이 들었다.
느낀점
- 아직까지 리액트로 된 내 프로젝트는 없지만, 이렇게 노하우가 쌓여서 재밌는 프로젝트들 조금씩 더 해보고 싶다.
- 개념공부+코딩+프로젝트 이렇게 순환하며 공부해야 실력이 성장한다고 알고있다. 프로젝트 해보면서 삽질도 해가며 실력이 늘었으면 좋겠다. 힘내라 나 자신!
