들어가기 전에

프론트엔드 개발자가 된 지, 만으로 딱 21개월 이 됐습니다. (짝짝짝)

부끄럽지만 개발자 1년차 까지는 '개발자가 개발만 잘 하면 되지' 라는 생각을 많이 했습니다. 하지만 현업에서는 개발 외 다양한 업무 가 정말 많았죠. (끝없는 회의와 미팅, 이슈 관리, 코드 리뷰, 테스트, 배포, 문서화, 기획, 디자인, 마케팅, 커뮤니케이션 등등...)

이번 글에서는 Vue.js 3와 TypeScript를 사용한 기상청 모바일 랜딩페이지 제작기를 써 보려고 합니다. 프론트엔드 개발자가 어떻게 프로젝트를 진행하고, 어떤 고민을 하며 개발하는지 가 궁금하신 분들에게 도움이 되었으면 좋겠습니다.

결과물

해당 결과물은 11월 2주차부터 해양기상정보포털 모바일페이지에서 확인하실 수 있습니다.

(모바일 기기로 들어간 뒤, 우측 상단에 닻 버튼을 눌러주세요.)

아이폰

안드로이드

프로젝트 소개

제가 다니는 회사는 SI 회사로, 기상청 으로부터 필요한 기능을 요구받아 개발하는 프로젝트를 진행했습니다.

해양기상정보포털 은 해양기상정보를 제공하는 사이트 로, 대국민 서비스 를 제공하고 있습니다. 대국민 서비스이다 보니, 모바일과 PC 모두에서 쉽게 이용 할 수 있어야 합니다.

기존의 모바일 페이지는 PC화면과 동일한 레이아웃 으로, 모바일 사용자들 이 불편함 을 느끼고 있었습니다.

기존의 페이지는 아래 사진과 같이 지도와 여러 지점들과 정보, 범례 등 많은 정보들이 산포 되어 있었고, 사용자들이 원하는 정보를 찾기 어려웠습니다.

그래서 모바일 개선사항으로 모바일 전용 랜딩페이지 를 제작하기로 했습니다.

진행한 회의

회의 1 : 기능 요구사항 정의

프로젝트 PM(부장님), 기획자와 회의를 통해 어떤 기능 을 어디에 넣을지 결정했습니다.

PM : 모바일 랜딩페이지를 제작해야 합니다. 제가 생각하는 레이아웃은 다음과 같아요. (스케치 보여주심) 기상청에서 요구한 부분은 주요항에 대한 랜딩 페이지 입니다. 주요항에 대한 정보를 한눈에 볼 수 있어야 하고, 기존의 모든 기능에 바로 갈 수 있는 버튼들이 있어야 합니다. 초안에 관련해 의견을 말씀해주세요.

기획자 : 디자인은 그렇게 나쁘진 않은 것 같은데, 정적인 내용들이 많은 것 같습니다. 인천항이 선택됐다면, 인천항에 대한 내용들을 이용자가 궁금해하지 않을까요?

나(FE) : 인천항에 대한 날씨나 온도, 파고 등에 대한 내용을 상단에 노출시키는 것이 좋을 것 같습니다. 그리고 해당 지점을 나타내는 작은 지도를 넣어도 좋을 것 같습니다.

이런 식의 회의를 통해 아래와 같은 기능들을 추가하기로 했습니다.

전체 : 대시보드, 지도, 단기예보, 포털 메뉴 내비게이션, 헤더, 푸터
대시보드 : 주요항 선택(즐겨찾기, 현재 위치정보에 따른 자동선택), 풍향에 대한 gauge chart, 기타 간단한 날씨 정보
지도 : 지도, 지도 레이어로 이동, 선택항에 대한 마커
단기예보 : 선택항에 대한 1시간 단위 예보, 날짜에 대한 탭, 날짜에 따른 line chart
포털 메뉴 내비게이션 : 포털 메뉴, 포털 메뉴 선택시 해당 페이지로 이동
헤더 : 로고, 메뉴, 지도로 이동
푸터 : 개인정보처리방침, 로그인/로그아웃, 저작권 정보

회의 2 : 디자인 컨펌 및 기술 검토

PM, 기획자, 디자이너, 백엔드와 함께 디자인을 어떻게 구성 할지, 개발에서 검토가 필요한 부분 은 어떤 것이 있는 지 회의를 진행했습니다.

기획자 : 저번 기획회의에서 말씀드렸던 기능들 바탕으로 디자이너께 디자인을 요청했습니다.

디자이너 : 디자인은 이렇게 구성했습니다. (Figma 초안 보여주심)

PM : 디자인은 괜찮은 것 같습니다. 다만 상단의 특보알람 부분은 현행 그대로 사용해도 될 것 같고, 즐겨찾기 버튼이 누락된 것 같습니다. 프론트에서 필요한 사항 있을까요?

나(FE) : 대시보드 gauge chart 부분이 원하는 요구사항대로 나올 지 걱정이 되는데, 이 부분은 기술 검토 후 말씀드리겠습니다.

PM : 그럼 기술 검토 후 다시 말씀해주세요. api는 새로운 명세가 필요할까요?

나(FE) : 기존의 api가 있지만, 불필요한 정보들이 많아서, 필요한 정보만 받을 수 있도록 api를 수정해야 할 것 같습니다.

BE : 기존의 api 로직을 활용해서 새로운 api 를 만들어야 할 것 같습니다. 이 부분은 프론트와 협의 후 진행하겠습니다.

회의 3 : 개발 계획 및 일정 검토

PM, 백엔드와 함께 개발 계획 을 세우고, 일정 을 검토했습니다.

PM : 프론트에서는 어떤 기술을 사용할 것인지, 개발 일정은 어떻게 되는지 말씀해주세요.

나(FE) : gauge chart나 line chart는 highchart를 사용할 예정이고, 전체 랜딩페이지 제작에는 80시간 정도 소요될 것 같습니다.

PM : 80시간이면 2주 정도 소요되겠네요. 너무 길지 않은가요?

나(FE) : 기존의 페이지를 수정하는 것이 아니라, 새로운 페이지를 제작하는 것이기 때문에 그렇게 예상합니다. iOS와 Android의 크로스 브라우징이나 반응형 부분도 고려해야 하구요. 게다가 gauge chart의 경우 난이도가 있고, 지도 레이어 추가나 레이아웃 잡는 부분에 디테일이 많이 들어가기 때문에 시간이 더 걸릴 것 같습니다.

BE : 제 쪽에서는 즐겨찾기 부분과 주요항에 대한 list , 단기예보 에 대한 새로운 api를 만들어야 합니다. 프론트와 상의해본 결과 3일 정도 소요될 것 같습니다.

PM : 그럼 프론트는 2주, 백엔드는 3일로 알겠습니다. 다들 고생 해주시고, 잘 마무리 지어봅시다!

이렇게

이렇게 하나의 기능에 대해 여러 사람들과 회의를 통해 기능 요구사항 을 정하고, 디자인 을 컨펌하고, 기술 검토 를 하고, 개발 계획 을 세우는 과정을 거쳤습니다.

이번 기능은 제가 예상한대로 2주 가량 소요됐습니다. 물론 저도 처음에는 정확한 시간을 예측하기 어려웠지만, 경험 을 통해 시간을 예측 하는 능력이 조금씩 생기고 있습니다. (하하..!)

다음 글에서는 디자인 을 받아서 Vue.js 3 와 TypeScript 를 사용해 개발 하는 과정을 써보겠습니다. 가장 처음 시작한 부분은 풍향에 대한 gauge chart 컴포넌트 제작 이었는데, 궁금하시다면 다음 글 을 기다려주세요!