웹 서비스 개발 과정에서 프론트엔드 개발이라는 역할이 생긴 지 그리 오래되지 않았다.
초기에는 간단한 웹 문서를 보여주는 수준에서 시작하여,
이제는 거대한 애플리케이션을 개발하는 단계까지 많은 발전을 거쳤다.
프론트엔드의 발전과정에 대한 좋은 글이 있어 남겨둔다.
https://yozm.wishket.com/magazine/detail/1289/
시니어 개발자가 말하는, 프론트엔드 역사와 미래 | 요즘IT
웹 프론트엔드는 웹 서비스 발전에서 막내 격으로 생긴 포지션입니다. 프론트엔드라는 영역이 갑자기 생겨난것은 아니지만 지금처럼 이렇게 선명하게 프론트엔드와 백엔드가 세분화된 배경에
yozm.wishket.com
위 글에서도 언급하듯이 이렇게 최근에는 간단한 문서를 넘어 다양한 웹 서비스가 등장했고,
React, Node 등의 프론트엔드 생태계도 크게 성장하고 있다.
이에 따라 프론트엔드 개발 분야도 복잡해지고 세분화되고 있다.
2024년 글을 작성하는 지금,
기업에서 필요로 하는 프론트엔드 개발자들의 역할을
명확히 이해하는 것이 필요하다고 생각하게 되었다.
그래서 나의 경험과 여러 채용 공고를 통해
프론트엔드 개발의 세부 역할을 나름대로 분류하였다.
이 글은 주관적인 분류로, 공신력을 띄는 것은 아니다.
"이런 것들이 있구나" 하고 참고용으로 재미있게 봐주었으면 좋겠다.
주로 IT 서비스 회사 내 백엔드(서버 개발)와 프론트엔드 역할이 명확히 분리된 조직을 기준으로 작성하였다.
또한 회사마다 세부 조직 구조와 팀 구성이 다를 수 있다.
어떤 회사에서는 언급할 팀들이 모두 존재할 수 있고,
다른 회사에서는 한 명의 프론트엔드 개발자가 여러 역할을 동시에 수행할 수도 있다.
소개하는 팀의 이름이 같아도 조금씩 다른 방향성을 띨 수도 있다는 점도 알아두길 바란다.
: 주의 :
이 글에서 소개된 채용공고나 팀의 소개 글 중
이미 마감/비공개된 채용공고, 현재는 사내에서 변경된 조직이 있을 수 있으나,
해당 역할에 대한 부가 설명을 위해 첨부한 것을 알림
External vs Internal Product
처음 개발을 배우거나 취업 준비 중일 때는, 개발자가 직접 사용자가 볼 수 있는 서비스만 다루는 줄 알았다.
그러나 실제로 업무를 해보니,
회사의 서비스를 관리하거나 내부 직원들이 사용하는 프로그램을 개발하는 일도
중요한 부분임을 알게 되었다.
그래서 프론트엔드 개발의 역할을 크게, External Product와 Internal Product로 구분해 보았다.
External Product
일반 사용자(B2C)나 기업 고객(B2B)을 위한, 우리가 일반적으로 흔히 접하는 SW 서비스의 형태이다.
웹 사이트, 모바일 애플리케이션, 웹뷰, SDK 개발, 데스크톱 애플리케이션 등 이 포함된다.
또한 그로스(Growth) 팀을 통해 데이터를 기반으로 한
사용자 경험 개선과 전환율 최적화, A/B 테스트 같은 작업을 담당하는 역할도
External Product의 범주에 두었다.
Internal Product
회사 내부 직원들이 업무를 효율적으로 수행할 수 있도록 돕는 프로그램들로,
어드민 페이지, 사내 관리 도구, 프론트엔드 인프라 관리 및 사내 패키지 개발 등 이 포함된다.
여기에는 디자인 시스템과 유틸리티 패키지 등을 포함한 더 나은 개발 환경을 지원하는 작업도 포함된다.
이처럼 프론트엔드 개발자의 작업 범위를
외부 사용자를 위한 제품과 내부 사용자를 위한 제품이라는 두 가지 큰 분류로 나누었다.
External Product - Product Team
External Product에서 Product Team은 우리가 흔히 떠올리는 사용자 중심의 서비스 개발을 담당한다.
이 팀은 회사의 주요 기능들을 사용자에게 제공하기 위한 개발을 책임지며,
웹, 웹뷰, 모바일 애플리케이션에 걸쳐 서비스의 핵심 기능을 제작한다.
Web
- 주로 SaaS 서비스(B2B, B2C), 커머스, 커뮤니티, 에디터 등 다양한 웹 서비스를 개발한다.
- 일반 사용자에게는 보이지 않지만 기업 고객(주문 정산 시스템 등)을 위한 웹 서비스도 개발한다.
Webview
- 취준생 시절 앱 중심 회사인데 웹 프론트엔드 개발자를 채용하는 이유를 몰랐다.
- 알고 보니 앱 내부에 웹 페이지를 띄우고 있어 웹 프론트엔드 기술이 필요했던 것이다.
- 웹뷰는 네이티브 앱(AOS, IOS) 안에 웹 페이지를 띄우는 기술로, 네이티브와 웹의 장점을 혼합한 환경을 제공한다.
- 네이티브 브릿지 통신이나 스택 관리, 탭 간 동기화와 같은 기술을 활용해 앱과 웹 간의 상호작용을 다룬다.
- 단순 웹 개발과는 또 다른 독특한 개발 경험을 제공한다.
- 관련 자료
https://stackflow.so/ko/docs/get-started/introduction
Stackflow
Headless Architecture Use stack and transition states without pre-built UI, allowing full customization.
stackflow.so
https://devblog.kakaostyle.com/ko/2022-10-12-1-sync-data-between-activities/
웹뷰 액티비티간 데이터 동기화하기
지그재그 에픽 서비스는 여러 웹뷰를 사용하도록 구성되어 있습니다. 한 화면에서 변동된 데이터를 다른 화면에 반영해야 하는 기술 이슈가 발생했는데 이를 해결한 방법에 대해 설명합니다.
devblog.kakaostyle.com
FEConf 2023 [A4] 이벤트 기반 웹뷰 프레임워크 설계와 플러그인 생태계 만들기
Mobile (React Native)
- 모바일 앱 개발 또한 프론트엔드 개발자들이 참여하는 경우가 많다.
- React와 일부 네이티브 지식을 결합하여 하이브리드 앱을 개발할 수 있는 React Native를 활용한다.
- 웹과 모바일 앱 간의 코드 재사용성을 높이고, 빠르게 모바일 환경에 대응할 수 있는 장점이 있다.
- 관련 자료
https://toss.tech/article/react-native-2024
토스가 꿈꾸는 React Native 기술의 미래
토스 프론트엔드 챕터는 어떻게 React Native 기술을 발전시켜 나갈 예정일까요?
toss.tech
배민도 React Native 해요?: 웹개발자들이 만들어 나가는 배민커넥트앱 이야기 #우아콘2023 #우아한형제들
External Product - Growth Team
Growth Team은 서비스를 지속적으로 성장시키기 위해 데이터 기반의 개발과 분석을 담당하는 팀으로,
프론트엔드 개발자도 이를 위한 다양한 기술을 활용하게 된다.
고객 데이터와 피드백을 기반으로 빠른 가설 검증을 통해 제품 성장을 가속화하며,
이를 통해 사용자 경험을 개선하고 제품의 전환율과 참여율을 높이는 것이 핵심 목표다.
애널리틱스 지표 수집
- 사용자 행동 패턴을 분석하기 위해 Google Analytics, Mixpanel 같은 분석 도구를 사용하여 다양한 지표를 수집하고 해석한다.
- 사용자 이벤트를 추적하고 데이터를 수집하는 코드를 작성해, 사용자 경험을 개선할 수 있는 방향성을 도출한다.
A/B 테스트
- 다양한 기능이나 디자인을 실험하기 위해 A/B 테스트 도구를 사용하여 최적의 사용자 경험을 찾아낸다.
- 프론트엔드 개발자는 각각의 실험에 따른 사용자 반응을 확인하고, 이를 분석해 개선 방향을 결정할 수 있도록 데이터를 제공한다.
External Product - FE SDK Team
SDK Team은 회사의 특정 서비스나 기능을 외부 파트너나 고객이 활용할 수 있도록 소프트웨어(SDK)를 제공하는 팀이다.
예를 들어, 결제 모듈이나 통신 모듈처럼 외부 서비스에서 쉽게 통합해 사용할 수 있는 SDK가 이 팀의 주요 제품이다.
이와 같은 SDK는 외부 고객을 위한 솔루션이므로 External Product로 분류했으며, 높은 수준의 설계와 성능이 요구된다.
- SDK는 여러 파트너와 고객이 사용하기 때문에 하위 호환성, 확장성, 직관성이 매우 중요하다.
- 인터페이스 설계에 대한 깊이 있는 고민이 필요하며, 다양한 요구사항을 반영하여 인터페이스를 유연하게 설계한다.
- SDK는 외부 애플리케이션에 통합되어 사용되므로 초기 로딩 속도, 반응성 같은 성능 요소가 핵심이라 한다.
- 관련 자료
광고 웹 SDK 개편기 with Preact / if(kakao)2022
Internal product
Internal product는 크게 2가지로 나누어 보았다.
(internal) platform -> (FE 개발자들을 위한 개발 환경(플랫폼)을 제공해 주는 것)
(internal) product -> (사내 직원들의 툴로서 사용되는 내부 제품)
으로 나누었다.
Internal Product - Platform (FE Core) Team
Platform (FE Core) Team은 회사 내부에서 사용하는
디자인 시스템, 프론트엔드 인프라 관리(FeOps), 내부 공용 라이브러리 등을 개발 및 유지보수하는 팀이다.
이 팀은 내부 개발자들의 생산성과 효율성을 높이기 위해 안정적인 개발 환경을 제공하며,
SSR 서버 설정과 모니터링, 정적 리소스 서버 최적화 등 과 같은 인프라 운영도 담당한다.
Design System
회사 전반에서 일관성 있는 디자인을 유지하기 위해 공통 UI 컴포넌트와 스타일 가이드를 구축하고 관리한다.
이는 디자이너와 개발자 간의 소통을 원활하게 하고, 서비스 전반의 사용자 경험을 통일시킨다.
- 관련 자료
우아한형제들의 새로운 디자인 시스템 '우아한공방'을 소개합니다: 개발 편 #우아콘2023 #우아한형제들
FECONF 2022 [B1] 디자인 시스템, 형태를 넘어서
FeOps
FE와 관련된 인프라들을 관리하며 내부 서비스를 안정적으로, 빠르게 개발할 수 있도록 도움을 준다.
- 관련 자료
FEConf 2024 [B5] 7가지 플랫폼 서버로 프론트엔드 버프 마법 걸기
Developer Experience (DX) 개선을 위해 개발자들이 공통으로 사용하는
내부 라이브러리와 유틸리티를 구축하고 관리도 한다.
- 관련 자료
FECONF 2022 [B2] 일백개 패키지 모노레포 우아하게 운영하기
Frontend Platform (Core) 팀이 이루고자 하는 목표, 역할, 담당업무에 대한
자세한 이야기를 잘 정리해 둔 아티클이 있어 공유해 본다.
프론트엔드 개발환경의 미래를 그리는, Frontend Platform 이야기
프론트엔드 개발환경의 미래를 그리는, Frontend Platform 이야기
안녕하세요, 토스에서 프론트엔드 엔지니어링 헤드로 일하고 있는 박서진입니다. ⚙️토스는 프론트엔드 개발자의 전문성을 높이기 위한 조직인 Frontend Platform Team이 있는데요. 토스의 프론트엔
toss.im
Internal Product - Product Team
Internal Product Team은 회사의 내부 직원들이 사용하는
어드민 페이지 및 내부 관리 프로그램을 개발하는 팀이다.
이 팀은 회사의 운영과 관리 업무를 효율적으로 지원하여 내부 사용자들이 필요로 하는 기능을 제공한다.
Product Admin Page (Backoffice web)
- 회사의 제품과 관련된 설정 및 관리를 위한 어드민 페이지를 개발한다.
- 이를 통해 데이터 관리와 설정이 중앙에서 이루어져, 운영 및 관리를 효율적으로 수행할 수 있다.
Internal Manage Program
- HR, 재무, IT 등 다양한 내부 부서의 업무를 돕는 내부 관리 도구를 구축한다.
- 예를 들어, 직원 관리, 데이터 보고 시스템, 사내 봇 등 내부 사용자들이 사용하는 프로그램을 개발하여 업무 효율성을 높인다.
이처럼 Internal Product 팀은 회사의 내부 업무와 운영을 돕기 위한 다양한 툴과 시스템을 개발하며,
Platform Team과 Product Team의 협력으로 내부 직원들이 최적의 환경에서 업무를 수행할 수 있도록 지원한다.
- 관련 자료
노 코드 웹앱 빌더 만다오, 3년의 여정 #우아콘2023 #우아한형제들
마무리
지금까지 프론트엔드 개발을 크게
외부 사용자와 기업을 위한 웹, 모바일, SDK 같은 서비스를 개발하는 External Product와,
내부 직원을 위한 어드민 페이지, 관리 도구를 개발하는 Internal Product로 나눠 살펴보았다.
이를 통해 프론트엔드 개발이 다양한 역할로 세분화되었으며,
각 분야에서 요구되는 전문성이 조금씩 다름을 확인할 수 있었다.
다양한 팀의 목표와 역할을 이해하고, 이를 기업의 비즈니스 목표와 연결하는 것은 중요한 과정이다.
External Product에서는 사용자 경험 개선,
Internal Product에서는 업무 효율성 증대와 같이 팀별로 추구하는 목표가 다를 수 있다.
프론트엔드 개발자로서 자신의 관심 분야와 강점을 명확히 파악하고, 해당 분야의 전문성을 키워보자.
그 과정에서 자신의 색깔을 더하며, 기업에 실질적인 가치를 제공하고 개인의 경쟁력을 높여나갈 수 있을 것이다.