프론트엔드 개발자의 업무 범위와 역량

프론트엔드는 무엇을 하나

웹 서비스는 사용자의 입력을 받아 더 가치 있는 데이터로 만들고, 그것을 다시 사용자에게 잘 전달하는 일이다. 프론트엔드는 이 과정에서 사용자와 서비스를 잇는 구간 전체를 구현한다. 데이터 흐름으로 보면 일이 여섯 영역으로 나뉜다.

2번이 많은 사람이 프론트엔드를 하고 싶어 하는 이유다. 에디터, 스프레드시트 셀, Figma 같은 기능이 여기 속한다. 하지만 이런 일을 하는 회사는 많지 않다. 수요가 많은데도 하고 싶은 일은 적은 이유다.

3번과 4번이 어려운 이유는 코드가 아니라 의존성에 있다. 인증·보안·헤더·CORS는 백엔드가 정한 설정을 따라야 하고, 이건 코딩이 아니라 학습과 협업의 영역이다. 4번의 스키마 불일치와 비동기 타이밍 문제를 줄이려고 나온 도구가 GraphQL, 서버 상태 라이브러리(TanStack Query, SWR)다.

경계는 그라데이션이다

flowchart LR
  subgraph fe["프론트엔드 (주력 위치는 사람마다)"]
    subgraph pub["퍼블리셔"]
      s1["1 보여 주기"] --- s2["2 조작하기"]
    end
    subgraph be["백엔드"]
      s3["3 보내기"] --- s4["4 받기"]
    end
    s2 --- s3
  end

• 일반적으로 퍼블리셔는 12, 백엔드는 34를 다룬다. 프론트엔드가 1~4를 혼자 다 하는 것은 아니고, 주력 위치가 그 어딘가에 있다.
• 퍼블리셔가 데이터 연동까지 하는 회사도 있고, 프론트엔드가 서버리스나 BFF로 백엔드 기능을 맡기도 한다. 빨강과 노랑 사이에 선을 그을 수 없듯 경계는 회사와 역할마다 다르다.
• 퍼블리셔는 국내에만 있는 직군명이다. 로직은 적지만 작업량이 많아 전문가를 따로 둔다. 다만 프레임워크에서 디자인과 CSS를 재사용 가능한 컴포넌트로 만드는 일은 결코 쉽지 않아, 당당한 프론트엔드의 일부가 되고 있다.

풀스택 개발자

풀스택이라는 말은 2014년 무렵부터 널리 쓰였다. React가 나오고 프론트엔드라는 생태계가 생기자, 기존 웹 개발자(이제 "백엔드")에게 새 영역까지 함께 해 달라는 요구가 생겼기 때문이다. 원래 뜻은 단순했다. "혼자서 웹 서비스를 만들 줄 아는가?"

결론은 T자형이다. 하나의 전문성을 갖되 관심의 스펙트럼은 넓게 유지한다. 클라우드와 서버리스로 프론트·백 경계는 흐려지고 있고, 웹이라는 생태계 안에서 연결과 협업은 계속해야 한다. 아주 작게라도 혼자 서비스 한 사이클을 완성해 보는 경험은 시야를 크게 넓힌다.

잘하는 프론트엔드 개발자

개발을 잘하는 것과 일을 잘하는 것은 다르다. 조건을 보는 사람별로 묶으면 이렇다. 프론트엔드가 생긴 역사는 프론트엔드의 등장 배경에 있다.

개발자의 평판은 실력보다 그 사람이 키운 좋은 서비스에서 먼저 나온다. 더 나은 서비스를 위해 내가 만든 것을 갈아엎는 용기도 잘하는 개발자의 조건이다.

2인분 이상 하기

천재라서 2인분을 하는 경우는 드물다. 개인의 일정 조율이 팀과 회사의 일정 조율로, 개인의 기술 스택 선택이 팀과 회사의 기술 스택 결정으로 넓어질 때 여러 사람의 능력을 끌어낼 수 있다. 이것이 PM·CTO 역할로 이어진다. 더 나아가 좋은 철학으로 회사의 문화를 만들고 그 문화에 맞는 사람을 모아 키우는 일이다. 그러려면 베스트 프랙티스를 단련하고, 자신을 알리는 PR과 스토리텔링도 필요하다.

정리

• 프론트엔드의 일은 보여 주기·조작·보내기·받기·환경·도구 여섯 영역이고, 사람마다 주력 위치가 다르다.
• 퍼블리셔·프론트엔드·백엔드의 경계는 선이 아니라 그라데이션이다.
• 풀스택은 원래 "혼자 웹 서비스를 만들 줄 아는가"였다. 지금은 T자형으로 전문성과 넓은 시야를 함께 갖는 것이 현실적이다.
• 잘하는 프론트엔드 개발자는 정해진 일정과 인력 안에서 요구를 구현해 내고, 협업하며, 트렌드와 현실의 균형을 잡고, 좋은 서비스를 만들려고 애쓰는 사람이다.

관련 노트: 프론트엔드의 등장 배경, 프론트엔드 학습 로드맵, 기술 스택 고르기, 제품 중심 개발자, 프론트엔드 엔지니어의 세 가지 성장 트랙, AI 네이티브 프론트엔드 개발