정리(프론트엔드)

프론트엔드의 뜻(정의)은 무엇일까?

• ‘프론트엔드’는 말 그대로 풀어보면 ‘프론트’는 앞이고 ‘엔드’는 끝, 즉 단면이라는 뜻을 가지고 있다
• 결국 ‘앞면’이라는 뜻이다
• 사업에서 ‘앞’이란 소비자들과 직접 만나는 활동을 의미한다

결국 ‘프론트엔드’는 사용자가 서비스를 이용하기 위해 웹페이지나 앱 내에서 만나고 경험하는 모든 부분을 말한다

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

프론트엔드 개발자는 무슨 일을 하나?

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

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

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

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

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

• 즉, 프론트엔드 개발자는 웹사이트나 어플리케이션 등의 사용자 인터페이스(UI)를 구현하는 일을 한다

• 이를 위해 HTML, CSS, JavaScript 등의 언어를 사용하는 것이다

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

여기서 잠깐! 퍼블리셔와 프론트엔드 개발자의 차이점은 뭘까?

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

• 퍼블리셔는 디자인을 토대로 HTML, CSS, JavaScript 등의 웹 기술을 활용하여 웹사이트나 애플리케이션을 구현한다

• 따라서, 디자인과 프론트엔드 기술에 대한 기초적인 지식과 능력이 필요합니다. 주로 웹사이트의 정적인 콘텐츠를 구현하며, 동적인 기능 구현은 퍼블리셔의 업무 범위를 벗어난다

• 반면, 프론트엔드 개발자는 웹사이트나 애플리케이션의 사용자 인터페이스(UI)를 구현하는 역할을 맡는다

• 또한 API를 통해 서버와 데이터를 주고 받는 것까지 구현하며, 백엔드와의 연동을 통해 동적인 기능을 구현한다

• 또한 웹사이트 전반을 관리하고 유지 보수하는 업무까지 담당한다

• 따라서, 프론트엔드 개발자는 퍼블리셔보다 웹사이트나 어플리케이션을 만드는 업무의 더 깊숙한 부분까지 관여하게 된다

• 그렇기 때문에 프론트엔드 개발자에게 요구되는 개발 역량이나 기술 지식들이 퍼블리셔보다 높은 수준을 요구하게 된다

웹퍼블리셔에서 프론트엔드 개발자로 전향이 가능할까?

• 앞서 말했듯이 프론트엔드 개발자에게는 웹퍼블리셔보다 더 높은 개발 역량과 기술 스택에 대한 지식이 요구된다

• 따라서 웹퍼블리셔에서 프론트엔드 개발자로 바로 전향하는 건 쉽지 않아요. 하지만 이것이 불가능하다는 뜻은 아니다

• 오히려 웹퍼블리셔 분들은 훨씬 쉽게 프론트엔드 개발자 취업 준비를 하실 수 있을거다

• 왜냐하면 웹퍼블리셔의 업무 자체가 HTML/CSS에는 이미 매우 익숙하기 때문이다

• 그렇기 때문에 아예 처음 기초부터 시작하는 것보다 훨씬 수월할 것이다

• 그러니 프론트엔드 개발자를 꿈꾸신다면 자신감을 가지고 도전해보는 것을 추천한다

• 실제로 요즘은 웹퍼블리셔 채용을 거의 진행하지 않는다

• 웹 퍼블리셔의 업무를 프론트엔드 개발자가 흡수하고 있는 추세이다

• 그렇기 때문에 프론트엔드 개발자로의 전향을 꿈꾸신다면 앞으로의 전망으로 보나, 채용수로 보나 빠르게 시작하는 것이 가장 좋을 것이라는 생각이 든다

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

• 사용자 편의 최적화는 웹사이트나 어플리케이션의 성능을 개선하는 작업이다

• 이를 위해 프론트엔드 개발자는 이미지 최적화, 코드 최적화, 캐싱 등의 기술을 사용하여 웹사이트나 어플리케이션의 로딩 속도를 개선한다

• 인터넷 쇼핑을 하다 보면 각 쇼핑 사이트마다 웹페이지 화면의 반응 속도가 모두 다르다는 것을 종종 느낄 때가 있을 거다

• 내가 성질 급한 이용자라 그럴 수도 있지만 나 말고도 분명히 인터넷 쇼핑을 하면서 화면의 로딩과 반응속도가 느려 화면이 모두 뜨기도 전에 종료 버튼을 눌러 본 적이 한번씩 있을거다

• 이때 화면 로딩이나 반응속도가 느린 것은 화면에 보이는 이미지나 재생되는 동영상, 데이터의 양이 많아서이다

• 이런 문제가 있을 때 프론트엔드 개발자들은 불필요한 동영상 재생을 줄인다던지, 이미지의 크기를 조정하는 등 화면 구성을 최적화하여 저같이 성질 급한 사람도 종료 버튼을 누르지 않고 웹사이트에서 오래 머물고 구매 버튼을 누르도록 도움을 준다

3) 서비스 기능을 구현한다

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

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

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

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

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

• 온라인 시장을 여러 브라우저나 운영체제가 분점하고 있기 때문에 어느 한 브라우저나 운영체제의 이용자만의 타겟으로 하여 서비스를 제공하는 사업자는 모든 환경에 최적화된 서비스를 제공하는 사업자보다 열세해 있을 수 밖에 없다

• 프론트엔드 개발자는 사업자의 서비스가 어느 환경에서도 사용자에게 최적화된 경험을 제공할 수 있도록 해야 하기 때문에, 여러 브라우저나 운영체계의 기능 및 차이점에 대해 숙지하고 있어야 한다

5) 보안에 대한 지원을 한다

• 보안이 프론트엔드와 상관있냐 생각하실 수도 있지만 프론트엔드 개발자도 보안 기능을 염두하면서 개발 업무를 진행해야 한다

• 프론트엔드 개발자가 보안에 대한 지원을 할 경우, 웹사이트나 애플리케이션의 보안 취약점을 식별하고, 이를 해결하는 방법을 찾아내는 역할을 맡는다

• 이를 위해서는 웹 보안에 대한 전문 지식이 필요하며, OWASP Top 10과 같은 보안 취약점에 대한 이해가 필요하다

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

프론트엔드 개발자는 누구와 협업할까?

1) UXUI 디자이너와 협업한다

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

2) 백엔드 개발자와 협업한다

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

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

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

프론트엔드 개발자는 어떤 역량을 가지고 있어야 할까?

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

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

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

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

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

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

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

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