피플
한 사람이 만든 것 같은 코드를 만듭니다
2023. 12. 22
안녕하세요. 대한민국 1등 뷰티 앱 화해입니다.
커머스, 광고, 검색 등 다양한 도메인, 그리고 어드민/웹뷰, B2B/B2C의 폭넓은 영역을 다루며
화해 서비스를 더욱 정교하게 만들어가는 프론트엔드 플랫폼팀.
다양한 비즈니스와 활발한 개발 문화를 통해 지속적으로 성장하고 있는 화해 프론트엔드 플랫폼에서는
여러 문제 상황을 효율적으로 해결하는 흥미로운 경험이 가능한데요!
더 자세한 이야기를 듣고 싶어 화해의 프론트엔드 플랫폼 리드 제훈 님과 인터뷰를 진행했습니다. 🚀
Q1. 자기소개와 리딩하고 계신 프론트엔드 플랫폼 소개를 부탁드려요!
안녕하세요. 화해에서 약 4년째 프론트엔드 플랫폼을 리딩하고 있는 박제훈이라고 합니다.
화해 프론트엔드 플랫폼은 B2B를 포함한 사내 모든 어드민과, 화해 앱의 웹뷰 그리고 웹 영역까지,
웹 기반으로 기여할 수 있는 영역들은 전부 담당하고 있는 플랫폼이라고 할 수 있어요.
즉, 구성원 모두가 성장을 꿈꾸고, 이 성장이 조직 전체의 성과로 기여되는 선순환을 통해 대한민국 1등 뷰티 앱 화해를 더 편리하게 만드는 것이 목표인 조직입니다.
Q2. 벌써 11년 차 개발자이신 제훈 님! 그간의 커리어가 궁금해요.
대학원에서 그래픽스를 전공하고, 안드로이드 개발부터 시작해 윈도우 프로그램, Unity, Action Script를 거쳐, 지금 최종적으로 웹 프론트엔드로 정착했어요.
본래도 그림 그리는 것을 좋아하는데, 프론트엔드는 화면에 제가 상상했던 것을 그려내는 업무 인지라 마냥 흥미로웠어요. 그래서 더욱 플랫폼을 가리지 않고 다방면으로 뛰어들어 경험을 쌓았습니다.
꾸준히 프론트엔드를 담당하던 중 처음 html5가 도입되었을 때, 단순 스크립트 작업에서 나아가 모바일에서까지 리치한 인터렉션이 가능한 환경으로 변화되는 모습, 또 브라우저 동작 영역이 확장되는 것을 직접 지켜보다 보니 프론트엔드 개발자로서 훨씬 재밌는 일들을 할 수 있겠다고 판단했어요.
이후 꾸준히 프로토 타이핑 실험 과제 수행, 모바일 웹뷰 환경 서비스 운영, electron 기반의 웹 어플리케이션을 제작 등의 경험을 다양한 플랫폼 구현의 강점을 살려 현재 화해팀에서 일하고 있습니다.
Q3. 신입 개발자부터 프론트엔드 리드가 되기까지, 가장 기억에 남는 순간은 언제인가요?
새로운 기술이었던 react를 처음 제안했던 순간이 가장 기억에 남아요.
프론트엔드라는 개념이 보편적으로 정착되기 전에는 jquery로 대부분의 프로젝트 코드를 작성했고, 막 angluar와 같은 ui framework를 활용하려던 시점이 있었는데요.
새로운 기술 도입을 고민하던 중, 동료들과 재미로 맛집 정보를 제공하는 웹을 react를 기반으로 만들어 봤어요. 회사 업무 외의 시간을 전부 써서 2달 꼬박 진행해 완성했죠. 이후 버그 픽스도 참 많았지만 개선 사항들을 다시 구현하는 것을 반복했어요. 이 경험을 통해 react의 업무 활용 가능성을 엿보았고, 이후 회사에서 사용되는 대부분의 웹 프로젝트를 react 기반으로 만들 수 있게 되었습니다.
지금까지도 새로운 기술들을 빠르게 학습하고 도입을 제안하게 된 계기가 이때부터였던 것 같아 기억에 아직도 깊게 남아있어요.
Q4. 화해에서 새롭게 도입하거나 화해에서만 시도할 수 있었던 것이 있다면 무엇일까요?
화해팀에 처음 합류하고는 모노레포 도입을 위한 여러 시도를 했어요. 그리고 1년 정도 도입했다가 중단했습니다. 네, 실패였어요.
회고해 보니 서비스 개발에 바빠, 모노레포 유지 보수에 어려움을 겪었기 때문이란 것을 발견할 수 있었어요.
그 후 다시 모노레포 생태계 리서치에 시간을 들여 다른 방식을 고민했고, 우리 기술 스택에 맞추는 과정을 거쳐 현재 모노레포 시스템을 정착시켰어요. 현재 도입된 모노레포 시스템 및 모노레포가 무엇인지에 대해서는 저희 팀원분이 작성해 주신 글을 참조하시면 도움 될 것 같습니다.
올해는 내부 디자인 시스템인 HDS (Hwahae Design System)을 만들고 적용 범위를 넓혀나가고 있는 중인데요. 화해는 최대한 효율적인 방향에 대해 제안을 하고 성과를 낼 수 있는 곳이라 이 모든 게 가능했다고 생각해요. 화해에서 디자인 시스템을 도입했던 과정도 화해 블로그에서 확인할 수 있으니, HDS 도입 이유와 그로 인해 해소하고자 했던 문제들은 어떤 것인지도 한 번 살펴보실 수 있을 거예요.
프론트엔드 플랫폼 내에 디자인 시스템을 전담해 주는 역할을 해주는 파트도 함께 생성되어 올해 HDS 1.0을 완성을 시작으로, 지속 고도화 해나갈 예정이니 많은 응원과 관심 부탁드립니다 😊
Q5. 화해의 각 도메인 속 프론트엔드는 어떤 역할을 하고 있는지도 궁금해요.
화해는 도메인이 크게 광고, 쇼핑, 제품 영역으로 나뉘어져 있어요.
광고 도메인 소속 프론트엔드 개발자는 광고 기획 페이지를 웹뷰로 구현하고, 광고주와 광고 사업부들을 위한 B2B 시스템 등을 만들어 나아가고 있어요. 화해를 주요 광고 수단으로 활용해 주시는 브랜드사 제품들을 유저들이 더 주목할 수 있도록 리치한 인터렉션이나 게임들이 포함된 페이지들을 구현하기도 합니다.
쇼핑 도메인은 브랜드 사와 내부 커머스 사업팀을 위한 B2B 시스템을 운영하고, 다양한 화해의 커머스 전략 과제들을 서포트 하고 있습니다. 특히 올해는 레거시 개전에 집중해 대부분을 신규 시스템으로 이관하는 작업을 완료했어요.
마지막으로, 제품 도메인은 버드뷰 내부 운영자들을 위한 통합 운영 어드민을 운영하고 있습니다. 그 외적으로 출석 체크나 날씨 체크, 친구 초대 같은 그로스 과제들을 빠르게 개발하여 그로스 활동들을 지원하였고, 지금도 더욱 다양한 그로스 영역들을 웹으로 만들어가고 있습니다.
그리고 지금도 각 도메인에서는 더 새로운 경험 제공을 위한 여러 그림을 그리고 있는 중입니다.
Q6. 결국, 화해 프론트엔드 플랫폼이 앞으로 집중하고자 하는 ‘키워드 3가지’는 무엇일까요?
현재 프론트엔드 플랫폼에서 집중하고 있는 성과는 아래 3가지입니다.
- 공통 라이브러리
- 최근 모노레포로 운영하는 대부분의 서비스가 마이그레이션 된 상태이고, 각자가 담당하는 영역들이 하나의 도메인만 바라보지 않도록 방향성을 잡았기 때문에 각자의 밴드에서 만들어갔던 공통적인 요소들을 잘 추상화하여 공통적으로 빼내는 것에 초점이 맞춰져 있습니다.
- 기존에 프론트엔드 플랫폼에서 담당하던 영역들이 어드민, 웹뷰에서 공통적인 요소들이 많이 있었어서 최근 웹뷰 환경 표준화라는 과제가 시작되었고 외적으로 공통 기능들을 다 같이 사용 가능하도록 바꿔나아갈 예정입니다.
- 디자인 시스템
- 모든 유저에게 일관적인 사용 경험을 제공하기 위해 디자인의 통일성을 갖추기 위함입니다. 한편으로는 제품을 만들어가는 제품 조직 내 메이커 분들은 고도화된 공통 기능들을 재사용함으로써 디자인/개발 속도를 향상시킬 수 있습니다.
- 현재 디자인 시스템은 1.0이 출시된 상태인데 1.0은 화해 앱, 웹뷰만을 포함하고 있었고, 지금은 웹 영역으로 더 넓히기 위한 것들을 진행하고 있습니다.
- 테스트
-
- 현재 스펙들이 없던 과제들을 유지 보수해야 하거나, 통합 테스트를 손 테스트로 반복적으로 해야 하는 경우가 있는데, 가능한 부분들은 손 테스트를 줄여나가고 테스트 코드를 기능의 스펙으로 활용할 수 있는 방법들을 고민하고 있습니다.
마지막으로, 저는 이곳에 합류한 이후 만든 한 가지 비전인 “플랫폼은 마치 한 사람이 만든 것 같은 코드를 만든다.”를 이루고자 해요.
그 과정으로 모노레포를 활용해 서비스들을 한곳에 모으고, eslint 표준을 만들어 코드 스타일을 맞추거나 에러 관리, 공통 fetch 모듈과 같이 공통적으로 써야 하는 기능들을 모노레포로 함께 사용하고 서로 기여할 수 있는 형태의 문화를 만들어 왔어요. 그와 함께 디자인 시스템을 도입하여 컴포넌트들 또한 서비스들에 지속 마이그레이션 하는 작업을 진행하는 것도 같은 맥락입니다.
내부 공통 기술로 누구나 유사한 정도로 개발해 나아갈 수 있고 비지니스 로직에 보다 집중해 개발 시간을 단축, 회사의 목표를 빠르게 달성할 수 있도록 하기 위함이에요. 다른 한편으로는 구성원 모든 분들이 다양한 영역을 경험하면서 성장해 나아가길 원하고 있어요. 내년에는 테스트 코드를 제품 스펙으로 활용할 수 있도록 방향성을 잡아가는 과정 중에 있습니다.
Q7. 개발 과제만큼이나 자랑하고 싶은 화해만의 특별한 개발 문화가 있다면요?
어느 일부분을 꼽기보단 개발자들이 당연하다고 생각할 수 있는 것들을 지속할 수 있는 문화라는 점이 특별하다고 생각해요.
화해팀은 성장과 나눔에 강점이 있다고 알려진 바와 같이, Today I Learned(TIL) 작성을 통해 사용된 기술, 설계 철학들을 서로 공유하고 저희들의 공통 규칙들을 끊임없이 나누고 제안해왔어요.
매주 금요일에는 밋업과 회고를 통해 각자가 힘들거나 어려워하는 부분들을 세심히 듣고, 높은 심리적 안정감을 제공해 문제를 해결하는, 그 기본적인 문화를 지속 지켜나가고 있습니다.
구성원 모두가 제안하고 싶거나 필요한 내용들, 혹은 알리고 싶은 내용들을 자유롭게 공유하며 성장의 선순환이 이뤄지는 곳이라고 할 수 있어요.
Q8. 마지막으로 프론트엔드 개발자를 꿈꾸는 분들에게 한마디 부탁드려요 🤗
프론트엔드는 변화가 빠르고, 기민하게 움직여야 해요. 그리고 브라우저가 돌아가는 환경에서 모든 것을 도전해 볼 수 있어 매력적입니다. 그만큼 매번 새로운 걸 좋아하는 분들에게는 더욱 재미있을 수 있는 영역이라 생각해요.
현재 프론트엔드 구성원분들은 모두 일을 재미있게 만드는 분들이에요. 단순해 보이는 경험에서도 성장할 수 있는 부분들을 찾아내고 본인의 것으로 만들 줄 알고 즐깁니다. 특히 어려운 과제들을 발견했을 때도 우리는 기피하지 않고 ‘맛있어 보인다’라는 표현을 많이 해요.
또, 의미 있는 경험들을 하거나 플랫폼에 공유하고 싶은 내용들이 있다면 밋업이나 별도의 시간을 내서 공유하는 것들을 즐겨요. 그런 분들과 계속 함께 해왔고, 앞으로도 그런 분들과 함께 업무를 하고 싶습니다.
빠른 변화를 즐기고, 집요하게 기술 문제를 해결하는 흥미로운 과정을 프론트엔드 개발자로서 꼭 경험해 보시면 좋겠습니다.
화해 프론트엔드 플랫폼은 다양한 도메인, 그리고 B2B/B2C은 물론, 스펙트럼이 넓은 유저를 타겟으로 오늘도 도전적인 과제를 수행 중이에요.
인생에서 가장 잘한 결정이 첫째, 개발자가 되기로 한 것, 둘째, 그중 웹에 관심을 가진 것이라는 화해 프론트엔드 플랫폼 제훈님의 이야기! 화해팀을 알아가시는 데 도움이 되셨길 바랍니다.
성장은 물론 공유도 소통도 지식 나눔도 멈추지 않는 화해 프론트엔드 플랫폼의 여정을 앞으로도 지켜봐 주세요! 👏
이 글이 마음에 드셨다면 다른 콘텐츠도 확인해 보세요!
✅ React의 hydrarion mismatch 알아보기
