[DND] 7기 프론트엔드 후기 (Photalks)

DND

---

DND 8주간의 활동을 마무리하다

DND는 디자이너 & 디벨로퍼의 줄임말로 8주 동안 하나의 사이드 프로젝트를 진행할 수 있도록 팀을 구성해 주는 연합 동아리입니다. 정기 활동 기간인 8주 동안 프로젝트를 진행하는데, 매주 정기 활동이 있는 다른 동아리들과 다르게, OT와 중간발표, 최종 발표로만 모이는 방식입니다. 이번 DND 활동을 하면서 느낀 것도 많고, 배운 것도 너무 많아서 글로 정리해 보려고 합니다.

우선 DND는 프론트엔드 개발자 2명, 백엔드 개발자 2명, 디자이너 2명으로 총 6명으로 구성되어 사이드 프로젝트를 개발해 나갑니다. 저희 팀은 저 혼자 대학생(20살)이었고, 나머지 분들은 취준생 또는 직장인으로 구성되었습니다. DND를 하면서 가장 좋았던 점은 팀원 모두가 기회가 주어진 만큼! 할 수 있는 만큼! 매우 열심히 개발 하고 의견 내고 모두가 열심히 하려는 의지가 있어서 (학교 팀플과는 매우 다르게) 너무 재밌게 활동할 수 있었던 점이 좋았습니다! 

---

활동 1~4주차

우리 팀 노션

1주 차부터 사용한 저희 팀 노션입니다. 초반엔 별거 안 했죠... 팀장을 뽑고, 어떤 주제로 프로젝트를 할 것인지 아이디어를 선정하고, 기획서도 작성하고, 요구 사항도 정리하는 매우 간단(?)한 미션이었습니다. 

전 일단 여기서부터 굉장히 뇌절이 온 게... MBTI가 I로 시작하는 저가 의견을 낸다던지, 나서기를 한다던지.. 이런 게 그냥 불가능했기 때문이었고... 팀원들이 모두 E로 구성된 굉장히 신기한 구조 안에서 저도 E인척 살아가려고 노력하느라 좀 더 힘들었답니다. (여기서부터 협업의 어려움을 느꼈죠...)

솔직히 말하자면 1~4주 차는 디자이너 분들이 하실게 많지, 개발자들은 딱히 할 게 없었습니다. 다음 사항들만 해결하고 넘어가면 됐어요.

• 기술 스택 선정
• 프로젝트 세팅
• 스펙 구체화
• 이슈 생성 및 관리
• 코딩 컨벤션 문서 제작
• 코드 포매팅 플러그인 사용하기
• Git branch 전략 세우기

그중에서 기술 스택에서 굉장히 난항을 겪었습니다. 회의 내용을 간단히 살펴보자면 다음과 같습니다.

디자이너: 저희 아무래도 프로젝트 구성을 봤을 때 웹보단 앱을 해야 할 거 같아요....
다른 프론트 분: 아... 근데 저희가 리액트 네이티브를 하려면 러닝 커ㅂ...
나: 저는 일단 리액트도 제대로 몰라서 뭘 하든 배워야 하기 때문에....
다른 프론트 분:.... 그러면 좀만 생각할 시간을...

라고 말하다 보니 어느 순간 저희 메인 기술 스택은 React Native가 되어 있었습니다!!
제 생각엔 DND나 다른 사이드 프로젝트 동아리를 하실 때 내가 앱을 해야 할 수도 있구나...라고 생각하고 가시면 마음이 편합니다. 주제가 어떤 게 될지 모르고 무조건 주제 방향을 웹으로 해줄 거라는 믿음을 버려야 하걸랑요 ㅋㅋ.. (아 아찔해)
저 같은 경우 일단 가장 큰 문제점이 React로 해본 거라곤 Class Component로 버튼 누르면 Text 바꾸기 정도를 해보았는데 React Native에 상태 관리 라이브러리까지 배워야 할 생각을 하니 어질 어질 했던 거죠...

지금은 끝나서 싱글벙글하게 아무 일 아닌 듯 글을 올리지만, 당시만 해도 말도 안 되는 양을 단기간 안에 배워서 코딩해야 했었습니다.. ㅋㅋ
기수 시작 전, 저의 상태를 말씀드리자면, 아무 생각 없이 알고리즘 문제나 풀어서 JS 기본 문법 정도는 알고 있었고, 프론트라고 할 수 있었던 것은 바로 Vue로 게시판 만들기 정도를 할 수 있었던 거 같습니다. (이 정도 실력으로 어떻게 뽑혔지..  진행하면서 맨날 생각함)
단기간 안에 많은 스택과 많은 기술들을 접했는데요, 저는 이번 DND를 통해서 가장 많이 느낀 게 문제가 생기면 찾으려고 노력하고 매일매일 배우려는 자세로 임한다면 충분히 DND 과정들을 소화해 낼 수 있다는 것입니다.

DND.AC

다음 사진은 DND 공식 페이지에 있는 Q&A 글 중 하나인데요, 저는 딱 기본 개발 언어를 아는 사람이었고 프레임워크나 라이브러리 공부는 나중에 해도 가능하다던 DND 운영진님들의 말씀처럼 8주간의 시간 동안 열심히 공부하고 따라가고 찾아봤던 노력들을 통해서 마무리해 낼 수 있었습니다. (같은 팀 프론트 분의 역할도 매우 매우 컸어요!! 갼님짱..)

8주간 배우고 사용했던 저희 Photalks 프로젝트의 기술 스택은 다음과 같습니다.

• React Native
• Redux
• React Query
• Emotion
• Axios
• Comitizen

DND는 학원이 아니었고, 따로 알려주는 사람이 없었기에 개발 시작 전 1~4주 차 동안 React와 Axios 기초 정도를 최대한 마스터하려고 노력 했었습니다. 그 외의 코딩 컨벤션, 깃 컨벤션(Comitizen)같은 협업을 위한 기초적인 내용들도 4주차 전까지 최대한 마스터 하려고 했습니다. 
(하루에 약 5~ 10시간 정도를 공부에 투자했습니다)

그동안 디자이너 분들은 다양한 리서치 방법들을 도입하여 페르소나를 만들어 우리 서비스가 나아가야 할 방향과 기획되어야 할 내용들을 정리하셨고 4주 차부터 앱의 와이어 프레임이 구성되었습니다.

---

활동 5~8주 차

이때부턴 본격적인 개발을 시작했었습니다. 디자이너 분이 만들어 주신 와이어프레임을 보면서 UI를 구성하고 디자이너 분들과 소통하면서 개발이 진행되었습니다.

와이어 프레임

프론트가 가장 협업하기 힘들다고 느낀 게, 백엔드보다 디자이너랑 소통할 일이 많고, 디자이너보다 백엔드랑 소통할 일이 많기 때문에 소통 왕이 되어야 한다는 것이었습니다... 
사실 8주라는 시간이 굉장히 굉장히.. 굉장히...... 짧기 때문에 중반부턴 디자이너 분과 프론트끼리 계속 전화하면서 프로젝트를 진행했습니다. 저녁이고 새벽이고 아침이고 관계없이 계속 develop 해 나갔었습니다. (제 인생 최대 코딩 시간 달성까지 해버린..)

https://github.com/dnd-side-project/dnd-7th-6-frontend

GitHub - dnd-side-project/dnd-7th-6-frontend: 🖼 PLAY PHOTALKS 🖼

(현시점 586 commits을 자랑하는 저희 프로젝트이죠 하하... 사실 기술 스택 설명이나 디자인 유지보수 대응하기 같은 다양한 기술 이야기도 담아내고 싶었지만 글이 매우 매우 길어질 것 같기 때문에 RN 기술에 대한 이야기는 하나씩 하나씩 풀어보려고 합니다!)
와이어 프레임의 대표 작업은, 디자이너분이 작업해주신 화면 값을 먼저 넣어 놓고 그 값에 맞춰 화면 비율과 계산하는 방식으로 저희 팀은 해결하였습니다. 이렇게 대응하니 하나하나 break point를 걸어주는 웹보다는 훨씬 쉽게 작업을 해 낼 수 있었던 것 같습니다. 

와이어 프레임 UI 및 기능 작업 이후 와이어 프레임에 색도 입혀지고 기능도 고정되면서 Hi-Fi UI를 그리는 작업을 했습니다.

Hi-Fi

이렇게 다양한 디자인과 배너, 색상들을 입히고 난 이후, 저희 프로젝트 Photalks가 완성되었습니다!!...

현재는 TestFlight를 통해 iOS 내에서만 테스트 서비스를 진행하고 있고, Android도 곧 테스트를 진행할 예정입니다.

https://testflight.apple.com/join/pwQDWHlp

1. App store에서 TestFlight 앱 다운로드
2. TestFlight 앱 내에서 Photalks 앱 수락해주시면 됩니다!

 

---

찐 후기..

개발을 하면서 아쉬웠던 점들이 몇 가지 있습니다.

1. Emotion과 React Native 코드를 쓰면서 가장 아쉬웠던 건 래핑 부분을 조금 더 잘하고 공통 컴포넌트로 사용할 수 있게끔 처음부터 개발했어야 했는데, 그러지 못하고 하드코딩이 들어간 부분이 생각보다 너무 많았습니다. 
2. 폴더 구조화에 신경을 많이 쓰지 못했습니다. 지금 어느 정도 폴더 구조화를 해 놓은 상태이지만, 처음 보는 사람이 저희 프로젝트를 본다면 찾을 수 없게 되어있습니다.
3. 폴더 이름과 변수 이름을 더 많이 고민해야 했습니다. 폴더 구조화와 같은 맥락인데, 단축키 없이는 찾기가 어렵습니다.
4. useEffect를 낭비해서 사용했습니다. React-Native Naver-Map이라는 라이브러리에 오류가 너무나도 많았습니다. 컴포넌트 메서드가 작동하지 않는다던가, m1 맥 대응할 때 오류를 뿜어낸다던가.. 하지만 저는.. 네이티브 코드 단(Swift, Kotlin, Java)을 건들 엄두조차 나지 않았기 때문에, Geolocation Library와 다양한 useEffect로 해결 하긴 했지만, 리팩터링이 시급한 부분이라고 생각합니다.
5. React에 대한 지식이 조금 더 많았어야 했습니다. React를 배우지 않고 8주간의 DND를 시작했기 때문에, 같은 팀 프론트엔드 팀원과의 코드 실력 갭이 컸다고 저는 생각합니다. (물론 맨날 아니라고 우기시지만) 지금 보니 HOC로 더 깔끔하게 처리할 수 있었던 부분들도 있었고, 당장 생각해봐도 프로젝트 시작 때 작성한 코드와 후반에 작성하는 코드의 차이도 존재했기 때문입니다.
6. React와 마찬가지로 React query, Redux, Emotion같이 처음 접해보는 라이브러리를 찾아서 사용하는데 많은 시간이 투자되었고, 코드 품질을 신경 쓸 시간이 더 줄어서 많이 아쉬웠던 것 같습니다.

이 글을 보시는 여러분은 사이드 프로젝트를 하시기 전에 꼭.... 꼭.... 많이 공부해가셔서 새로운 공부하는 시간 대신, 코드 품질과 새로운 기능 개발에 더욱 집중하세요...!! (20살 밥통 개발자가......)

DND는 꼭 추천합니다. 제 목표였던 디자이너와의 협업도 달성해보고, 다양한 기술들도 접해보고, 개발자 & 디자이너 인맥들도 생길 수 있어서 진짜 너무너무 좋은 시간이었고, 시간이 나면 또 새로운 사이드 프로젝트를 해보고 싶었습니다! (사이드 프로젝트 중독이 되어버릴지도..)

마지막으로, DND의 슬로건처럼 누구나 참여할 수 있는 DND!! 꼭 한 번 해보세요 ㅠㅠ 8기 지원 꼭 하세요....!!

https://dnd.ac/

DND