오늘의집 프론트엔드는 어떻게 일하나요?
버킷플레이스 프론트엔드 챕터를 소개합니다.
2021년 7월 27일

안녕하세요. 오늘의집에서 프론트엔드 챕터를 이끌고 있는 존입니다.

‘Tech Company를 지향하는 버킷플레이스 개발 문화’ 글에서 진식님이 이야기 해주셨듯 오늘의집은 프로덕트 개발팀과 기능적 개발팀으로 나뉘어져 있는데요. 개발자들의 전문성을 높여줄 수 있어야 하기 때문에 오늘의집은 챕터라는 개념의 조직도 함께 운영하고 있습니다.

현재 오늘의집에 존재하는 기술 챕터는 크게 프론트엔드, 백엔드, 모바일로 나뉘어져 있으며 각각의 챕터 리드가 기술 전반에 대한 의사 결정에 참여하고, 우리가 가진 비즈니스 문제들을 어떤 기술을 활용해서 해결 가능할 지에 대한 고민을 각 챕터 리드가 수행하고 있습니다.

프론트엔드 챕터는 그 중에서도 웹과 관련한 다양한 문제들에 직면하고 해결하고자 노력하고 있습니다. 이미 진식님이 기술 조직 전반의 문화에 대해서는 이야기를 주셨기 때문에, 이 글에서는 프론트엔드 챕터의 기술 문화에 대해서 이야기 나누고자 합니다.

프론트엔드의 범위

우선 사내 표준 라이브러리로는 React 를 사용하고 있고, TypeScript 도 기본적으로 사용하고 있습니다. 이는 프론트엔드 프로젝트에 한정된 게 아니며, 사내에서 JavaScript 기반의 개발 환경을 구축할 때에는 TypeScript 사용을 권장하고 있습니다.​​

버킷플레이스의 프론트엔드 개발은 ‘웹 브라우저에서 돌아가는 애플리케이션을 만드는 것’ 에만 초점을 맞추고 있지 않습니다. 오히려 ‘웹 클라이언트가 돌아가기 위한 모든 환경을 이해하되, 자신의 전문 분야를 웹 프론트엔드 개발로 했다’에 조금 더 가깝습니다.

백엔드 개발자분들이 작업해준 API 서버를 어떻게 Aggregation 할 지, 클라이언트 렌더링 방식은 어떻게 가져갈 지, 클라이언트 서버는 어떻게 구축할 지, 배포 및 장애 대응 사이클을 어떻게 돌릴 지 등 웹에서 발생하는 모든 이슈들에 대하여 프론트엔드 개발자들이 관여하고 있습니다.

또한 새로운 방향성으로 BFF (Backends For Frontend) 레이어를 구축하거나, GraphQL 을 사용하는 백엔드 레이어를 만드는 등 다양한 기술적 챌린지를 준비하고 있습니다.

기술 원칙

고객에게 더 좋은 사용성을 제공하며, 프론트엔드 개발자의 생산성 향상에 도움이 된다고 판단되는 모든 기술 선택에 대해 열려있습니다. 또한 업계의 트렌드를 분석하여 우리 비즈니스에 적합하다고 생각되는 기술들에 대해서 선제적으로 연구하고 도입하는 것 또한 고려하고 있습니다.

다만 어떤 기술을 도입할 지에 대해서 결정할 때, 개발자 개인이 가지고 있는 철학에 따라서 기술의 옳고 그름이 판단되기보다 프론트엔드 챕터 구성원들이 가지고있는 철학을 문서로 만들어 배포함으로서 기술 논의의 기반을 마련하여야한다고 생각하였습니다. 따라서 저희는 기술 원칙을 작성하고, 기술 원칙을 바탕으로 서로 토론하고자 합니다.

1. 실행은 개인이, 책임은 시니어에게

  • 기술 논의를 바탕으로 나온 모든 논의 결과를 실제로 서비스에 적용하는 일은 개인이 진행합니다.
  • 추가로 논의가 필요하거나, 어떻게 구조를 설계하면 좋을 지, Flow를 어떻게 그리면 좋을 지 등에 대해서는 필요하다면 시니어와 함께 논의할 수 있습니다.
  • 미리 공유하였다는 전제 하에 모든 기술적 의사 결정에 대한 책임은 시니어에게 있습니다.

2. 고객에게 더 나은 경험 제공하기

  • 어떤 기술적인 우선순위를 결정할 때에는 언제나 고객 중심 사고를 바탕으로 진행합니다.

  • 리팩토링, 테스트 코드 작성, 테스트 커버리지 향상 등 기술적으로 필요한 태스크일지라도 고객을 언제나 배경으로 하여 업무를 진행합니다.

  • 어떤 기술을 도입함으로서 고객에게 더 안좋은 사용자 경험을 제공할 가능성이 있다면 해당 기술에 대한 도입은 다시 검토합니다.

3. 샌드박스 환경에서 개발하기

  • 프론트엔드 만으로도 서비스가 동작할 수 있는 환경에서 개발합니다. 여기서 말하는 프론트엔드는 클라이언트 개발자가 작성한 애플리케이션 서버 및 BFF를 포함합니다.
  • 백엔드에서 문제가 생겼을 때에 프론트엔드 전체에 영향을 미치지 않도록 격리 환경을 구축합니다. 

4. 갈라파고스화 되지 말자

  • 버킷플레이스 프론트엔드에서만 사용하는 기술은 지양합니다.
  • 오픈소스를 적극적으로 활용하되, 오픈소스를 활용할 때에는 오픈소스 활용 원칙을 준수합니다.

5. 코드 리뷰

  • 긴급 대응을 위한 Hotfix 작업이 아닌 모든 코드는 반드시 코드 리뷰를 진행합니다.
  • 코드 리뷰 시에는 시니어를 포함, 최소 2명 이상이 Approved 를 하였을 때 머지합니다.
  • 코드 변경점이 많은 경우에는 오프라인이나 화상 미팅으로 코드 리뷰를 진행합니다. 이 때, 이 미팅은 모든 FE 개발자를 대상으로 하며 가급적이면 코드 변경점을 적게 가져갑니다.
  • 페어 프로그래밍을 진행했더라도 코드 리뷰는 반드시 진행합니다. 

더 나은 웹 클라이언트를 위해

웹 기술이 발전하고, 프론트엔드 기술력에 대한 요구사항이 높아지면서 자연스럽게 프론트엔드 개발자가 해야하는 범위도 넓어졌습니다. 버킷플레이스 프론트엔드 챕터는 더 나은 웹 클라이언트 개발을 위해 여러가지 시도를 하고, 그 시도를 바탕으로 현재 상황에서 가장 적절한 비즈니스 선택을 하고 있습니다.

현재 저희가 고려 중인 테크 스택은 다음과 같습니다

  • Next를 기반으로 하는 Server Side Rendering, Static Site Generation
  • GraphQL based Web Application (현재는 Apollo 사용)
  • BFF (Backends For Frontend)
  • React-based Web Editor
    : 콘텐츠 작성을 위한 콘텐츠 에디터
    : 페이지 작성을 위한 페이지 빌더
  • Company-wide Design System

오늘의집 프론트엔드 챕터는 고객에게 더 나은 서비스를 제공하기 위해서 다양한 기술적 고민을 하고 있습니다. 그 과정에서 고객을 넘어 우리 스스로가 자부심을 느끼고 일할 수 있는 문화를 만들 수 있도록 다양한 고민을 하고 있습니다.

더 나은 오늘의집을 만들기 위한 여정에 참여해보시고 싶으신가요? 지금 지원하세요!

오늘의집에서 당신을 찾고 있습니다!
Engineering Manager, ApplicationsSenior Technical Program ManagerSenior Software Engineer, BackendSoftware Engineer, BackendSenior Software Engineer, FrontendSoftware Engineer, FrontendSenior Software Engineer, AndroidSoftware Engineer, AndroidSenior Software Engineer, Machine LearningSoftware Engineer, Machine LearningSenior Software Engineer, Machine Learning, Extended RealitySenior Software Engineer, Vision ML
목록으로 돌아가기