DND 12기 합격 & 활동 후기

0. 서론

8주간의 DND 기간이 끝나고 활동 내용을 잊기 전에 후기를 작성하려 합니다. 이 글에서는 DND에 지원한 동기부터 프로젝트 개발, 데모데이까지의 전체 과정과 배운 점을 작성했습니다.

저희 팀이 개발한 서비스 스부키(Sbooky)는 아래 링크로 접속하실 수 있습니다.
서비스 링크
FE 레포

1. DND란?

'프로젝트에 즐거움을 모두에게 기회를'라는 슬로건을 바탕으로 8주동안 개발자와 디자이너가 협업하여 프로젝트를 진행하는 IT 개발 연합동아리입니다.
자세한 내용은 DND 홈페이지에서 확인하실 수 있습니다.

2. 지원 동기

2.1 지인들의 추천

데브코스 동료들과 멘토님들이 DND에 참여했었기 때문에 지속적으로 DND에 관심을 가지고 있었습니다.

2.2 포트폴리오 최신화

취직 이후로 포트폴리오가 업데이트되지 않았기 때문에 이직 준비를 위한 사이드 프로젝트 및 포트폴리오 최신화가 필요했습니다.

2.3. 지속적인 프로젝트

그동안 진행한 프로젝트들은 모두 단기적인 것들이었습니다. 이번 기회를 통해 서비스를 장기적으로 개선해나가는 경험을 쌓고 싶었습니다.

3. 서류

DND는 면접 전형 없이 서류 전형만으로 선발합니다. 질문은 지원 동기, 문제 해결 경험, 갈등 해결경험, 협업 경험, 프로젝트 링크, 포트폴리오에 관한 내용이었습니다. 이미 정리해둔 경험으로 작성했습니다.

답변에 대해 간단하게 적어보면

지원 동기

1. 기술적 도전
   프론트엔드 개발자로 실무를 진행하면서 원하는 기술을 사용하지 못하는 경우가 많다고 생각했습니다. 사이드 프로젝트를 통해 원하는 기술이나 기능을 직접 구현해볼 수 있는 기회라고 생각해 지원했습니다.

2. 서비스 운영 경험
   실무 경험은 있었지만 회사 사정으로 서비스 운영 경험을 쌓지 못했습니다. DND를 통해 모니터링 도구들을 활용하며 서비스를 개선해나가는 경험을 쌓고 싶었습니다.

문제 해결 경험

회사에서 진행했던 이미지 리사이징 구현 경험을 작성했습니다.

갈등 해결경험

개인 경험이라 생략하겠습니다.

대표 프로젝트 링크, 그 이유

Lighthouse 측정 결과를 바탕으로 코드 스플리팅과 반응형 이미지 요청등으로 FCP, CLS 성능을 최적화한 경험을 작성했습니다.

포트폴리오

이력서를 제출했습니다

4. 지원 결과

합격할 거라 생각하지 못해서 합격 메일을 받고 얼떨떨했습니다.
하루 정도 지나고 나서야 실감이 났습니다.

5. 활동

OT는 디스코드로 온라인에서 간단하게 진행됐습니다.

팀 구성은 디자이너 2명, 프론트엔드 개발자 2명, 백엔드 개발자 2명으로 이루어졌으며 운영진분들이 적절하게 팀을 구성해주셨습니다. 활동은 주별로 팀별 과제를 제출하기 위해 협업하는 방식으로 진행되었습니다.

대부분 수요일에 정기 회의를 진행했고 필요시 추가 회의를 하거나 슬랙에서 비동기적으로 소통했습니다.

전체 프로젝트 일정 중 기획 단계에서 가장 많은 시간이 소요됐습니다. 서비스가 해결하고자 하는 문제와 서비스의 매력을 도출하고 MVP에 필요한 기능을 정리하고 구체화하는 과정이 생각보다 어려웠습니다.

6. 협업

GitHub 레포지토리는 DND 조직 레포에 만들어서 진행했고 대부분의 회의나 소통은 슬랙, 디스코드를 통해 이루어졌습니다. 과제 제출은 노션으로 작성한 후 구글 스프레드시트에 웹 게시 링크를 입력하는 방식으로 진행했습니다.

7. FE 기술 스택

저희 팀은 pnpm과 Turborepo를 이용해서 모노레포를 세팅했습니다. 서비스는 Next.js를 이용해서 개발했으며 GitHub Actions와 Vercel CLI를 이용해 CI/CD 파이프라인을 구축했습니다.

주요 기술 스택

프레임워크: Next.js (App Router)
언어: TypeScript
상태 관리: TanStack Query
패칭 라이브러리: ky
스타일링: tailwindcss
패키지 관리: pnpm
모노레포: Turborepo
CI/CD: GitHub Actions, Vercel

자세한 설정은 레포에서 확인하실 수 있습니다.

• ps. Radix-ui 사용 여부, vitest vs jest로 5시간 동안 이야기 했는데 결국 DND 기한내에는 사용안한...

8. FE 개발 과정

디자인이 완성되는 동안 공통 컴포넌트와 레이아웃 컴포넌트부터 개발을 시작했고 이후 점진적으로 화면을 구현해 나가는 방식으로 진행했습니다. 레이아웃 컴포넌트는 제 제안으로 도입했는데 생각보다 생산성 향상에 큰 도움이 되어 앞으로의 프로젝트에도 적극 활용할 계획입니다.

데모데이가 2월 22일이었는데 실제 페이지 개발은 2월 12일부터 시작했습니다. 약 1.5주라는 타이트한 일정이었지만 팀원과 같이 노력한 덕분에 프론트엔드 개발을 효율적으로 마무리할 수 있었습니다.

개발 막바지에는 너무 잦은 배포로 인해 Vercel에서 6시간 이후에 배포하라는 메시지가 떴습니다. 당시가 데모데이 당일 새벽 3시였기 때문에 어쩔 수 없이 취침 후 아침에 일어나서 배포를 진행했습니다.

자세한 트러블 슈팅 후기는 별도 게시글로 작성할 예정입니다.

9. 데모 데이

DND와 YAPP이 함께 프로젝트 데모데이를 공덕 창업허브에서 진행했습니다.
각 팀마다 부스를 설치하고 팀원들은 타 팀 서비스 체험과 자신의 팀 서비스 소개를 번갈아가며 수행했습니다.

입장 시 특수 제작된 화폐를 받았는데, 이를 마음에 드는 다른 연합 동아리(YAPP => DND, DND => YAPP)의 프로젝트에 후원하는 방식으로 진행됐습니다. 이 후원금을 기준으로 수상이 결정되었습니다.

이전 기수까지는 발표만 진행했다고 했는데 데모데이로 진행하는 게 훨씬 재밌고 몰입감이 있었습니다.

각 서비스들은 다음과 같습니다.

10. 서비스 소개 - 스부키(Sbooky)

저희 팀이 개발한 서비스는 독서 기록을 습관화하면서, 기록 과정 자체가 보상이 되는 서비스인 스부키(Sbooky)입니다.

10.1 핵심 기능

1. 책을 등록하고 독서 상태(읽기 전, 읽는 중, 완독)를 관리
2. 책을 등록하거나 평가하면 포인트(마법 구슬) 획득
3. 모은 포인트로 유령 캐릭터 스킨 획득(뽑기)
4. 내 캐릭터 이미지 저장

스부키는 독서 자체에 대한 부담을 줄이고 기록과 수집의 재미를 더해 지속적인 독서 습관을 형성하는 데 중점을 두었습니다. 특히 독특한 캐릭터와 수집 요소를 통해 독서라는 활동에 게이미피케이션 요소를 가미했습니다.

10.2 스부키 부스

아이패드로 서비스 소개 이미지를 보여주었습니다. QR로 서비스, 인스타그램에 접속할 수 있도록 준비했고 굿즈로 대표 캐릭터인 유령과 고양이 스티커도 제공했습니다.

멀리서도 볼 수 있도록 책상에 포스터를 부착했고 좌측 책상의 노트북을 통해 서비스를 체험해볼 수 있도록 했습니다.

일부 팀들은 설문 조사나 인스타그램 팔로우, 앱 설치 시 간식을 제공하는 이벤트를 진행했는데 저희도 그런 준비를 했다면 더 많은 유저 피드백을 받을 수 있었을 것 같아 아쉬움이 남습니다.

11. 결과

감사하게도 대상을 수상할 수 있었습니다. 팀원들 모두 마지막까지 고생했는데 좋은 결과를 받아서 아름다운 결말로 끝났던 것 같습니다.

12. 프로젝트 후기 및 배운 점

12.1 협업의 중요성

이번 프로젝트에서 다양한 직군과의 협업이 얼마나 중요한지 체감했습니다. 디자이너, 프론트엔드, 백엔드 개발자가 각자의 전문성을 발휘하면서도 하나의 목표를 향해 협력하는 과정에서 많은 배움이 있었습니다.

주간 정기 회의와 슬랙을 통한 비동기 커뮤니케이션, 그리고 GitHub을 통한 코드 리뷰와 이슈 관리 등 다양한 협업 도구를 효과적으로 활용하는 방법을 익혔습니다. 특히 기획 단계에서 모든 팀원이 의견을 내고 조율하는 과정이 결과적으로 더 탄탄한 서비스를 만드는 데 기여했다고 생각합니다.

12.2 기술적 성장

Next.js를 활용한 서버 사이드 프로젝트 개발 경험을 쌓을 수 있었습니다. 또한 Next.js에서 제공하는 Route Handler, middleware, server action 등 여러 API를 사용해 볼 수 있었습니다.

레이아웃 컴포넌트 도입을 통한 생산성 향상도 좋은 경험이었습니다.
이전에 종현님께서 Chakra UI의 레이아웃 컴포넌트만 알아가도 성공이라는 말씀을 하신적이 있습니다. 그때는 잘 이해하지 못했는데 이번 프로젝트를 통해 그 의미를 체감할 수 있었습니다. 레이아웃 컴포넌트를 활용함으로써 반복적인 스타일링 작업을 최소화하고 일관된 UI를 빠르게 구현할 수 있었습니다.

12.3 서비스 운영 경험

짧은 기간이지만 데모데이 부스에서 실제 사용자들의 생생한 피드백을 받을 수 있었던 것은 매우 소중한 경험이었습니다. 특히 유저들이 서비스를 직접 사용하는 모습을 관찰하며 예상치 못한 사용자 패턴과 UI/UX 개선점을 발견할 수 있었습니다.

예를 들어, 캐릭터 뽑기 기능에서 사용자들이 기대했던 것보다 더 큰 재미를 느끼는 것을 확인했고 책 리뷰 등록 후 뒤로 가기 버튼을 누를 시 불편한 UX를 제공함을 알 수 있었습니다. 이러한 관찰을 통해 서비스의 강점을 더 부각시키고 개선이 필요한 부분을 파악할 수 있었습니다.

앞으로는 Google Analytics, Clarity를 이용해 사용자 행동 데이터를 수집하고 앞으로의 서비스 개선에 중요한 지표로 활용하려고 합니다.

12.4 앞으로의 계획

1. DND 이후 작업

DND 이후에 Google Search Console과 Naver Search Advisor에 등록했으며 sitemap과 robots.txt를 추가했습니다. 아래 이미지로 현재 검색 엔진에 등록되어 있음을 알 수 있습니다.

DND 활동이 공식적으로 끝났지만 스부키 서비스는 이제 막 시작입니다.

데모데이에서 실제 사용자들로부터 받은 피드백과 팀 내 논의를 통해 스부키의 발전 방향을 설계했습니다. 앞으로 다음과 같은 영역에 집중하여 서비스를 개선해 나갈 예정입니다.

1. 기능 개선 및 추가

1. 소셜 기능 확장 (친구에게 캐릭터 공유)
2. 더 다양한 캐릭터 스킨과 인터랙션 추가

2. 기술적 개선

1. 테스트 코드 도입 (Vitest, React Testing Library, PlayWright...)
2. 성능 최적화 (이미지 최적화, 캐싱 등)
3. PWA 기능 추가로 모바일 사용성 개선
4. 모노레포 구조 최적화 (원격 캐싱, 의존성 시각화 등..)
5. open api generator

3. 모니터링 및 분석 강화

• Sentry를 통한 에러 모니터링 고도화
• Google Analytics를 활용한 사용자 행동 분석
• A/B 테스트 인프라 구축 (개인 희망..)

4. 서비스 확장

• 디자인 시스템 npm 배포
• 앱 출시 검토 (React Native)

이 모든 계획을 단기간에 실현하기는 어렵겠지만 우선순위를 정해 점진적으로 개선해 나갈 예정입니다. 특히 사용자 피드백을 지속적으로 수집하고 반영하여 실제 사용자들에게 가치 있는 서비스로 발전시켜 나가는 것이 가장 중요한 목표입니다.

프로젝트를 계속 발전시키며 실제 사용자들에게 도움이 되는 서비스를 만들어가는 과정을 경험하고 싶습니다.

13. 마치며

8주간의 DND 활동은 기술적 성장뿐만 아니라 협업 능력, 프로젝트 관리 능력 등 다양한 측면에서 성장할 수 있는 소중한 경험이었습니다. 좋은 팀원들과 함께 의미 있는 프로젝트를 완성할 수 있어 매우 뿌듯했습니다.

앞으로도 이번 경험을 바탕으로 계속해서 성장해나가겠습니다. 마지막으로 함께 고생한 팀원들과 DND 운영진분들께 감사의 말씀을 전합니다.

"프로젝트에 즐거움을, 모두에게 기회를" - DND의 슬로건처럼, 정말 즐겁고 값진 기회였습니다.

---

더 자세한 기술적 내용과 트러블 슈팅 경험은 별도의 게시글로 찾아뵙겠습니다. 감사합니다!