2023. 2. 27. 02:13ㆍ프로젝트
토이프로젝트를 생각하게 된 계기
얼마 전 CRUD를 구현해낸 나는 뭔가 자신감이 흘러넘쳤고, 뭐라도 하지않으면 지금의 이 자신감이 휘발될것만 같았다.
같이 CRUD를 구현하던 동기분과 함께 이 흐름을 이어가기 위해 뭘 해보면 좋을까에 대해 상의하다가 토이 프로젝트에 대한 이야기가 나왔다. 구글링을 해보니, 보통 프론트엔드의 첫 토이프로젝트로는 TO-DO List 나 클론코딩 / 간단한 게임만들기 등을 추천했었다.
하지만 내가 생각하기에는 저러한 프로젝트들은 경험적인 측면에서는 좋겠지만 프로젝트를 완성하고나서의 보람은 별로 못 느낄 것 같았다.
그 이유는 이러했다.
- 타겟하는 사용자들이 없다.
- 굳이 내가만든 TO-DO List, 간단한게임을 이용해야 할 필요성이 없다.(메리트도 없다)
- 이미 시장에는 가장 최적화되고 고도화된 TO-DO List 와 게임이 있다.
- 내 주변사람들이 자주는 아니더라도, 사용할법한걸 만들고 싶었다.
굉장하고 대단한 기능구현을통해 "우리 이런걸 했어 어때?" 보여주는것도 좋지만, 나의 첫 프로젝트는 확실한 사용욕구를 불러일으키는데에 포커스를 뒀다.
일단 우리의 프로젝트 사용자 타겟은 같은 부트캠프 동기들(약 130명)이었다.
10000명도아니고 1000명도 아닌 130명의 니즈를 공략하기만 하면 첫번째 토이프로젝트는 성공이었다.
디스코드 프로필을보고 알아 낸 것이 있다.
- 몇몇 동기들끼리는 프로필 아이콘을 맞췄다.(친분 또는 소속감을 보여주기위함?)
- 카카오톡이나 인스타처럼 자기 자신을 프로필로 해놓는게 아닌 일러스트가 많았다.
- 비슷해보이지만 자신의 아이덴티티를 각자 충분히 나타내고 있었다.
- 비슷한 그림체가 있는 걸 보아, 누군가가 동기들의 프로필아이콘을 그려주고있다.
이를 종합해봤을 때, 복잡한 기능구현없이 높은 사용성을 보여줄법한 것, 바로 프로필아이콘 생성기를 만들어야겠다고 생각했다.
그래서 어떻게 만들어줄건데?
- 이전에 NFT에 관심이 생겼을 때, 오픈씨(opensea)라는 NFT민팅 사이트를 자주 구경가곤 했었는데 그곳에 NFT일러스트 작품들처럼 만들어주면 좋겠다고 생각했다.
- 퍼블리셔 커리어가 있던 토이프로젝트 팀원분께서 그림을 그려주시기로 했다.
- 눈,입,악세서리,두상 등등 카테고리별로 다양한 레이어를 만들어놓고 사용자가 셀렉할때마다 레이어를 겹쳐서 하나의 일러스트처럼 보여준다.
- 조코딩 유튜브의 "NFT 컬렉션 1000개이상 만들어 민팅하기" 를 보고 영감을 얻었다.
이 프로젝트의 기대효과는?
- 같은 코스의 동기들이지만 어디 스터디, 어디 그룹, 누구누구랑 페어 등등 조각조각 어울리고 있다고 생각했다. 이 프로젝트가 성공적으로 배포되고 동기들이 많이 이용해준다면 동기들이 43기라는 하나의 소속감을 가지게 될 수도 있지 않을까? 생각했다.
- 코스의 진행도에따라 같이 리팩토링하면서 디벨롭하기에 좋은 소스라고 생각이 들었다.
- 최대한 사용자의 개성을 나타낼 수 있게 다양한 커스터마이징 요소를 넣었기 때문에 자신만의 프로필아이콘을 만들어서 자신을 표현 할 수 있다.
프로젝트 개발 과정
첫 프로젝트다보니 정말 무작정 해버린 것 같다.
나중에 메인 프로젝트 기간 때 고생할걸 지금 해보자는 맘으로 임했지만 정형화된 워크플로우가 없으니 모든게 즉흥적이었다. 미래에 내가 이걸 본다면 놀라 자빠질지도 모르겠다. 의식의 흐름대로 개발했다.
과거에 나에게 말해주고싶다. 프로젝트를 시작한다면 이사진을 보고 시작하라고...
1.와이어 프레임
와이어프레임 이라고 부르기엔 와이어프레임한테 미안하다.
하..지만 뭐 어떤가? 우리둘만 알아보면 그게 와이어프레임 아니겠는가.
일단 기본적으로 App, Title, ViewSection, manual, SelectButton 이렇게 4가지 컴포너트로 나눠서 와이어프레임을 구성했다.
2.기능구현 - (랜덤버튼 구현)
랜덤버튼 구현은 , 랜덤버튼 클릭시 랜덤버튼 이벤트함수가 실행되고, 이벤트함수는 Math.random() 메서드를 통해 무작위로 생성된 난수를 반올림하여 그 값을 setState에 담아서 올려준다.
허브역할을 하는 App컴포넌트는 SelectButton 컴포넌트에서 올라온 값으로 변경된 state값을 다시 props로 ViewSection 컴포넌트로 내려준다.
App 컴포넌트에서 props로 내려받은 state값을 각 카테고리별 PNG파일을 불러오는 경로에 넣어준다.
2.기능구현 - (셀렉버튼 구현)
처음에는 하드코딩으로 하나하나 만들다가, map 메서드를 이용해보자는 팀원분의 말을듣고 map으로 뿌려지도록 구현했다. 그런데 또 맵으로돌리려면 맵을 돌릴 배열데이터가 있어야하는데 그걸 위에 다 만들어주자니, 조삼모사같았다.
코드를 줄이려고 맵을돌리는데 맵을 돌리려면 데이터를 또 만들어줘야했고, 그러면 코드의 절대량은 비슷했다.
그래서 데이터를 분리해주기로 했다.
셀렉 버튼의 리스트들을 SelectData.jsx에 Optoins라는 이름으로 분리해서 작성해주고, 모듈로 사용가능하게 만들었다.
SelectButton 컴포넌트에서 모듈화한 Options를 불러와서 사용하였다.
3.UI/UX 디자인
형편없는 나의 와이어프레임을보고는 도저히 디테일을 잡을 수 없어서 포토샵 장인인 팀원분이 뚝딱 만들어주신
높은 충실도의 웹 사이트 와이어 프레임
와이어프레임을 보고 최대한 비슷하게 디자인 해보았다.
여기까지 진행하면서 느낀 점
가장크게 느낀점은 협업의 좋았던 점과 힘들었던 점이 강렬하게 다가왔다.
좋았던 점
- 자칫 나 혼자 프로젝트를 진행했다면 분명히 놓치고 갔을 부분들을 팀원분이 캐치해줘서 불필요한 작업을 줄인일도 많았고, 반대의 경우도 많았다.
- 이상하게 코딩은 내코드의 에러는 못잡지만 남의코드의 에러는 귀신같이 잘보인다. 그 덕분에 서로가 서로를 보완해주며 첫 토이프로젝트지만 꽤나 완성도 있게 진행중이라고 생각한다.
- 이 협업의 워크플로우를 좀 더 익힌다면 정말 효율적으로 분담하여 프로젝트를 진행 할 수 있을거라고 느꼈다.
힘들었던 점
- 아직 협업이 익숙하지 않은 상태에서는 같은 컴포넌트를 말없이 손보다가 풀리퀘스트 날린 후 머지를 했는데 충돌하는부분이 산더미처럼 생겨서 수작업으로 지워나간 기억이 있다.
- 가령 서로 컴포넌트별 개발을 분담해서 했다고하더라도, 상대가 클래스명이나 함수로직을 조금 건든다면 머지하고나서 포크 후 클론을 해오면 에러를 심심치않게 볼 수 있다.
- 서로 정말 긴밀히 커뮤니케이션 하지 않는다면 같은 레포지토리를 공유하면서 서로 다른걸 만들고 있는 걸 볼 수 있다.
보완을 위해 노력했던 점
1. 소통
2.커밋 자주하기
배운 점
- 깃을 무지성 push만 하여, 나의 레포지토리로 옮길줄만 알았는데 이제 풀,푸쉬, PR, 머지 까지 어느정도 익혔다.
- 지금까지는 비교적 짧은 코드들만 다루다보니 리팩토링의 필요성을 못느꼈다. 하지만 한 컴포넌트당 150줄, 많게는 200줄가까이 되는 컴포넌트들을 다루다 보니 리팩토링의 필요성을 느꼈다.
- 사용자 관점에서 생각을 많이하게 됐다. 당연한거지만 사용하는 사람의 UX를 굉장히 우선순위에 두고 작업을 했다. 내가 사용자라면 이부분이 어색할 것 같다. 라던가 이러이러한게 있었다면 좀 더 좋은 경험을 했다고 느낄 것 같다. 라는 고민을 엄청 많이했다.
- 유튜브를 보면 많은 개발자 유투버들이 하는말이 있었다. "주니어때는 기능구현이 급급해서 생각나는데로 치게된다." 내가 딱 그랬다. 코드는 나만보니까, 사람들은 구현화면만 보니까 코드야 어쨋든 상관없다고 생각했다. 하지만 내가 개발자로 일하게된다면 필시 여러사람들과 협업을 하게 될 것이고, 나의코드를 모두가 공유해야하는 상황이 올 것이다. 그렇기에 나는 코드 한 줄 짤때도 신중하고 효율적으로 짜야하며 더 좋은 선택지가 있는지에 대해 끊임없이 고민해야한다고 느꼈다.
- 내의견을 정확하게 피력하는 방법과, 상황을 객관적으로 바라보는 눈이 조금은 생긴 것 같다. 내의견에 반대한다고 무조건 기분나쁠게 아니고 상대는 왜 이러한 의견을 냈는지에 대한 객관적 시각에서의 판단이 필요하다. 반대로 상대 의견에 내가 납득이 안간다면, 왜 납득이 안가고 어떤점이 이해가 가지않는지 논리정연하게 정리하여 상대에게 전달하여 납득시키는 것도 중요하다고 생각한다.
- 협업은 2인3각 같은거라고 생각한다. 내가 잘한다고 너무 빨리달리려고 해도 안되고, 내가 힘들고 어렵다고 천천히가도 안된다. 팀원들과 정말 긴밀하고 세세하게 커뮤니케이션을 해서 마치 뇌신경이 공유된것처럼 진행해야 정말 좋은 결과물이 나올 것 같다.
마치며..
프로젝트를 배포하기 전 전체적인 함수와 코드를 리팩토링 할 예정이다.
불필요한 코드는 걷어내고 중요한 로직은 더 세심하게 보완 할 예정이다. 다음 블로깅으로 찾아오겠다.
'프로젝트' 카테고리의 다른 글
| 스택오버플로우(stackoverflow) 클론코딩[1주차] (1) | 2023.04.17 |
|---|---|
| 스택오버플로우(stackoverflow) 클론코딩[0주차] (0) | 2023.04.17 |
| 토이프로젝트[ANI SCHO] 배포 및 서비스 (0) | 2023.03.05 |