프론트엔드 개발자는 무슨일을 하나?! (feat : 신년목표)

⚽️ 개요

제 직무는 Frontend 개발자입니다.

프론트엔드, 백엔드, 클라우드 등등.. 개발자거나 비슷한 업무를 하고 계시지 않다면 옆의 단어들은

굉장히 생소하실 수 있습니다.

“그냥 홈페이지나, 어플리케이션 만드는 사람 아니야?"

라고 말씀하신다면 틀린 말은 아니라고 생각합니다 ㅎㅎ 일부분은 맞으니까요~

그래서 제가 지금 쓰는 글로써 말씀드리고자 하는건 다음과 같습니다.

1. 프론트엔드 개발자는 어떤 업무를 하는가!
2. 프론트엔드와 백엔드 개발자는 왜 나눠졌는가?
3. 어떤 프론트엔드 개발자가 되고 싶은가?

그리고 이 글을 정리하고 동료들에게 발표하고 나서는 크게는 동료들이 제 글을 보고 업무 요청을 쉽게 할 수 있다던가 서로의 일을 이해하고 목표를 공유할 수 있는 글이 되었으면 좋겠습니다.

1. 프론트엔드 개발자는 어떤 업무를 하는가?

프론트엔드란?

프론트엔드는 사용자가 직접 보고 상호작용하는 웹사이트나 애플리케이션의 사용자 인터페이스(UI) 부분을 말합니다. 쉽게 말해 웹사이트에서 우리 눈에 보이는 모든 것이 프론트엔드입니다. 이러한 특성 때문에 프론트엔드 개발자는 사용자와 가장 밀접하게 맞닿아 있는 개발 분야를 담당하고 있습니다.

저는 이러한 프론트엔드 개발의 특별한 위치에서 큰 매력을 느꼈습니다. 프론트엔드 개발자는 단순히 코드를 작성하는 것을 넘어서, 다양한 이해관계자들과 소통하며 제품을 만들어가는 핵심적인 역할을 수행합니다. 사용자의 니즈를 직접적으로 파악하여 구현하고, 서버 개발자와 긴밀하게 협력하며, PM과 디자이너의 비전을 실현하는 가교 역할을 합니다.

특히 흥미로운 점은 프론트엔드 개발자가 다양한 관점에서 프로덕트를 바라볼 수 있다는 것입니다. 사용자의 시각에서는 편의성과 접근성을, 디자이너의 관점에서는 심미성과 브랜드 일관성을, 그리고 기술적 측면에서는 성능과 확장성을 고려해야 합니다. 이렇게 다차원적인 시각으로 제품을 바라보고 발전시켜 나갈 수 있다는 점이 프론트엔드 개발의 가장 큰 매력이라고 생각합니다.

이제 이러한 특별한 위치에 있는 프론트엔드 개발자가 구체적으로 어떤 업무를 수행하는지 자세히 알아보도록 하겠습니다.

프론트엔드 개발자의 주요 업무

1. 사용자 인터페이스 구현
   • HTML, CSS, JavaScript를 사용하여 웹사이트의 구조와 디자인을 구현
   • 반응형 웹 디자인을 통해 다양한 기기에서 잘 작동하도록 개발
   • 사용자 경험(UX)을 고려한 인터페이스 설계
2. 상호작용 개발
   • 버튼 클릭, 폼 제출, 페이지 전환 등 사용자 동작에 반응하는 기능 구현
   • 애니메이션과 전환 효과 구현
   • API를 통한 백엔드와의 데이터 통신 처리
3. 성능 최적화
   • 웹사이트 로딩 속도 개선
   • 브라우저 호환성 확인 및 대응
   • 코드 최적화
4. 협업
   • UI/UX 디자이너와 협력하여 디자인 구현
   • 백엔드 개발자와 협업하여 API 연동
   • 기획자, PM과 소통하며 요구사항 구현

쉽게 요약하자면

“디자이너가 만든 디자인을 구현하고, 웹의 빠른 전달을 위한 최적화, 웹,앱에서 일어날 수 있는 각종 이벤트 구헌을 다양한 디바이스나, 브라우저를 고려해서 만드는 개발자!”

라고 요약 해볼 수 있겠군요..! 😎

근데 그냥 한 사람이 다 만들면 되는거 아닌가요? 서버든, 페이지든?

이라고 생각할 수도 있겠습니다만.. 현재 저희는 나눠서 개발하고 있습니다.

왜 나눠서 개발하는지 어떤 부분이 다르기에 나눠서 개발하는지 백엔드 개발자와 프론트엔드 개발자의 차이를 살짝 알아보죠!

2. 프론트엔드 개발자 vs 백엔드 개발자

비교를 하기위해서 versus를 사용했지만, 이 둘은 아주 긴밀한 협조 관계를 하고 있습니다.

흔히 말해 제가 홈페이지를 만든다면, 백엔드 개발자분은 서버를 만듭니다.

정확히 어떤 차이가 있는지 알아보도록 하겠습니다.

• 프론트엔드 개발자
  • 사용자가 직접 보고 상호작용하는 웹사이트의 표면적인 부분을 담당합니다. 버튼, 메뉴, 레이아웃 등 사용자 인터페이스와 관련된 모든 요소를 개발합니다.
• 백엔드 개발자
  • 사용자에게 보이지 않는 서버 측 로직과 데이터베이스를 담당합니다. 데이터 처리, 서버 관리, API 개발 등 시스템의 내부 동작을 구현합니다.

둘 다 사용자를 고려하여 개발하겠지만, 프론트엔드 개발자는 사용자와 직접적으로 맞닿아 있는 부분을 담당하기에 사용자 경험(UX)에 더욱 집중합니다. 반면 백엔드 개발자는 시스템의 안정성과 보안에 더 큰 비중을 둡니다.

하나의 제품을 만들기 위해서는 긴밀한 협업이 필수적입니다. 프론트엔드 개발자가 만든 인터페이스는 백엔드 개발자가 제공하는 API를 통해 실제 데이터와 연결되어야 하며, 백엔드 개발자는 프론트엔드의 요구사항을 고려하여 API를 설계해야 합니다.

요즘에는 개발환경들이 고도화되면서 백엔드와 프론트엔드 개발의 경계가 모호해지고 있지만, 그래도 효율적이고 더 좋은 제품을 개발하기 위해서 프론트엔드와 백엔드는 마치 자동차의 외관과 엔진처럼 각자의 영역에서 중요한 역할을 수행하며, 이 둘의 조화로운 협업이 성공적인 웹 서비스 개발의 핵심이라고 할 수 있습니다. 사용자에게 최상의 경험을 제공하기 위해서는 두 영역 모두의 전문성과 긴밀한 협력이 필수적이라고 생각합니다.

3. 어떤 프론트엔드(?) 개발자가 되고싶은가?

작년 취준할 때 미래 계획이나, 어떤 개발자가 되고싶냐고 다양한 기업에서 질문을 받았습니다.

“프론트뿐만이 아니라 백엔드, 앱, 등등 혼자 하나의 서비스를 런칭해서 운영 할 수 있는 개발자가 되고싶다.” 라고 말했던 기억이 납니다. 하지만 여기에서 프론트엔드에 물음표를 쓴 이유를 말씀드리자면

“계속 프론트엔드만 할 수 밖에 없는가?” 혹은 “프론트엔드를 엄청 깊게 들어가지 않았는데 풀스택을 지향하는게 이도저도 아닌 개발자가 되지 않을까?”

사실 이부분에 대해서는 아직 고민이 많습니다. 다양한 스택을 경험하고, 마지막에는 둘 다 다룰 수 있는

‘풀스택’ 개발자가 되고 싶습니다만 이도저도 아닌 애매한 개발자가 될까봐 겁이납니다.

파트가 세분화 되어있는 큰 기업에서는 한 쪽만 깊게 팠던 개발자를 선호한다고 합니다.

그렇다고해서 백엔드는 아예 몰라도 되느냐? 는 아닙니다. 서버에서 어떤 일이 일어나는지, 그것이

화면에 어떤 영향을 주는지 알기 위해서는 백엔드 공부도 어느 정도는 필요하죠

하지만 현대 웹개발은 아주 빠른 속도로 발전하고 있습니다. 제가 처음 리액트라는 스택을 사용했을 때는

16버전이었는데 벌써 19버전이 나오고, 리액트에서 좀 더 발전해 Next.js 라는 스택이 나왔고,

프론트단에서 테스트, 모킹, 디자인시스템 등등… 공부할 것들은 정말 너무나 많습니다.

일할 때 뿐만이 아니라 본인의 시간을 할애해서 공부하지 않으면 도태되어 발전할 수 없다는 것..

계속 성장할 수 있다! 라고 생각해보면 매력적이지만 멈추면 흔히 말하는 물경력이 될까봐 무섭기도합니다.

글을 쓰고 있는 오늘 제가 속해있는 오픈카톡 방에서 어떤 질문이 나옵니다.

“프론트엔드만해서 먹고 살 수 있나요? 만약 다른 방향을 공부한다면

1. 프론트/백엔드
2. 프론트/디자인

어느쪽이 앞으로의 커리어에 도움이 될 수 있을까요?” 라고 말이죠.

대부분의 사람들은 1번을 많이 선택하셨습니다만, 다른 의견이 나왔습니다.

‘프론트 하나라도 제대로 하라!’ 라고 말이죠. 입문할 때 웹의 흐름을 보기 위해서 살짝 건드는 것은 괜찮으나,

허접하게 알아봤자 쓸모 없을 것이다. 대답해주시는분은 질문한분이 취준생이라고 생각하셔서 이렇게 말씀해주신 것 같은데 (카톡방이 살짝 과열됐습니다.) 저는 이 말을 듣고 공감이라기 보다는 감명 받았습니다.

말투가 조금 강하시긴 했지만, 좀 더 전문성에 집중해야 “프론트뿐만이 아니라 백엔드, 앱, 등등 혼자 하나의 서비스를 런칭해서 운영 할 수 있는 개발자가 되고싶다.” 라는 제 목표와 이상에 도달할 수 있다고 생각이 들었습니다.

그래서 어떤 프론트엔드 개발자가 되고 싶은지 적고 그 목표에 어느 정도 도달했을 때 다른 부분도 만질 수 있다고 생각이 들었습니다! 그래서 정했습니다! 프론트엔드로 딥다이브하고, 백엔드 쪽은 필요에 의해서만 살짝 살짝 만지는 정도만 건들자! 라구요 .. 잡담이 길었군요.. 결론적으로~ 저는 어떤 프론트엔드 개발자가 되고싶느냐!

1. 사용자의 니즈를 파악하는 프론트엔드 개발자

데이터 기반의 사용자 이해

사용자의 니즈를 파악하기 위해서는 데이터를 읽을 줄 알아야 한다고 합니다. Google Analytics나 Hotjar 같은 분석 도구를 통해 사용자의 행동 패턴을 이해하고, 이를 바탕으로 UI/UX를 개선할 수 있으며, 어떤 페이지에서 사용자들이 이탈하는지, 어떤 기능을 자주 사용하는지, 어떤 디바이스에서 주로 접속하는지 등의 데이터는 우리의 개발 방향을 결정하는 중요한 지표를 이해하고 발전시킬 수 있는 개발자가 될 것입니다.

접근성에 대한 깊은 이해

진정한 사용자 중심 개발자는 모든 사용자를 위한 웹을 만들 수 있었으면 좋겠습니.스크린 리더 사용자를 위한 적절한 aria-label을 제공하고, 키보드 네비게이션을 지원하는 것 등 색맹이나 저시력 사용자를 위한 충분한 대비와 가독성 있는 폰트 크기의 선택을 할 수 있는 개발자가 될 것입니다.

2. 문제해결을 위해 노력하는 프론트엔드 개발자

성능 최적화

현대 웹 애플리케이션에서 성능은 사용자 경험의 핵심입니다. 번들 사이즈 최적화, 코드 스플리팅, 레이지 로딩, 이미지 최적화 등 다양한 기술을 활용하여 최상의 성능을 이끌어내어 Lighthouse 점수를 개선하고, Core Web Vitals를 최적화 할 수 있는 개발자가 될 것입니다.

디버깅과 트러블슈팅

문제 해결능력은 개발자의 핵심 역량입니다. Chrome DevTools를 능숙하게 다루고, 네트워크 요청을 분석하며, 성능 병목현상을 찾아내고 또한 이슈가 발생했을 때 정확한 원인을 파악하고, 이를 체계적으로 해결하는 프로세스를 갖추는 개발자가 될 것입니다.

코드 품질과 테스트

문제 해결은 새로운 문제를 만들지 않는 것에서부터 시작합니다. 단위 테스트, 통합 테스트, E2E 테스트를 통해 코드의 안정성을 보장하고, 클린 코드 원칙을 준수하여 유지보수가 용이한 코드를 작성할 수 있는 개발자가 될 것입니다.

3. 트렌드에 민감한 프론트엔드 개발자

프론트엔드 생태계는 빠르게 진화하고 있습니다. 새로운 프레임워크, 라이브러리, 도구들이 끊임없이 등장하고 있으며, 이러한 변화에 뒤처지지 않는 것이 중요합니다.

지속적인 학습과 적용

새로운 기술을 단순히 아는 것에서 그치지 않고, 실제 프로젝트에 적절히 적용할 줄 아는 안목을 갖추며 새로운 기능들을 학습하고, 이를 프로젝트에 적절히 도입할 수 있는 개발자가 될 것입니다.

커뮤니티 참여

기술 블로그를 구독하고, 컨퍼런스에 참여하며, 단순히 소비하는 것에서 그치지 않고, 커뮤니티에 기여하고 자신의 경험을 공유하는 개발자가 될 것입니다.

실험정신

새로운 기술을 두려워하지 않고 사이드 프로젝트를 통해 새로운 기술을 시험해보고, 이를 통해 얻은 인사이트를 실제 프로젝트에 적용할 수 있는 판단력을 기르는 개발자가 될 것입니다.

😤 결론!

말이 굉장히 길었습니다!

이 글을 통해서 프론트엔드 개발자가 어떤 일을 하고, 왜 포지션이 나눠져있으며

저의 신년, 커리어적인 목표를 적어보았습니다.

이 글은 동료들에게도 전하지만 제 스스로에게도 전하는 글입니다.

피곤하다는 핑계로 발전을 위해서 노력하지 않았던 제 자신에게 반성하는 2024년

2025년은 목표를 위해 한 걸음 더 나아가는 제가 될 수 있도록 부단히 노력할 것입니다!!

2025년의 마지막 회고를 할 때 제가 목표들을 위해서 노력했는지 다시 한 번 체크해볼 것입니다!

신년도 모두 화이팅입니다!!!!