프론트엔드 하는 일

프론트엔드 개발자가 실제로 회사에서 하는 일은?
(feat. 업무범위,필수 역량, 성향까지 모두 분석)

프론트엔드 스쿨

취준생 여러분, 안녕하세요!😊 혹시 프론트엔드 개발자가 되고 싶다는 생각을 하고 계신가요? 지피지기면 백전백승. 내가 원하는 직무로 취업하려면 그 직무가 어떤 일을 하는지, 나에게 맞는지 정확히 알아야 합니다. 그래서 오늘은 프론트엔드 개발자가 하는 일에 대해서 아주 자세히 알아보려고 합니다. 그럼 시작해볼까요?

#1 먼저 프론트엔드의 뜻(정의)은 무엇일까요?

‘프론트엔드’는 말 그대로 풀어보면 ‘프론트’는 앞이고 ‘엔드’는 끝, 즉 단면이라는 뜻을 가지고 있어요. 결국 ‘앞면’이라는 뜻이죠. 사업에서 ‘앞’이란 소비자들과 직접 만나는 활동을 의미해요.결국 ‘프론트엔드’는 사용자가 서비스를 이용하기 위해 웹페이지나 앱 내에서 만나고 경험하는 모든 부분을 말합니다.

네이버 등 각종 검색엔진의 홈페이지를 생각해보면 쉬워요. 네이버 홈페이지를 이용할 때 눈에 보이는 화면 디자인이나 위치, 글자 크기, 기능들이 모두 프론트엔드이며 프론트엔드 개발자들이 이를 만들어낸 것입니다.

#2 그렇다면 프론트엔드 개발자는 무슨 일을 하나요?

프론트엔드 개발자는 사용자가 웹사이트나 어플리케이션에서 서비스를 이용하는 과정에서 만날 수 있는 모든 것들을 눈으로 볼 수 있게 구현하고, 사용자가 빠르고 편리하게 서비스를 이용할 수 있는 환경을 만들어 내는 일을 해요.

쉽게 말하자면 프론트엔드 개발자는 마치 화가가 머릿속에 그리고 있는 아름다운 상을 다른 사람들도 볼 수 있도록 캔버스에 하나하나 그려가며 그림을 완성하는 일을 한다고 보면 됩니다. 물감과 붓 대신 자바스크립트, HTML 등을 사용할 뿐이죠.

#3 프론트엔드 개발자의 업무 범위를 자세히 살펴볼까요?

그럼 프론트엔드 개발자가 어떤 사람인지 알았으니, 어떤 업무를 하는 지 좀 더 자세히 살펴볼까요? 프론트엔드 개발자의 업무 범위는 크게 아래와 같이 5가지 항목으로 나눠볼 수 있습니다.

1) 웹이나 어플리케이션에서 디자인을 구현합니다.

-프론트엔드 개발자는 사용자가 웹사이트나 어플리케이션에서 서비스를 이용하는 과정에서 만날 수 있는 모든 것들을 눈으로 볼 수 있게 구현하고, 또 사용자가 가장 빠르고 편리하게 서비스를 이용할 수 있는 환경을 만들어 내는 일을 해요.

-즉, 프론트엔드 개발자는 웹사이트나 어플리케이션 등의 사용자 인터페이스(UI)를 구현하는 일을 합니다.이를 위해 HTML, CSS, JavaScript 등의 언어를 사용하는 것이죠.

-쉽게 설명하기 위해 예를 들자면 물건을 사기 위해 네이버에 들어간다고 생각해보세요. 우리 눈에 가장 먼저 들어오는 것은 초록색의 N 모양과 초록색 검색 바일 것입니다. 우리가 흔히 아는 초록색의 N 모양과 초록색 검색 바를 디자인 해내는 것이 디자이너들의 일이라면, 프론트엔드 개발자는 이러한 디자인을 네이버 웹사이트에 구현해서 사람들이 이를 눈으로 보고 사용할 수 있게 하는 것입니다.

1-1) 여기서 잠깐! 퍼블리셔와 프론트엔드 개발자의 차이점에 대하여 짚고 넘어갈까요?

- 퍼블리셔(Publisher)와 프론트엔드 개발자(Front-end Developer)는 모두 웹사이트나 어플리케이션을 만드는 데에 관여하지만, 역할과 업무 범위에서 차이점이 있습니다.

- 퍼블리셔는 디자인을 토대로 HTML, CSS, JavaScript 등의 웹 기술을 활용하여 웹사이트나 애플리케이션을 구현합니다. 따라서, 디자인과 프론트엔드 기술에 대한 기초적인 지식과 능력이 필요합니다. 주로 웹사이트의 정적인 콘텐츠를 구현하며, 동적인 기능 구현은 퍼블리셔의 업무 범위를 벗어납니다.

- 반면, 프론트엔드 개발자는 웹사이트나 애플리케이션의 사용자 인터페이스(UI)를 구현하는 역할을 맡습니다. 또한 API를 통해 서버와 데이터를 주고 받는 것까지 구현하며, 백엔드와의 연동을 통해 동적인 기능을 구현합니다. 또한 웹사이트 전반을 관리하고 유지 보수하는 업무까지 담당합니다.

- 따라서, 프론트엔드 개발자는 퍼블리셔보다 웹사이트나 어플리케이션을 만드는 업무의 더 깊숙한 부분까지 관여하게 됩니다. 그렇기 때문에 프론트엔드 개발자에게 요구되는 개발 역량이나 기술 지식들이 퍼블리셔보다 높은 수준을 요구하게 되죠.

1-2) 웹퍼블리셔에서 프론트엔드 개발자로 전향이 가능한가요?

- 앞서 말했듯이 프론트엔드 개발자에게는 웹퍼블리셔보다 더 높은 개발 역량과 기술 스택에 대한 지식이 요구됩니다. 따라서 웹퍼블리셔에서 프론트엔드 개발자로 바로 전향하는 건 쉽지 않아요. 하지만 이것이 불가능하다는 뜻은 아닙니다.

- 오히려 웹퍼블리셔 분들은 훨씬 쉽게 프론트엔드 개발자 취업 준비를 하실 수 있을거예요. 왜냐하면 웹퍼블리셔의 업무 자체가 HTML/CSS에는 이미 매우 익숙하기 때문이죠. 그렇기 때문에 아예 처음 기초부터 시작하는 것보다 훨씬 수월할 것입니다. 그러니 프론트엔드 개발자를 꿈꾸신다면 자신감을 가지고 도전해보는 것을 추천합니다.

- 실제로 요즘은 웹퍼블리셔 채용을 거의 진행하지 않아요. 웹 퍼블리셔의 업무를 프론트엔드 개발자가 흡수하고 있는 추세죠. 그렇기 때문에 프론트엔드 개발자로의 전향을 꿈꾸신다면 앞으로의 전망으로 보나, 채용수로 보나 빠르게 시작하는 것이 가장 좋을 것이라는 생각이 듭니다.

2) 사용자 편의 최적화를 위해 웹/앱의 성능을 개선합니다.

- 사용자 편의 최적화는 웹사이트나 어플리케이션의 성능을 개선하는 작업이예요. 이를 위해 프론트엔드 개발자는 이미지 최적화, 코드 최적화, 캐싱 등의 기술을 사용하여 웹사이트나 어플리케이션의 로딩 속도를 개선해요.

- 인터넷 쇼핑을 하다 보면 각 쇼핑 사이트마다 웹페이지 화면의 반응 속도가 모두 다르다는 것을 종종 느낄 때가 있을 거예요. 제가 성질 급한 이용자라 그럴 수도 있지만 저 말고도 분명히 인터넷 쇼핑을 하면서 화면의 로딩과 반응속도가 느려 화면이 모두 뜨기도 전에 종료 버튼을 눌러 본 적이 한번씩 있을겁니다.

- 이때 화면 로딩이나 반응속도가 느린 것은 화면에 보이는 이미지나 재생되는 동영상, 데이터의 양이 많아서인데요. 이런 문제가 있을 때 프론트엔드 개발자들은 불필요한 동영상 재생을 줄인다던지, 이미지의 크기를 조정하는 등 화면 구성을 최적화하여 저같이 성질 급한 사람도 종료 버튼을 누르지 않고 웹사이트에서 오래 머물고 구매 버튼을 누르도록 도움을 줍니다.

3) 서비스 기능을 구현합니다.

- 프론트엔드 개발자들은 결과적으로 웹이나 앱의 이용자가 서비스를 이용하는 목적을 달성하기 위해 필요한 기능들을 구현해내는 일을 해요.

- 이번에도 예를 들어 쉽게 설명해볼까요? 검생창에 내가 사고 싶은 물건인 ‘무드등’을 입력한다고 해볼게요. 일단 괜찮아 보이는 이미지가 눈에 들어와 자세히 보고 싶은 마음에 이미지를 클릭했더니 1차로 확대가 되고 마우스 스크롤을 이용해니 추가로 2차 확대가 가능해졌어요. 이렇게 이미지를 선택하고 확대하는 기능 역시 프론트엔드 개발자가 웹페이지 상에서 구현해 내는 것인데요.

- 물건을 구매할 땐 누구나 꼼꼼하고 까다롭게 따져보게 되는데 사진 게시가 없거나, 확대 기능을 지원하지 않는 쇼핑몰이 있다면 금방 도태될 게 뻔하죠. 이 뿐만이 아니라 마음에 드는 물건을 담아두는 장바구니 기능, 사이트 내 동영상 재생 기능, 내 카드를 사진 찍으면 자동으로 카드 번호를 인식하는 기능, 자동 결제하기 기능 등 모두 프론트엔드 개발자가 구현해 내는 도화지 속 그림의 부분부분이라고 할 수 있어요. 결국 이용자의 목적 달성을 위해 웹사이트가 어플리케이션 안에서 거쳐야 하는 모든 과정들을 디자인 혹은 기능으로 만들어내는 것이죠.

4) 여러 운영체제나 브라우저의 호환 가능성을 지원합니다.

- 이 밖에도 프론트엔드 개발자는 시장 점유율을 높이기 위해 다양한 운영 체제, 브라우저에서 모두 작동되는 사이트를 만들거나, 각각의 운영체제, 브라우저에 최적화된 웹사이트나 앱을 만드는 일을 해요.

- 온라인 시장을 여러 브라우저나 운영체제가 분점하고 있기 때문에 어느 한 브라우저나 운영체제의 이용자만의 타겟으로 하여 서비스를 제공하는 사업자는 모든 환경에 최적화된 서비스를 제공하는 사업자보다 열세해 있을 수 밖에 없습니다. 프론트엔드 개발자는 사업자의 서비스가 어느 환경에서도 사용자에게 최적화된 경험을 제공할 수 있도록 해야 하기 때문에, 여러 브라우저나 운영체계의 기능 및 차이점에 대해 숙지하고 있어야 해요.

5) 보안에 대한 지원을 합니다.

- 보안이 프론트엔드와 상관있냐 생각하실 수도 있지만 프론트엔드 개발자도 보안 기능을 염두하면서 개발 업무를 진행해야 합니다. 프론트엔드 개발자가 보안에 대한 지원을 할 경우, 웹사이트나 애플리케이션의 보안 취약점을 식별하고, 이를 해결하는 방법을 찾아내는 역할을 맡습니다. 이를 위해서는 웹 보안에 대한 전문 지식이 필요하며, OWASP Top 10과 같은 보안 취약점에 대한 이해가 필요합니다.

- 프론트엔드 개발자로서 보안 지원을 적절히 제공하기 위해서는, 보안 관련 컨퍼런스나 교육에 참여하고, 보안 전문가들과 함께 공부하며 지식과 경험을 쌓아 나가는 것이 좋습니다.

#4 프론트엔드 개발자는 누구와 협업하나요?

1) UXUI 디자이너와 협업합니다.

- 프론트엔드 개발자들은 웹사이트나 앱의 디자인과 레이아웃을 결정하는 것부터 시작해요. 이를 위해서는 UX/UI 디자이너와 협력하여 사용자 경험을 개선하고 사용자 인터페이스를 개발합니다. 이후에 HTML, CSS, JavaScript 등의 프로그래밍 언어를 사용하여 디자인을 실제로 웹사이트나 앱에 구현하게 되죠. 즉 디자이너들이 작업한 결과물을 직접 살아 움직이는 웹 사이트로 구현한다고 생각하시면 되요. 그 과정에서 기획한 웹사이트를 완벽히 구현해내기 위해 디자이너와 수많은 의사소통을 하게 되는 것이죠.

2) 백엔드 개발자와 협업합니다.

- 프론트엔드 개발자들은 백엔드 개발자와 협력하여 웹사이트나 앱의 기능을 구현해요. 백엔드 개발자는 웹사이트나 앱의 데이터베이스, 서버와 같은 기반 시스템을 담당합니다. 프론트엔드 개발자는 이러한 백엔드 시스템을 활용하여 사람들이 보다 효율적으로 정보를 검색하고 처리할 수 있도록 도와주는 역할을 해요. 그렇기 때문에 백엔드 개발자와의 협업은 아주 기본적인 것이라 할 수 있죠.

3) 프론트엔드 개발자들끼리 협업합니다.

- 프론트엔드 개발자들끼리도 협업을 하는 일이 많습니다. 개발은 혼자하는 것이라고 생각할 수도 있지만, 개발팀도 같이 협력하며 일해요. 프론트엔드 개발자끼리 코드 스타일 가이드를 공유하여 일관된 코드 작성을 유지하고, 서로서로 코드 리뷰를 통해 서로의 코드를 검토하고 피드백을 주고 받습니다.

#5 프론트엔드 개발자와 백엔드 개발자의 차이점은 무엇일까요?.

- 프론트엔드 개발자와 백엔드 개발자는 모두 웹 개발에 있어서 중요한 역할을 한다는 것은 동일하죠. 다만 프론트엔드 개발자는 웹사이트나 앱 등의 사용자 인터페이스(UI)를 개발하는 일을 하며, 백엔드 개발자는 서버에서 동작하는 애플리케이션을 개발합니다. 좀 더 자세히 차이점에 대하여 알아볼까요?

- 앞서말한 내용을 정리하자면 프론트엔드 개발자는 사용자가 웹사이트나 앱을 쉽고 편리하게 사용할 수 있도록 UI를 개발하고, 웹사이트나 앱의 성능을 개선하며, 모든 사용자가 웹사이트나 앱을 사용할 수 있도록 보장하는 중요한 역할을 담당합니다. 이를 위해서는 HTML, CSS, JavaScript 등의 언어를 사용하여 디자인된 UI를 구현하고, 사용자가 상호작용할 수 있는 기능을 추가해야 하죠.

- 반면, 백엔드 개발자는 데이터베이스와의 상호작용, API 개발, 서버 성능 최적화, 인증과 보안, 서버와의 통신 등의 업무를 담당합니다. 프론트엔드가 사용자 눈에 직접 보이는 부분을 구현한다고 하면, 백엔드 개발자는 이면에 눈에 보이지 않는 서버를 구현하는 일을 하는 것이죠. 프론트엔드 개발자와 달리 백엔드 개발자는 Java, Python, PHP 등의 백엔드 언어를 사용합니다.

- 간단히 프론트엔드와 백엔드의 차이점에 대하여 알아 봤는데요. 프론트엔드와 백엔드는 서로 다른 역할을 하기 때문에, 각자의 분야에서 전문성을 갖추는 것이 중요합니다. 하지만, 두 분야의 개발자 모두 웹 개발에 필요한 기술과 도구를 숙지하고, 협업하여 웹사이트나 앱을 완성하는 것이 중요합니다.

#6 프론트엔드 개발자는 어떤 역량을 가지고 있어야 하나요?

1) HTML, CSS, JavaScript 등의 언어를 다룰 줄 알아야 해요.

프론트엔드 개발자는 UI를 개발하는 역할을 담당하기 때문에, HTML, CSS, JavaScript 등의 언어를 자유롭게 다룰 수 있어야 합니다. 이를 위해서는 HTML 태그나 CSS 속성 등의 기본 문법을 숙지하고, JavaScript를 활용하여 동적으로 UI를 제어할 수 있어야 해요.

2) 웹 접근성에 대한 이해도가 높아야 해요.

프론트엔드 개발자에게는 웹 접근성에 대한 이해도 중요한 역량입니다. 모든 사용자가 웹사이트나 앱을 쉽게 사용할 수 있도록 보장하는 작업을 담당 또한 프론트엔드 개발자의 책임이 관여되는 일이기 때문이죠. 이를 위해 웹 표준을 준수하고, 웹사이트나 앱에서 사용하는 컨텐츠의 접근성을 고려해야 합니다. 예를 들어, 시각 장애인이 스크린 리더를 사용하여 웹사이트나 앱을 사용할 때, 이미지에 대한 대체 텍스트를 제공하는 것이 중요합니다.

3) 브라우저 호환성 이슈를 해결할 수 있는 능력이 필요해요.

또한, 브라우저 호환성 이슈를 해결할 수 있는 능력도 필요합니다. 다양한 브라우저에서 웹사이트나 앱이 동일하게 보이고 작동하는 것을 보장하는 작업을 해야 합니다. 이를 위해서는 브라우저별로 특정 기능이나 속성을 지원하는지 확인하고, 호환성 이슈가 발생하지 않도록 대응해야 합니다.

4) React, Vue.js 등의 프론트엔드 프레임워크를 다룰 수 있으면 더욱 좋습니다.

마지막으로, React, Vue.js 등의 프론트엔드 프레임워크를 다룰 수 있다면 더욱 우수한 프론트엔드 개발자가 될 수 있습니다. 이러한 프레임워크를 사용하면, 효율적인 개발이 가능하며, 높은 수준의 코드 재사용성을 구현할 수 있습니다.

#7 어떤 성향을 가지고 있으면 프론트엔드 개발자 직무와 잘 맞을까요?

1) 창의력이 높은 사람이 좋습니다.

프론트엔드 개발자들은 창의적인 문제 해결 능력이 필요하며, 기술적인 지식과 디자인 감각이 합쳐진 역량이 요구됩니다. 또한, 사용자와 원활하게 소통하며 사용자 요구사항을 이해하고 반영할 수 있는 능력도 필요합니다.

2) 지속적인 학습과 적극적인 태도를 유지할 수 있는 사람이 좋습니다.

프론트엔드 개발자들은 지속적인 학습과 적극적인 태도가 필요합니다. 웹 기술이 지속적으로 발전하고 있기 때문에 새로운 기술과 도구를 습득하며 업무에 적용할 준비가 되어 있어야 하죠. 개발 직군 자체가 변화에 민감하지만, 그중 특히 프론트엔드 기술 스택들은 최신 기술과 트렌드가 아직도 급변하고 있는 추세예요. 그렇기 때문에 현업에 있더라도 꾸준히 성장하려는 마인드가 중요하죠. 따라서 변화에 스트레스를 많이 받는 사람이라면 프론트엔드 개발자를 추천하지 않아요.

3) 눈에 보이는 결과물을 얻는 것에 즐거움을 느끼면 좋습니다.

프론트엔드 개발자의 가장 큰 특징은 사용자의 눈에 직접 보이는 화면을 구현한다는 점이예요. 눈에 직접 보이지 않는 서버를 담당하는 벡엔드 개발자와 가장 큰 차이점이기도 하죠. 그렇기 때문에 눈에 보이는 결과물을 얻는데서 즐거움을 느끼는 사람이라면 백엔드보다 프론트엔드 직무와 잘 맞을 가능성이 높아요.

4) 커뮤니케이션 능력이 뛰어나면 좋습니다.

프론트엔드 개발자들은 협업 능력이 중요합니다. 앞서 말하기도 했지만 프론트엔드 개발자는 다양한 사람들과 협업하고 소통하며 업무를 진행해요. 따라서 다른 개발자들, 디자이너들, 그리고 프로젝트 매니저들과 함께 일하며 원활한 커뮤니케이션을 유지하는 것이 중요해요.

5) 사용자 관점에서 생각할 수 있는 서비스 마인드를 가지면 좋습니다.

개발자는 코드만 잘치면 된다고 생각한다면 금물 이에요. 좋은 개발자들은 사용자를 중심으로 생각하고 유저의 행동을 이해하고 분석할 수 있는 능력을 가지고 있어요. 즉, 개발자들도 서비스 마인드를 가지고 있는거죠. 이런 마인드를 가지고 있다면 웹사이트나 어플리케이션에서 유저들이 어떻게 상호작용하고 있는지를 이해하고, 이를 개선하는 방법을 찾는데 능숙한 개발자가 될 수 있을 거예요.

여러분은 프론트엔드 개발자가 잘 맞는 성향이라는 생각이 되시나요? 내가 성향적으로 잘 맞지 않아도, 개발자로서 나만의 강점이 있을 수 있으니 곰곰히 생각해보세요.

프론트엔드 개발자의 역량과 성향에 대해 더 궁금하신 분들을 위해 참고하기 좋은 영상이 있어 가져왔습니다. 좋은 개발자가 되려면 가져야 하는 생각이 무엇인지 네이버 책임리더인 우상훈님의 이야기도 영상을 통해 함께 들어보세요.

#8 글을 마치며

지금까지 프론트엔드 개발자가 어떤 일을 하는 사람인지 상세하게 알아봤습니다. 글을 읽으며 프론트엔드 개발자가 어떤 일을 하는 사람인지 조금 감이 오셨나요? 프론트엔드 개발자가 과연 나에게 잘 맞는 직무인지 고민하셨던 분들께 조금이나마 도움이 되었으면 좋겠습니다. 또한 개발자 취업을 꿈꾸시는 모든 분들을 프론트엔드 스쿨이 응원하겠습니다.

프론트엔드 스쿨은 개발자 취업을 위한 최적의 방향을 항상 고민하고 있어요. 프론트엔드 스쿨에서 개발자 취업 준비를 하시면 프로그래밍 기본기부터 개발자 최종합격 순간까지의 모든 것을 한꺼번에 준비하실 수 있습니다! 🙂

개발자 취업은 제로베이스

추천 컨텐츠