나우히어 FE 개발자, 도대체 무슨 고민을 했을까? 😲😲

앱? 웹?

나우히어팀이 가장 먼저 고민했던 것은 서비스 플랫폼의 형태입니다.

특정 기간 동안에만 사용할 수 있는 단발성 서비스인만큼 접근이 간편해야 하고, 특정 장소마다 이벤트가 분류되는 경우가 있어 현장에 부착된 QR 코드로 서비스에 접속할 수 있도록 해야 했습니다.

따라서, 별도의 설치가 필요없는 '웹' 플랫폼을 선택했습니다.

또한 사용자에게 가장 친숙한 모바일 UX/UI를 중심으로 화면을 설계했습니다.

개발 스택

개발 스택을 결정하면서 가장 중요하게 생각한 것은 딱 두 가지입니다.

1. 4주 안에 빠르게 개발 가능한가?

2. 앱처럼 보이는 모바일 웹을 구현할 수 있는가?

이 두 가지 기준으로 생각했을 때 바로 떠오른 것은 Vue 프레임워크였습니다.

Vue의 장점

1. SPA 프레임워크로, 화면 깜빡임을 최소화하고 부드러운 사용자 경험 제공할 수 있다.

2. React보다 러닝 커브가 낮아 빠르게 개발할 수 있다.

개발 스택의 중요한 기준 두 가지를 곧바로 충족시킨 Vue... 선택하지 않을 수 없었습니다.

협업은 어떻게 할까?

나우히어 프론트엔드 팀은 저를 포함한 두 명으로 이루어져 있습니다.

저는 Vue, React 등 SPA 개발 경험이 조금 있는 주니어 개발자.

다른 한 분은 UX/UI 디자이너지만 프론트엔드 개발에 도전하는 학생.

아기자기한 경력을 가진 두 사람이지만 어떻게 해야 협업을 잘 할 수 있을지 고민해보았습니다.

우선, 가장 일반적인 형상 관리 플랫폼인 Github를 사용하기로 했습니다.

그리고 개발 프로세스에 대해 아래와 같이 규칙을 세웠습니다.

1. 개발 이슈 작성

2. 개발 브랜치 생성 (이슈 번호 포함)

3. 각 브랜치에서 작업 수행

4. 로컬 테스트 진행

5. 상용 브랜치에 PR

6. 코드 리뷰 후 Merge

7. 상용 테스트

최초에는 개발 브랜치를 따로 두고 개발 서버도 운용하자는 이야기가 있었는데, 프로젝트 규모와 일정을 생각하면 기능 브랜치, 상용 브랜치로만 운용하는 것이 더 합리적인 것으로 보였습니다.

(개발 프로세스 확립을 위해 열심히 토론한 내용)

추후 서비스 규모가 확대되면 개발 브랜치 및 서버를 운용하는 것으로...ㅎㅎ

코드 아키텍처

이번 프로젝트를 통해 얻고자 했던 핵심 경험 중 하나, 코드 아키텍처입니다.

스타트업 SI 업체, 학생 프로젝트, 대기업 내부 프로젝트 등 다양한 코드 아키텍처를 겪어보면서

어떤 게 좋은 코드 아키텍처일까? 라는 고민을 하게 되었습니다.

이미 형성되어 있는 코드 아키텍처를 바꾸기엔 쉽지 않으니 이번 프로젝트를 통해서 새로운 코드 아키텍처에 도전해보자! 라는 생각이 있었습니다.

그래서 도입한 것은 클린 아키텍처입니다.

Entity, Usecase, Repository, Store를 사용하여 책임을 분리하고 추후 유지보수가 용이하도록 코드를 짰습니다.

예를 들어 member info에 대한 Entity를 정의하고 해당 도메인과 관련된 비즈니스 로직은 usecase에 작성했습니다.

그리고 http 요청과 응답과 관련된 로직은 Repository에 작성하고,

각 로직을 호출하여 최종 응답을 return하는 곳은 store로 정의했습니다.

위와 같이 특정 도메인(member)에 대해 Entity를 형성하고 관련 비즈니스 로직을 책임에 맞게 분리하니 개발하면서도 정리가 된 듯한 느낌이 들었습니다.

물론 아직 부족한 점들도 많겠지만, 실제로 부딪혀가며 개선해가는 과정을 가지려고 합니다 ㅎㅎ

향후 계획?

현재는 프로덕트를 런칭한지 일주일 정도 지났는데요.

생각보다 사용자 수가 많고 피드백도 많이 들어와서 할 일이 아주 많아졌습니다. (그래서 더욱 재밌습니다.)

유저 피드백을 바탕으로 애자일하게 기능을 꾸준히 개선 중이고, 기능 개선과 더불어 프론트엔드 코드 아키텍처에 관련하여 끊임없이 고민하고자 합니다.

이번 서비스는 한 달 동안 운영되기 때문에, 이번 운영 피드백을 바탕으로 더 나은 서비스를 만들어 두 번째 운영을 새롭게 오픈하는 게 저희 나우히어 팀의 목표입니다 :)

가을 축제 기간동안 운영되는 나우히어! 한 번씩 사용해보시고 피드백해주시면 정말 감사하겠습니다!

(실제 매칭되는 열 분께 베스킨라빈스 파인트도 드려요...)