프론트엔드개발자

프론트엔드 개발자가 하는 일, AI가 대체할 수 있을까?
K-디지털 기초역량훈련: 인사이트 콘텐츠

글 미리보기

1. 프론트엔드 개발자 = 사라질 직업?
2. 프론트엔드 개발, 이런 일을 합니다
3. 프론트엔드 개발의 필수 도구, 리액트
4. 개발자 VS AI, 어디까지 가능할까?
5. 대체 불가능한 개발자로 거듭나는 방법

1. 프론트엔드 개발자 = 사라질 직업?

챗GPT(ChatGPT)와 같은 생성형 인공지능(AI)의 등장 이후, 직업의 존폐를 걱정하는 사람들이 많아졌습니다. AI 기술의 고도화로 가까운 미래에 사라질 것으로 예측되는 일자리에는 작가, 기자, 번역가 등이 꼽히는데요. 이렇듯 언어를 다루는 직업의 소멸을 예측하는 이유는 AI가 규칙적이고 체계적인 것을 더 능숙하게 학습하기 때문입니다. 그리고 언어를 다루는 또 다른 직업에는 프로그래밍 언어를 사용하는 프론트엔드 개발자도 있죠.

최근 ‘AI가 코딩하는 시대'라는 말이 심심찮게 들려옵니다. 실제로 챗GPT에 몇 가지 질문을 던지면 몇 초만에 꽤 그럴싸한 코드를 생성할 수 있습니다. 질문자는 어떤 종류의 프로젝트인지, 어떤 프로그래밍 언어와 프레임워크를 사용해야 하는지, 어떤 기능이나 구성 요소가 필요한지 말하기만 하면 됩니다.

하지만 프론트엔드 개발자에게 위기가 닥친 것은 이번이 처음은 아닙니다. 개발자의 도움 없이 나만의 웹 페이지를 구축할 수 있는 워드프레스(Wordpress)와 같은 블로그 서비스를 떠올려 봅시다. 방문자와 상호작용하는 매력적인 웹 페이지를 쉽고 간편하게 만들 수 있는 블로그 서비스들은 개발자의 자리를 위협했던 위기 중 하나였습니다. 게다가 몇 년 전부터는 반복적인 작업을 줄여주는 자동화 도구와 비개발자를 위한 노코드(No code) 도구도 등장했죠. 당시에는 이 서비스들이 모두 개발자의 자리를 넘보는 기술들로 여겨졌습니다. 그러나 프론트엔드 개발자는 지금도 건재하고, 능력 있는 인재를 찾는 기업도 계속해서 늘어나고 있습니다.

그런데도 취업을 준비하는 예비 개발자와 실무에서 막 일하기 시작한 주니어 개발자들은 불안감과 걱정을 쉬이 떨쳐버리기가 어렵습니다. 프론트엔드 AI의 등장은 정말 지금까지와는 다른 결말로 이어질까요? 과연 프론트엔드 개발자는 이대로 사라져 버릴 직업인지, 지금부터 그 답을 찾아가 보도록 하겠습니다.

2. 프론트엔드 개발, 이런 일을 합니다

개발자가 어떤 일을 하는지도 모르는 채로는 AI의 경쟁력을 제대로 파악할 수 없겠죠? AI라는 적을 이야기하기에 앞서 프론트엔드를 담당하는 개발자의 업무에 관해 먼저 살펴보겠습니다.

프론트엔드(Front-end)라는 단어의 의미부터 알아볼까요? 프론트(front)는 ‘앞', 엔드(end)는 ‘끝, 면, 한쪽'이라는 뜻입니다. 즉, 프론트엔드에는 ‘앞면, 앞쪽’의 의미가 있습니다. 웹 개발에서 ‘앞면, 앞쪽'은 웹 사이트에 방문하는 사용자에게 드러나는 영역을 말합니다. 정리하자면, 프론트엔드를 만드는 사람들은 사용자가 눈으로 볼 수 있는 웹 서비스의 모양새와 상호작용을 구현하는 일을 합니다. 이를테면 아이디와 비밀번호를 입력하는 로그인 창, 화면을 위아래로 움직일 때의 스크롤 애니메이션, 생략된 내용을 더 살펴볼 수 있는 더 보기 버튼 등이 모두 프론트엔드 개발 단계에서 만들어집니다. 지금 보고 있는 이 웹 사이트도 프론트엔드 개발 과정을 거쳐 만들어졌죠.

그럼, 지금부터 A 소셜 미디어 회사에서 근무하는 개발자 B 씨가 한 달 동안 수행한 일들을 살펴보며, 프론트엔드 개발의 업무 범위를 조금 더 자세히 들여다보겠습니다. 개발자가 하는 일은 기업이나 프로젝트의 개발 환경에 따라 조금씩 달라지기 마련이지만, 일반적으로 프론트엔드 직군 개발자의 하루는 이렇게 흘러갑니다.

B 씨의 일과를 토대로 업무를 정리해 볼까요? 먼저 프론트엔드 개발 직군은 신규 기능을 만들고 디자인하는 업무를 수행합니다. 이를 사용자 인터페이스(User Interface, UI)를 구현한다고 말하기도 하죠. 개발자는 웹 사이트의 구조, 스타일, 레이아웃을 만드는 과정에서 HTML, CSS, 자바스크립트(JavaScript)라는 언어들을 사용합니다. HTML은 콘텐츠의 구조를 정의하는 언어, CSS는 웹 페이지의 스타일을 꾸미는 언어, 자바스크립트는 웹 페이지가 동적으로 기능하게끔 하는 언어입니다.

이때, 뛰어난 개발자는 사용자 경험(User eXperience, UX)을 고려한 디자인을 고민합니다. 사용자 경험은 웹 서비스를 이용하면서 겪는 총체적인 경험, 생각, 감정을 일컫는데요. 개발자는 퀵 촬영 버튼이 너무 작아 누르기 어렵지는 않은지, 촬영하는 동안 계속 누르고 있기에 불편한 위치는 아닌지, 메신저 창에 미리보기 화면이 표시되는 방식에 어색함은 없는지 등을 꼼꼼하게 검토하며, 기능을 만들고 디자인을 구현해야 합니다. 또 최적화되지 않은 코드나 콘텐츠로 인해 반응 속도가 느려지지 않도록 꾸준한 유지와 보수를 병행하죠.

또한, 개발자는 새롭게 만든 신규 기능과 디자인이 다양한 사용 환경에서 일관되게 동작하는지도 확인합니다. 웹 접근성을 점검하는 것은 웹 서비스의 사용성을 향상하는 중요한 과정입니다. 개발 단계에서부터 크롬, 사파리, 파이어폭스, 마이크로소프트 엣지 등 여러 브라우저에서 호환성이 보장되도록 코드를 개발하는 크로스 브라우징(Cross Browsing) 기술을 이용하기도 합니다. 이렇게 완성한 코드를 보안을 고려해 사용자에게 무사히 배포하는 것까지가 프론트엔드 개발 직군이 담당하는 일입니다.

3. 프론트엔드 개발의 필수 도구, 리액트

요즘 개발자는 원활한 프론트엔드 개발 업무를 위해 웹 전반에 대한 지식과 작업의 근간이 되는 언어(HTML, CSS, 자바스크립트)를 익힌 뒤, 자연스럽게 리액트(React)를 학습합니다. 리액트는 전 세계에서 인기를 끌고 있는 프론트엔드 개발 도구인데요. 최근에는 프론트엔드 개발자 채용 공고에서도 ‘리액트'를 쉽게 찾아볼 수 있습니다. 프론트엔드 개발 업무를 제대로 이해하기 위해서는 리액트에 관해서도 잘 알아야 한다는 뜻이죠.

리액트는 메타(Meta)가 서비스하는 페이스북(Facebook)의 소프트웨어 엔지니어였던 조던 워크(Jordan Walke)가 개발한 도구입니다. 페이스북 서비스의 사용자 인터페이스(UI)에서 발생하는 문제를 편리하게 해결하려는 목적으로 만들어졌죠. 페이스북이 내부적으로 사용해 오던 리액트는 2013년부터 오픈 소스로 외부에 공개되었습니다. 리액트는 그때부터 많은 개발자의 손에서 활용되기 시작했는데요. 미국 지디넷의 2022년 자바스크립트 현황 보고서에 따르면, 현업 개발자의 82%가 프론트엔드 개발에 리액트를 사용하고 있다고 답했습니다.

리액트를 한마디로 표현하자면 프론트엔드 자바스크립트 라이브러리입니다. 개발에서 라이브러리(Library)란 즉시 사용할 수 있는 특정 정보들의 모음을 말합니다. 개발자는 라이브러리를 통해 필요한 기능을 호출해서 사용자 인터페이스를 더 효율적이고 편리하게 개발할 수 있죠. 마치 원하는 물건이 잔뜩 들어있는 서랍에서 필요한 물건을 쏙쏙 빼서 사용하는 것과 같습니다. 여러 라이브러리 중에서도 특히 리액트가 대세로 꼽히는 데는 크게 2가지 이유가 있습니다.

1. 필요한 곳만 수정할 수 있는 효율성

리액트는 가상 DOM의 개념을 이용합니다. DOM(Document Object Model)은 웹 브라우저가 웹 사이트를 구성하는 HTML 문서를 읽어낼 수 있도록 하는 구조입니다. 개발자가 DOM을 수정하면, 브라우저가 DOM을 토대로 업데이트를 진행하죠. 하지만 수정 사항을 적용하려면 아주 작은 변화일지라도 웹 사이트 전체를 갱신해야만 합니다. 엄청난 수의 사용자와 끊임없이 상호작용하는 와중에도 크고 작은 규모의 UI를 수정해야 했던 페이스북에게 이러한 방식은 비효율적일 수밖에 없었죠.

그러나 가상 DOM을 이용하면 상황이 다릅니다. 가상 DOM은 실제 DOM을 메모리에 복제한 것으로, 개발자는 실제 DOM을 변경하는 대신 가상 DOM을 수정할 수 있습니다. 업데이트를 진행할 때도 가상 DOM과 실제 DOM을 비교해 반영이 필요한 부분만 갱신하면 되죠. 이렇게 빠르고 신속하게 UI를 업데이트할 수 있는 점이 바로 리액트의 대표적인 특징입니다.

2. 컴포넌트 기반의 높은 생산성

리액트의 기본 단위는 컴포넌트(Component)입니다. 작은 퍼즐 조각을 이어 붙여 하나의 그림을 완성하듯이, 리액트에서는 컴포넌트를 조합해 웹 사이트를 구성하는 다양한 요소를 만듭니다. 아무리 복잡한 UI일지라도 작은 퍼즐 조각에서부터 차근차근 만들어갈 수 있어 쉽죠. 이렇게 컴포넌트를 기반으로 개발하면 전체적인 UI의 일관성을 유지하기가 용이하다는 장점도 있습니다.

또한, 컴포넌트 기반 아키텍처인 리액트는 다른 라이브러리 및 프레임워크와 호환하기도 좋습니다. 자바스크립트 기반의 문법을 사용하므로 기존 프로젝트에 리액트를 통합하는 경우도 많죠. 컴포넌트를 이용해 재사용 가능한 코드를 한 번만 생성해 두면, 비슷한 요소를 만들어야 할 때 범용적으로 활용할 수 있습니다.

위의 두 가지 특징뿐만 아니라 다양한 인사이트를 얻을 수 있는 거대한 리액트 커뮤니티와 앱 개발로 확장할 수 있는 모바일 애플리케이션 프레임워크 리액트 네이티브(React-Native) 지원 등도 많은 기업이 프론트엔드 개발에 리액트를 활용하는 이유입니다. 그렇게 리액트는 오늘날 국내외 유수 기업에서 사용하는 명실상부한 대표 프론트엔드 개발 도구로 자리매김했죠.

4. 개발자 VS 프론트엔드 AI, 어디까지 가능할까?

프론트엔드 개발 직군이 수행하는 여러 가지 업무부터 현업에서 자주 쓰는 개발 도구 리액트까지, 과연 이 중에서 AI는 어디까지 해낼 수 있을까요? 분명 프론트엔드 AI는 개발 업무의 일정 부분을 해낼 능력을 충분히 가지고 있습니다. 이를테면 AI는 신규 기능이나 디자인을 구현하는 코드를 생성할 수 있고, 개발의 품질을 높이는 테스트 코드 작성도 가능합니다. 웹 사이트를 최적화하기 위한 다양한 방법을 끊임없이 제안해 줄 수도 있죠. 하물며 AI는 학습 내용이 축적되면 더욱더 정교한 답변을 제공하므로 시간이 지나면 지날수록 업무를 수행하는 능력이 계속해서 향상됩니다.

그러나 AI가 계속해서 발전하더라도 인간 개발자의 자리가 완전히 사라지기는 어렵습니다. 왜일까요? 그것은 개발자가 단순히 코드만 작성하는 사람이 아니기 때문입니다. 프론트엔드 개발 직군에서 수행하는 일은 코드 작성 그 이상의 복합적인 업무들이죠. 업무 과정에서 요구되는 다음의 능력들은 AI의 답변만으로는 절대 채울 수 없는, 오직 인간 개발자의 역량에 달려 있습니다.

문제 해결 능력

프론트엔드 개발 과정에서는 다양한 문제 상황을 자주 직면합니다. 간단한 문제는 AI도 손쉽게 해결할 수 있겠지만, 복잡하게 얽혀 발생하는 문제에 관해서는 빠르고 효과적인 해결책을 찾아내지 못하는 경우가 많습니다. 학습된 내용만을 기반으로 답변하는 AI는 어쩌면 근거가 없는 내용을 진실인 양 답변하는 환각(Hallucinations) 현상을 나타낼지도 모릅니다. 웹 서비스와 같이 정확하고 안정적인 결과물이 요구되는 분야에서 이러한 부정확성은 큰 문제로 이어질 수 있죠. 얽히고설킨 문제 상황을 전체적으로 관조하며, 실타래를 풀어나갈 핵심 전략을 세우는 문제 해결 능력은 인간 개발자의 고유한 역량입니다.

유연성

개발자에게는 앞으로의 변화와 발전을 고려하는 선구안이 필수적입니다. 새로운 기능을 만들 예정이라면 이를 고려해 코드를 짜야 하고, 새로운 도구를 도입할 예정이라면 기존 프로젝트와 어떻게 연결할지를 고민해야 합니다. 따라서 개발자에게는 빠르게 바뀌는 웹 개발 환경을 고려해 코드의 유연성을 확보해 두는 것이 업무에 많은 도움을 주죠. 이처럼 미래의 변화를 고려하여 코드를 생성하는 것은 인간의 창의성과 계획성이 필요한 부분입니다. AI는 현재의 과업을 가장 효과적으로 처리하는 것을 문제 해결의 중점에 두므로 유연성을 확보하기가 어렵습니다.

개발 도구 이해도

개발 도구를 최대한으로 활용하는 역량도 개발자의 핵심 자질 중 하나입니다. 개발 도구의 특성을 제대로 이해하고 활용하는 개발자는 더 효율적으로 코드를 구성할 수 있습니다. 또 변화하는 기술 환경에 민감하게 반응해야 하는 프론트엔드 직군에서는 개발 능력을 향상하기 위해 계속 새로운 도구와 프레임워크를 습득해야 합니다. 앞서 소개한 리액트 역시 웹 개발 초창기부터 존재했던 도구는 아니었죠. 그러나 AI는 계속해서 생겨나는 모든 개발 도구를 완벽하게 이해하고 사용하지 못합니다. 실제로 리액트는 2013년에 오픈 소스로 세상에 공개됐지만, 챗GPT는 아직도 이를 이용해 정교하고 심화된 코드를 생성하지 못합니다.

협업 능력

궁극적으로 프론트엔드 개발은 협업이 중요합니다. 효과적인 웹 서비스 구축을 위해서는 팀원들과의 원활한 소통이 필수적이죠. 각자의 전문 지식을 토대로 이뤄지는 협업은 더 나은 아이디어의 토대가 되고, 이는 풍부한 사용자 경험으로 완성됩니다. 사용자와 상호작용하는 과정에서 발생하는 요구사항을 처리하기 위해서는 팀 내 협업뿐만 아니라 부서 간 협업도 중요합니다. 기획자, 디자이너, 백엔드 개발자 등 여러 부서와 협업하며 사용자 중심의 기능과 디자인을 만들어 가야 하죠. 이렇게 다양한 의견을 수렴하고 통합하는 능력은 현실 세계에 있는 인간 개발자만이 할 수 있는 일입니다.

5. 대체 불가능한 개발자로 거듭나는 방법

결국, AI는 개발자를 돕는 하나의 도구에 불과합니다. 일 잘하는 개발자가 갖고 있는 역량들은 AI가 대체하기 어렵습니다. 밀려오는 기술의 파도를 이겨내는 개발자는 자신의 역량을 바탕으로 대체 불가능한 전문 인력으로 살아남습니다. 그러므로 프론트엔드를 만드는 개발자는 새로운 기술을 익히고 변화하는 환경에 적응하면서 역량 강화를 위해 꾸준히 힘써야 합니다.

AI의 시대에서 살아남는 개발자로 거듭나고 싶다면 현재 개발 시장에서 가장 핵심적인 도구로 꼽히는 리액트 지식을 함양해 개발 도구 이해도를 높여보세요. 리액트를 탄탄하게 마스터하면 AI가 대체할 수 없는 개발자로서 한 단계 더 성장할 수 있습니다. 국비 지원으로 저렴하게 수강할 수 있는 패스트캠퍼스의 ‘프론트엔드 종합반: HTML&CSS, JS, React’ 강의에서는 웹 전반에 대한 지식부터 HTML, CSS, 자바스크립트, 그리고 리액트에 이르는 전반적인 프론트엔드 지식을 배울 수 있습니다.

앞으로도 프론트엔드 직군의 개발자는 사라지지 않을 것입니다. 체계적인 프론트엔드 학습 로드맵을 갖춘 패스트캠퍼스의 강의를 통해 일 잘하는 개발자로 거듭나세요! 끊임없는 배움과 성장만이 AI에게는 없는 인간 개발자만의 전문성과 인사이트를 갖추는 가장 빠른 방법입니다.

다른 후기가 더 궁금하다면

인사이트 콘텐츠 더 보러가기 👉