저도 처음에는 UI 개발자와 프런트엔드 개발자를 같은 화면 개발 직무로 생각했습니다. 둘 다 HTML, CSS, JavaScript를 쓰기 때문에 차이가 크지 않다고 봤습니다. 하지만 채용 공고와 포트폴리오 기준을 비교해 보니 두 직무는 집중하는 지점이 달랐습니다. UI 개발자는 디자인 시안을 정확하게 구현하고 반응형, 접근성, 브라우저 호환성을 챙기는 역할에 가깝습니다. 반면 프런트엔드 개발자는 API 연동, 상태 관리, 비동기 처리처럼 화면과 데이터 흐름을 연결하는 역할이 더 큽니다. 저는 이 차이를 알고 나서야 직무명보다 실제 업무 내용을 먼저 봐야 한다고 느꼈습니다. 이 글에서는 제 경험을 바탕으로 두 직무의 차이와 준비 방향을 정리해 보겠습니다.
UI 개발자와 프런트엔드 개발자, 직무 구분이 왜 헷갈릴까
직접 겪어보니, 이 혼란은 두 직무가 쓰는 기술 스택이 겹쳐 보이는 데서 시작됩니다. HTML, CSS, JavaScript라는 세 가지 기술을 둘 다 사용한다는 점에서 입문자는 쉽게 같은 직군으로 뭉뚱그려 버립니다. 그런데 기술을 사용하는 목적과 깊이가 다릅니다.
UI 개발자의 UI는 User Interface의 약자입니다. 여기서 UI란 사용자가 웹사이트나 앱을 이용할 때 직접 보고 누르고 입력하는 화면 요소 전체를 뜻합니다. 버튼, 모달창, 탭 메뉴, 폼 화면, 카드형 목록이 모두 여기에 속합니다. UI 개발자는 디자이너가 피그마(Figma)로 만든 시안을 실제 화면으로 옮기는 역할을 주로 맡습니다. 피그마란 웹 기반의 UI·UX 디자인 협업 도구로, 실무에서 디자이너와 개발자가 시안을 함께 확인하는 데 가장 많이 씁니다.
반면 프런트엔드 개발자는 화면 구현 이상의 역할을 담당합니다. 사용자가 버튼을 눌렀을 때 서버에 API 요청이 가고, 응답으로 받은 데이터가 화면에 렌더링 되는 흐름 전체를 책임집니다. 여기서 API(Application Programming Interface)란 서버와 클라이언트가 데이터를 주고받기 위한 통신 규칙을 말합니다. 쉽게 말해 화면과 서버 사이를 이어주는 창구 역할입니다.
제가 처음 채용 공고를 볼 때 가장 먼저 놓친 부분이 바로 이 지점이었습니다. 직무명보다 실제 업무 내용을 먼저 읽어야 한다는 것을요. 어떤 회사는 UI 개발자를 웹 퍼블리셔에 가깝게 쓰고, 어떤 회사는 프런트엔드 개발자와 거의 동일한 역할로 채용합니다. 직무명만 보고 지원하면 준비 방향 자체가 틀어질 수 있습니다.
MDN Web Docs는 프런트엔드 개발자가 갖춰야 할 핵심 학습 영역으로 HTML, CSS, JavaScript의 구조적 학습 과정을 제시하고 있습니다(출처: MDN Web Docs). 이 자료를 보면 단순 화면 구현을 넘어 동작과 데이터 흐름까지 이해하는 개발자를 프런트엔드로 정의하고 있다는 걸 확인할 수 있습니다.
포트폴리오로 보는 두 직무의 차이
취업 준비를 하면서 제가 가장 실감했던 차이는 포트폴리오 방향이었습니다. 처음에는 그냥 화면 만든 걸 보여주면 되는 줄 알았는데, 직무마다 보여줘야 할 내용이 완전히 달랐습니다.
UI 개발자 포트폴리오에서는 화면 구현의 완성도가 핵심입니다. 반응형 웹(Responsive Web)을 어떻게 구현했는지가 가장 중요한 항목 중 하나입니다. 반응형 웹이란 PC, 태블릿, 모바일 등 다양한 화면 크기에서 레이아웃이 자연스럽게 조절되도록 설계하는 방식을 말합니다. 시맨틱 태그(Semantic Tag)를 적절히 썼는지도 평가 대상입니다. 시맨틱 태그란 header, nav, main, footer처럼 HTML 요소의 의미를 명확하게 나타내는 태그로, 검색엔진 최적화와 웹 접근성에 직접 영향을 줍니다.
반면 프런트엔드 개발자 포트폴리오는 기능 구현과 문제 해결 과정을 중심으로 구성해야 합니다. 상태 관리(State Management)를 어떻게 했는지가 빠지면 안 됩니다. 상태 관리란 사용자의 로그인 여부, 장바구니 목록, 검색 필터 같은 데이터를 앱 전체에서 일관성 있게 유지하는 방식을 말합니다. 이 부분이 없으면 서비스가 제대로 작동한다는 걸 증명하기 어렵습니다.
두 직무의 포트폴리오 핵심 항목을 정리하면 다음과 같습니다.
- UI 개발자: 디자인 시안과 구현 결과 비교, 반응형 화면 예시, 시맨틱 HTML 구조 설명, 웹 접근성 고려 사항, 브라우저 호환성 확인 결과
- 프런트엔드 개발자: API 연동 과정, 컴포넌트 구조 설계, 상태 관리 방식, 비동기 처리와 오류 대응, 트러블슈팅 기록, GitHub README와 배포 링크
제 경험상 이 구분을 모르고 포트폴리오를 만들면 양쪽 다 애매하게 보이는 결과물이 나옵니다. UI 개발자 공고에 지원하면서 API 연동 설명을 길게 써봐야 평가자 눈에 잘 안 들어오고, 반대의 경우도 마찬가지입니다. 내가 어느 방향으로 가려는지 먼저 정하고, 그에 맞게 포트폴리오를 설계하는 게 훨씬 효율적입니다.
web.dev는 웹 개발 학습에서 HTML, CSS, JavaScript를 핵심 과정으로 제시하면서, 구조와 스타일뿐 아니라 동작을 구현하는 JavaScript까지 함께 이해해야 한다는 방향을 명확히 하고 있습니다(출처: web.dev). 이 관점에서 보면 프런트엔드 개발자는 JavaScript 활용 범위가 훨씬 넓어야 한다는 게 자연스럽게 이해됩니다.
면접 준비까지 달라지는 프런트엔드 개발자의 방향
포트폴리오를 다르게 준비해야 한다는 걸 알고 나니, 면접 질문도 방향이 완전히 다르다는 게 보이기 시작했습니다. 솔직히 이건 예상 밖이었습니다. 둘 다 화면 개발인데 면접 질문이 이렇게 달라도 되나 싶었거든요.
UI 개발자 면접에서는 CSS 레이아웃 구현 방식이나 웹 접근성(Web Accessibility) 경험을 묻는 질문이 자주 나옵니다. 웹 접근성이란 시각 장애, 청각 장애, 운동 장애 등이 있는 사용자도 웹 콘텐츠를 불편 없이 이용할 수 있도록 설계하는 개념입니다. 브라우저 호환성(Cross-Browser Compatibility), 즉 크롬, 사파리, 에지 등 서로 다른 브라우저에서 화면이 동일하게 보이는지 확인한 경험도 자주 묻습니다.
프런트엔드 개발자 면접에서는 비동기 처리(Asynchronous Processing)에 대한 이해가 빠지지 않습니다. 비동기 처리란 서버에 데이터를 요청해 놓고 응답을 기다리는 동안 다른 작업을 계속 진행하는 방식으로, Promise나 async/await 같은 JavaScript 문법으로 구현합니다. 컴포넌트를 어떤 기준으로 나눴는지, React나 Vue 같은 프레임워크를 왜 선택했는지도 단골 질문입니다.
제가 직접 준비하면서 느낀 건, 면접 질문을 통째로 외우려 하기보다 내가 지원하는 공고가 화면 품질 중심인지 기능 개발 중심인지를 먼저 파악하는 게 훨씬 효과적이라는 점이었습니다. 그 판단 하나가 포트폴리오 방향, 면접 준비 범위, 학습 우선순위를 모두 결정합니다.
결국 UI 개발자와 프런트엔드 개발자는 같은 기술을 쓰더라도 집중하는 지점이 다릅니다. 화면이 디자인 의도대로 정확히 구현됐는가를 보는 역할과, 그 화면이 실제 서비스 기능과 데이터 흐름에 맞게 작동하는가를 보는 역할은 분명히 구분됩니다.
두 직무를 비슷하게만 보고 준비를 시작하면 방향이 흐릿해집니다. 지금 내가 화면 완성도에 더 흥미를 느끼는지, 데이터와 기능이 연결되는 구조에 더 끌리는지부터 먼저 확인해 보시길 권합니다. 그 답이 잡히면 포트폴리오도, 면접도 훨씬 선명하게 준비할 수 있습니다.