seungkyu Lee
Aug 9 · 12 min read

안녕하세요. 저는 마이리얼트립에서 프론트엔드 개발을 담당하고 있는 이승규입니다. 이제 입사한 지 딱 1년이 되어가는데요.

첫 프로젝트인 <웹 상품상세 리뉴얼> 프로젝트를 진행하며 디자인팀과 qa팀 그리고 그 외에 많은 팀과 협업해볼 수 있었고, 그 이후에는 <호텔 메타서치> 라는 프로젝트에 합류하여 시니어 한 분과 프론트엔드팀 내에서 밀접히 협업하기도 했습니다.

이외에도 크고 작은 작업들을 진행하며 입사 후 1년간 프론트엔드팀 내에서 어떠한 일을 하였는지, 그리고 그 과정에서 프론트엔드팀이 어떻게 협업을 해왔는지 말씀드리려 합니다.

건너야 하지 말아야 할 강을 건넜던 과거의 나날들..

1. 같은 팀으로서의 협업

1) 팀 내에서의 task 관리

개발 전에 협업 workflow를 깃헙 issue로 함께 먼저 정해보고, 지속적으로 아래와 같이 본인의 개발상황 공유 및 점검을 하며 개발을 진행하고 있습니다. 이로 인해 유연한 역할분담 role change가 가능했던 것 같습니다.

A. 협업 전 workflow 점검

개발 전, 협업 work flow 협의 및 점검

B. 지속적 이슈 및 진행 상황 공유

깃헙 issue로 지속적 공유

C. 깃헙 대시보드 활용 진행 상황 점검

깃헙 대시보드와 PR, issue 연동하여 협업

2) 팀 내 정보공유와 적용

협업은 커뮤니케이션 과정에서도 일어날 수 있는데요. 저희 팀 내에서는 #프론트엔드팀_정보공유 라는 채널을 하나 파서, 지속적으로 정보를 공유하고 있습니다.

프론트엔드 생태계에서는 화수분처럼 쏟아지는 정보들이 많이 공유되고 있지만, 이러한 정보들이 공유되기만 하고 적용되지 않으면 무용지물이 될 테니까요!

(물론 적절한 정보인지, 꼭 적용해야 하는지가 우선시 판단되어야겠죠..!)

팀 내 채널에 공유되는 정보들..

팀 내에서는 공유에 끝나지 않고, 이러한 정보들을 사용하기에 적절한 상황인지 체크 후 바로 적용해보는 팀 내 공유 → 빠른 개발 적용이 이뤄지고 있습니다.

예시로 스켈레톤 UI를 구현하기 위해 여러 라이브러리를 사용할 순 있겠지만, 이런 라이브러리들로 인해 프로젝트의 크기가 늘어나고 불필요한 리소스 낭비가 생길 수 있습니다. css만으로 스켈레톤 UI 구현하는 글에 대한 공유가 있던 뒤 진행하고 있던 프로젝트에서 바로 적용해 보기도 했습니다.

팀 내 공유 -> 바로 적용

스켈레톤 UI?

스켈레톤 UI는 유저가 컨텐츠가 나오길 기다릴 동안 “덜 지루하게” “좀 더 빨라 보이도록”하는 기법 중 하나입니다. 사용자가 해당 컨텐츠를 다운로드하는 동안 말 그대로 뼈대 즉 틀이 되는 레이아웃을 해당 컨텐츠가 준비될 동안 노출시키는 기법입니다.

공유된 정보를 바탕으로, css만으로 구현한 스켈레톤 UI

3) 한 사람의 코드가 아닌, 한 팀의 코드를 만들어나가기 위한 노력

프론트엔드팀은 지속해서 서비스 코드를 한 사람이 짠 것 같은, 서로가 모두 알 수 있는 코드가 될 수 있게 개선해 나가고 있는데요.

제가 진행한 <웹 상품상세 리뉴얼>은 <호텔 메타서치>를 진행하기 이전에 진행되었고, 그 당시 navbar의 스크롤 기능에 따른 UI 업데이트를 구현하기 위해 불필요하게 scroll시 마다 state update를 하던 로직이 사용되고 있었습니다. 따라서 intersection-observer를 활용하여 추후에 구현한 <호텔 메타서치>에서의 상세 페이지 navbar의 로직을 동일하게 적용하여 개선해 나가기도 했습니다.

이처럼 이전에 개발된 내용이더라도 이를 리팩토링하며 성능 개선과 더불어 한사람이 짠 코드가 될 수 있도록 서비스의 코드들을 지속적으로 유지하도록 팀에서 노력하고 있습니다.

리팩토링 + 렌더링 성능개선 + 로직 일원화

4) 프론트엔드팀 내 리뷰 문화

프론트엔드팀은 안정적인 서비스를 만들기 위해, 리뷰 문화를 바탕으로 업무를 진행해가고 있습니다.

A. 그렇다면 주니어인 나는 리뷰만 받기에 급급해야 하나..?

저는 팀 내에서 연차가 높은 편은 아니지만, 더 나은 code quality 를 만들기 위해 함께 리뷰 문화를 만들어가고 있습니다.

  • 시니어만이 주니어에게 리뷰해야 한다..?! (X)
  • 리뷰는 연차와 상관없는 더 나은 코드를 만들기 위한 일련의 과정 (O)

B. 모르는 건 부끄러운 게 아니다..!

  • 의견 공유를 통해, 다 함께 더 좋은 코드를 만들 수 있다고 생각합니다. 모든 팀원이 서로 조언을 구하고 함께 해결책을 생각해보며 협업하고 있습니다.
js의 Date 만으로 충분히 해결 가능했고, moment-timezone 을 기존에 사용하지 않고 있었기에 불필요한 라이브러리 추가로 번들사이즈를 늘릴 필요 없음..!

C. 리뷰를 통해 얻은 또 다른 순기능..(?!)

ant-design docs와 실제 구현된 컴포넌트의 type 정의가 다른 것 리뷰

최근 얻은 리뷰의 순기능(?)이었는데요. ant-design을 활용해 개발을 하던 중 개발에 사용한 Table component의 selectedRowKeys property의 type정의가 docs 문서와 다르다는 리뷰를 남겨주셨고, 이 리뷰를 바탕으로 오픈소스를 수정하며 기여하기도 했습니다 :)

아직 커피를 쏘지 않았습니다.. 쓰읍

5) 더 나은 리뷰문화 만들기

그 외에도 다양한 도구, 방법들을 활용해 더 나은 리뷰 문화를 만들기 위해 노력하고 있습니다.

A. pull panda 사용하기

어떻게 하면 리뷰를 더 활성화 할 수 있을까 고민하던 찰나에 최근 깃헙에 PR 리뷰를 리마인드 하는 것을 도와주는 tool들을 제공하는 pull panda가 인수되었다는 것이 팀 내에 공유가 되었고, 이를 적극적으로 활용하고 있습니다.

시간을 정해 PR에 리뷰가 달리지 않을 때 리마인드를 해줄 수 있고, 슬랙 알림으로도 받아 볼 수 있게 됩니다.

팀에서는 pull reminder를 적극 활용하고 있는데요. 아래와 같이 알림을 받을 슬랙 채널을 정할 수 있고, 알림을 받을 repository와 알람을 받을 날과 시간 그리고 알람을 받지 않을 PR (ex: WIP인 PR들)등등을 customizing 할 수 있습니다. DM setting도 마찬가지입니다.

아래와 같이 panda bot이 하루 동안 리뷰(1 day stale)를 안 했다고 리뷰 독촉을 하고, 자연스럽게 리뷰를 하러 가게 됩니다..ㅎ

(팀원이 한 명 더 는 기분이랄까..)

B. GIPHY Capture로 PR 구현 내역 Demo 공유

PR은 단지 작업을 합치기 위한 행위가 아니라 매우 중요한 요소로 팀 내에서 생각되고 있는데요.

PR에 작업 내역 description을 text로 남기는 것뿐만 아니라 GIPHY Capture 라는 툴을 활용해 구현한 기능의 Demo를 gif로 함께 첨부해서 작업내용과 구현내역을 함께 파악하는 용도로 쓰고 서로의 작업 공유에 용이하도록 PR을 올리는 편입니다.

PR에 demo 첨부

하나의 팀으로 움직이는 만큼 팀 내의 긴밀한 협의, 공유 그리고 서로 간의 커뮤니케이션이 매우 중요한 것을 알 수 있었습니다.


2. 다른 팀과의 협업

팀 내 협업 이외에도 프론트엔드팀은 다른 팀들과 어떻게 협업하고 있는지 궁금하신 분들이 있으실 텐데요..! 프론트엔드팀에서는 화면개발을 많이 하다 보니 아무래도 QA(Quality Assurance)팀과 디자인팀과의 협업이 많습니다.

1) QA팀과의 협업

웹 상품 상세 페이지

제가 진행한 첫 프로젝트인 <웹 상품상세 리뉴얼>은 기존 ruby on rails 기반의 뷰를 react로 교체하는 작업이였습니다.

프론트엔드팀과 QA팀이 정말 긴밀히 협업하고 있다는 사실과 다른 팀과의 협업도 매우 중요하다고 깨닫게 된 계기이기도 했습니다.

함께 고생해준 QA 분께 이 사진을 바칩니다..

저는 QA 엔지니어와 처음 협업을 해보았는데, 많은 점을 느낄 수 있었습니다.

이전엔 제가 아는 범위 내에서 생각하고 개발을 끝냈었습니다. 하지만 이런 안일한 생각은 QA팀이나 본인이나 두 번 일을 하게 된다는 것을 깨닫고 서로의 불필요한 리소스 낭비가 일어나지 않도록 유의해야 함을 깨닫게 되었던 것 같습니다. 서비스 품질 면에서도 마찬가지이고요.

또한 전사 QA를 통해 물가에 아이를 내놓은 부모의 심정으로 사용자가 사용할 때를 미리 경험해 보며 전혀 생각지 못한 이슈들과 마주하기도 했었습니다..ㅎ (사용자에게 배포 전 미리 맞는 맴매랄까..)

여기서 깨달은 qa팀과 잘(?!) 협업하기

작업이 완료되었다고 jira 티켓의 상태만 바꾸는 것이 아니라, 아래와 같은 상세한 설명을 명시하려 노력하고 있습니다.

  • 해결한 이슈의 작업 이유 / 재현경로 / 예시 url

이렇게 상세히 공유함으로써 QA팀에서 개발이 덜 된 부분이나 잘못된 부분을 더 쉽게 찾아낼 수 있었고 더 안정적으로 서비스를 만들어나갈 수 있었던 것 같습니다 :)

2) 디자인팀과의 협업

디자인하는 프론트엔드, 개발하는 디자인 :-)

A. 디자인 QA

프론트엔드팀 내의 협업뿐 아니라 다른 팀과의 협업도 고민하고 있는데요. css 수정이 필요한 디자인 QA 수정이 있으면 디자인팀에서 바로 PR을 생성해 수정할 수 있도록 가이드를 드린 후 효율적으로 협업하고 있습니다.

B. 디자인 시스템

효과적인 협업을 위해 프론트엔드팀 내에서는 디자인팀에서 정의한 디자인 시스템을 바탕으로 공용 컴포넌트를 구축하여 개발하고 있습니다. 고객에게 일관성 있는 UI를 통해 일관된 유저 경험을 제공할 수 있으며, 개발 면에서는 빠른 프로토타이핑이 가능해지고 디자인팀과의 커뮤니케이션에도 용이합니다.

3. 이외에 본인은 협업을 위해 어떻게 노력하고 있는가..?!

1) 상세한 공유와 함께 배포

마이리얼트립에서는 매주 목요일 정기배포를 진행하고 있는데요.

어떠한 변경사항이 있는지 상세히 공유함으로써 배포 이후 발생하는 이슈들의 원인을 공유된 정보를 바탕으로 추측해 볼 수 있고 서로의 작업 건들을 다시 한번 remind 해 볼 수 있다고 판단하며 상세히 history를 남기고 있습니다.

2) 서로에 대한 이해

개발 직군이나 비 개발 직군 모두 서로의 전문성을 바탕으로 업무를 진행하고 있으므로 항상 다른 팀에 귀 기울이며 열린 마음으로 서로가 이해 할 수 있는 말로 대화하려 노력 중입니다. 당연하다면 당연한 내용이지만 항상 의식적으로 노력하고 있죠.

3) 커뮤니케이션 효율화 TIP

커뮤니케이션하는 시간들도 업무 중 많은 비중을 차지하게 되므로 불필요한 핑퐁이 오가지 않도록 메모장에 할 말을 미리 적어서 상대방이 바로 이해할 수 있을지 먼저 확인한 후에 슬랙이나 지라, 깃헙 등에 남기려 노력하고 있습니다.


마지막으로..

이 글에 다 적지는 못했지만 여러 작업을 거치며 협업의 중요성에 대해서 크게 깨닫고 팀 내의 협업문화를 함께 만들어나가게 된 것 같습니다. 물론 이러한 생각을 자연스럽게 하게 된 것 역시 팀 내의 협업문화 덕분이기도 하고요.

프론트엔드 개발자뿐만 아니라 모든 개발자들은 많은 협업을 합니다. 개발자이기 이전에 협업자이고 본인의 일을 처리하는 것도 중요하지만 회사 안의 같은 구성원으로서 어떻게 함께 일해 나갈지 항상 고민해야 한다는 것을 1년이라는 짧다면 짧고 길다면 긴 시간 동안 동료들과 함께 일하며 깨달아왔던 것 같습니다.

프론트엔드팀은 기술적인 고민은 물론, 같이 일하고 있는 동료와의 협업에 대해서도 치열한 고민을 하는 팀입니다.

마이리얼트립의 프론트엔드팀은 동료를 찾고 있습니다. 함께 협업하실 분은 아래의 채용 페이지를 망설이지 마시고 클릭해주세요 :)

https://career.myrealtrip.com/

How we build MyRealTrip

MyRealTrip Product Team Blog

Thanks to Sanghyeon Lee

seungkyu Lee

Written by

myrealtrip front-end developer

How we build MyRealTrip

MyRealTrip Product Team Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade