러닝패스

프론트엔드 개발자가 하는 일

무료
시리즈
⚡ 1시간이면 이런걸 할 수 있어요!
프론트엔드 개발자가 실무에서 정확히 어떤 일을 하는지,
누구와 협업을 하는지 등에 대해 배워요
프론트엔드 개발자로서 더 나은 협업을 위한 아이디어도 얻어요
학습 시간을 줄였어요!
1시간
핵심 콘텐츠만 선별했어요!
6개 콘텐츠
이 분들은 꼭 보세요.
프론트엔드 개발이 무엇인지 궁금한 누구나
미리 알고 있어야 해요.
없음
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
많은 사람들이 HTML, CSS로 포토샵 파일, 이미지 등과 함께 웹페이지를 만드는 사람을 프론트엔드 개발자라고 생각하는 경우가 많아요. 하지만 우리가 어렴풋이 알고 있는 프론트엔드(또는 클라이언트) 개발자가 하는 일은 생각했던 것보다 실제로 다를 수 있어요. 프론트엔드 개발자가 정확히 어떤 일을 하는지를 알아야 우리가 배워야 할 지식과 기술들이 보다 명확해지겠죠? 이번 러닝패스에서는 프론트엔드 개발자가 실무에서 주로 어떤 개발을 하는지, 팀으로 일하는 환경에서 누구와 협업을 하는 지 등을 살펴 봅니다.
NOTE
프론트엔드 개발자는 주로 어떤 업무들을 담당 하는지, 그러한 업무 등을 수행하기 위해 어떤 기술들을 사용하는 지, 오랜 실무경력을 지닌 개발자에게서 배워봅시다.
Video
프런트엔드 개발자 학습 방향
출처: https://youtu.be/02RCNUF-2Vw
테크주니어 님의 학습노트
NOTE
프론트엔드 개발자와 백엔드 개발자가 함께 'YouTube' 서비스를 개발한다고 가정했을 때, 각각의 개발자는 구체적으로 어떤 일들을 맡게될까요? 아래 학습노트를 통해 프론트엔드 개발자의 업무 범위를 파악해보도록 해요.
Video
프론트엔드 개발자 백엔드 개발자 무엇을 선택할까? 공부 방법은? (Frontend vs Backend)
출처: https://youtu.be/-y9h5yl7egE
테크주니어 님의 학습노트
💡
이 부분은 심화 학습 이예요. 조금 더 알아보고 싶다면 학습해보세요!
프론트엔드 개발자로서 디자이너와의 더 나은 협업을 하기위한 제안 (아래 내용은 맨 하단의 출처로 적은 곳의 해외 포스팅을 일부 요약 & 번역한 글입니다.) 1. 디자이너의 눈으로 제품을 바라보기 (디테일을 보는 눈을 키워라) 디자이너는 프론트 개발자가 자신들이 그들의 디자인을 보는 것처럼 동일하게 바라봐주기를 원합니다. 그래서 디자이너로부터 받은 작업물을 넘겨받은 후, 개발자가 웹에 구현한 결과에 대해 디자인팀에게 QA 요청을 하지만 폰트, 색상, 간격 등이 조금씩 어긋나는 등의 의도된 디테일이 반영되지 않으면 디자이너는 결과에 실망하게 되죠. 그리고 이런 일은 생각보다 비일비재합니다. 문제의 원인이 뭘까요? 개발자로서 스스로에게 먼저 다음과 같은 질문들을 해볼 필요가 있습니다. - 넘겨받은 이 디자인은 어떻게 생겼는가? 예를 들어, 주석이 달린 이메일을 통해 전달받은 단지 몇 장의 PDF 파일, 포토샵, 또는 Sketch 파일인가? 또한 디자인 시스템, 타이포그라피, 반응형 구조, 인터랙션, 애니메이션 등에 대해 논의된 실제적인 미팅은 사전에 이루어졌었나? - 특정 인터랙션을 화면에 그려주는 데 도움을 주는 인터랙티브나 모션에 관한 프로토타입이 존재했는가? - 정의된 우선순위 레벨과 더불어 중요한 방향들이 목록으로 만들어져 있는가? - 같은 한 공간에서 디자이너와 개발자 간 소통이 얼마나 자주 있었는가? 2. 커뮤니케이션이 핵심 (상대방에 대한 존중을 갖고 커뮤니케이션에 임하라) - 대화를 많이 나누세요. 특히 프로젝트 초기단계에서는 더욱 커뮤니케이션이 빈번하게 그리고 잘 이루어져야 합니다. 가능하다면 지속적으로 디자인 & 제품 실현 가능성에 대해 평가하기 위해 초기 단계에는 디자인 작업에 대한 리뷰를 함께 진행하는 것이 좋습니다. 왜냐하면 디자이너와 개발자는 기본적으로 같은 대상에 대해 각자의 역할에 따른 서로 다른 측면들에 보다 집중하기 때문이에요. - 모든 요구사항, 페이지, 컴포넌트, 기능, 인터랙션, 애니메이션 등등 그 어떠한 것에 대해서 질문과 이야기를 많이 나누고 그것들에 대해 메모를 남기세요. 그리고 그 과정에서 무언가 확실하지 않은 점이 생기면, 상대방에게 다시 명확하게 설명해줄 것을 요청하세요. 3. 디자이너와 개발자 간의 절충안 찾기 - 정해진 기한 안에 모든 요구사항을 충족하면서 성공적으로 프로젝트를 완료하기 위해서는 개발자와 디자이너 간 타협은 불가피합니다. 업무상 충돌, 의견차이 등이 발생했을 때는 "죄송하지만, 그건 만들 수 없어요." 라고 말하는 대신, 디자이너가 '왜'에 대해 납득이 될 수 있도록 설명을 제공해야합니다. 그보다 최선의 방법은 대안책을 미리 준비하여 협의를 시도하는 것입니다. 출처: https://www.smashingmagazine.com/2019/05/frontend-developers-designers/#:~:text=Building%20Trust%20Between%20Designers%20And%20Developers
프론트 개발자와 백엔드 개발자 간 커뮤니케이션을 발전시키기 위한 팁 (아래 내용은 맨 하단의 출처로 적은 곳의 해외 포스팅을 일부 요약 & 번역한 글입니다.) 1. 다방면으로 능숙한 프로젝트 매니저 두기 웹 개발 분야의 세분화가 가속화되면서 개발자들의 업무적 역할과 스킬셋이 다양해지고 있습니다. 이로 인해 나타난 문제점은 그들이 너무 특정 분야로 고착됨에 따라 다른 쪽에 특화된 동료들과의 명확한 커뮤니케이션이 어려워지고 있다는 뜻인데요. 이러한 상황이 프로젝트 매니저의 역할이 가장 필요할 때입니다. 모든 웹 분야에서 통용되는 전문용어에 능숙한 탓에 그들은 프론트엔드, 백엔드 개발자들 사이에서 정보를 잘 조율할 수 있는 사람들입니다. 2. 프로젝트 우선순위에 대한 윤곽을 확실히 정하기 각 팀 멤버들은 각자만의 담당역할이 있는데, 그들의 업무가 프로젝트 전체에 어떻게 기여하고 있는지 각자 반드시 이해하고 있어야 합니다. 모든 우선순위와 목표들은 분명하게 공유되어야 하며, 설계된 프로젝트 일정에서 누군가 벗어날 때, 그 사실을 다른 팀원들에게 알려야 합니다. 3. 컴포넌트 중심의 개발 프로세스로 옮기기 다른 업무 영역을 갖는 개발자들 간의 커뮤니케이션을 위한 가장 쉬운 방법은 어느 한쪽 분야에 치우친 전문용어 사용의 필요성을 최소화하는 것입니다. 그것을 위한 방법이 바로 컴포넌트 중심 개발 프로세스입니다. 기존 프로세스와 다른 점은 모든 웹 페이지와 그 안의 속성 단위로 팀 전체가 협업하는 식이 아닌, 각자의 팀 멤버들이 특정 모듈을 만드는 데 초점을 두게 하는 것 입니다. 가령, 백엔드 개발자들은 그들의 팀 멤버들이 동일한 프로젝트의 다른 엘리먼트들과 통합할 수 있는 컴포넌트를 제작하는 식으로 말입니다. 이것은 프론트, 백엔드 개발자들이 그들 각자만의 언어로 커뮤니케이션을 해야 할 필요를 줄여줍니다. 4. 명확한 디자인 & 개발 프레임워크를 갖추기 사전에 명료한 디자인/개발 프레임워크를 구축함으로써 프론트엔드, 백엔드 개발자 간의 피하기 어려운 커뮤니케이션 상의 착오를 피할 수 있습니다. 당신의 팀에서 바로 사용할 수 있는 여러 웹 프레임워크가 몇 가지 있는데, 그 중 Django는 새로운 해결책들을 빨리 적용해서 배포해보는 게 필요한 개발자에게 이상적입니다. 또한 강력한 유저 인터페이스 라이브러리를 갖춘 Balsamiq 프레임워크는 개발자들이 새로운 코드를 빨리 작성하거나, 수정할 수 있도록 돕습니다. 5. Best Practice를 따르도록 팀원들을 장려하기 어느 전문분야에서든 혼란을 최소화해주는 단일 기준들이 있고 개발 영역도 예외는 아닙니다. 프로그래머들은 동료들이 보다 쉽게 디버그, 컴파일, 코드 수정 등을 할 수 있도록 특정 코딩 컨벤션을 따르도록 권장받습니다. 이러한 컨벤션과 기준들을 지키는 것은 프론트, 백엔드 개발자들이 서로 코드를 교환할 때 더욱 중요해집니다. 어떤 상황이 발생했을 때, 그 상황에 맞는 컨벤션을 명확히 준수할 수 있어야 합니다. 제일 중요한 컨벤션은 다른 프로그래머가 코드를 봤을 때 그 코드 작성자의 사고 프로세스를 따라갈 수 있도록 범용적이고 명확한 주석을 다는 것 입니다. 출처: https://dzone.com/articles/fostering-better-communication-between-back-end-am
QUIZ
다음 보기의 프로그래밍 언어 중, HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어를 고르세요.
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기