IT개발

프론트엔드 개발자, 추천 사이트와 프론트엔드 포트폴리오 준비법이 궁금합니다

안녕하세요 멘토님. *프론트엔드 개발자를 꿈꾸는 전문대 2학년 청년입니다. 개발자의 꿈을 안고 현재 *생활코딩 프로그램에 참여해 틈틈이 공부하고 있습니다.

하지만 취업 정보도 부족하고 제가 잘 해오고 있는지 확신이 들지 않아서 몇 가지 질문 드립니다.

ⒸBEST-BACKGROUNDS

1. 강의 듣는 것만으론 뭔가 부족한 느낌입니다. 프론트엔드 공부에 도움될 사이트가 또 있을까요?

2. 프론트엔드 개발자가 구체적으로 어떤 일을 하는지 궁금합니다.

3. 개발자로 지원할 때 필요한 포트폴리오를 어떻게 만들어야 할까요?

4. 현재 html/css/vanila js/node.js/vue.js를 순서로 공부할 계획인데 괜찮을까요?

바쁜 시간 내주셔서 감사합니다. 조언 부탁드립니다.

*프론트엔드 개발자: 디자인, 코딩 등 눈에 보이는 기능을 개발하는 사람.

*생활코딩: 일반인에게 컴퓨터 프로그래밍을 알려주는 것을 목적으로 하는 비영리 교육 프로젝트

윤원진 멘토의 답변

개발자 추천 사이트와 사이트별 활용법

반갑습니다. 생활코딩은 실력 있으신 운영자분께서 오랜 시간 꾸준히 운영해온 곳이기에 기초 다지기에 아주 좋은 곳입니다. 저도 뭔가 새로 배우거나 기초를 점검하고 실을 때 가끔 들어가곤 합니다. 꾸준히 하면 투자한 시간과 노력만큼의 결실을 얻게 될 겁니다.

ⒸLukas

개발 공부에 도움이 될 사이트로 다음 세 가지를 추천합니다.

생활코딩 https://www.opentutorials.org
코드 아카데미 https://www.codecademy.com
코드워스/코드카타 https://www.codewars.com

코드 아카데미엔 처음 입문할 때 참고할 수 있는 튜토리얼이 있습니다. 한 번 훑기에 좋아요.

코드 카타는 도장 개념에 가까운, 계속 수련을 쌓아갈 수 있는 곳입니다. 진짜 도장처럼 띠/단 같은 등급도 부여합니다.

여기선 주어진 문제를 풀이할 수 있는데 답은 하나가 아닙니다. 여러 방식으로 풀 수 있지요. 참고로 가장 추천을 많이 받은 답변을 볼 수 있습니다. 즉, 어떻게 풀었는지 알 수 있단 소리죠. 그렇게 가장 효율적이고 아름다운 코드를 작성하는 법을 배워 나갈 수 있습니다.

프론트엔드 개발, 다양한 세부 분야로 나뉘어요

프론트엔드 개발자란 직무를 간단히 설명하기가 어렵습니다. 프론트엔드에도 많은 영역과 역할이 있습니다. 그만큼 알아야 할 내용도 많습니다. 이와 관련해 정리가 잘 된 링크를 공유합니다.

한글 자료를 공유하면 좋겠지만, 한글 자료 중에 제대로 업데이트된 게 많지 않네요. 국내 개발자들도 한글 자료 아카이브를 만들어가는 것을 포기하고 영문 자료 보기를 선택한 분위기입니다.

그래서 영문 자료를 찾는 게 이 필드의 정석 문화이기도 합니다. 당연히 영어 공부를 해서 영어에도 익숙해져야겠지요.

위 링크에 나와 있는 것처럼, 프론트엔드 개발자 내에서도 다양한 직무 명이 있습니다. 일반적으로 ‘Front-end’ 개발자라고 통칭하고, 프론트엔드 영역의 모든 일을 수행한다고 보면 됩니다.

ⒸPixabay

실무 현장에서는 역할을 좀 더 나눠서 *마크업(HTML/CSS)과 QA(테스트)는 별도의 역할로 분리하는 경우가 많아요. 저도 마크업 개발자로서 일하고 있는데, 디자인을 HTML/CSS로 옮기면서 *컴포넌트의 기본 구조를 잡는 역할을 주로 하고 있습니다.

HTML을 작성하는 마크업 업무엔 기본적으로 장애인을 위한 웹 접근성 확보와 검색엔진 최적화가 포함됩니다.

포트폴리오는 양보단 질로 승부해야 합니다

특별히 포트폴리오를 준비해야 한다는 부담은 조금 내려놓아도 될 것 같습니다. 개발자들은 포트폴리오를 만드는 문화가 아니거든요.

요즘은 github계정 프로필이 포트폴리오와 비슷한 역할을 하기도 합니다. 개발자들은 github으로 협업하고, 개인 프로젝트도 github으로 합니다.

github 프로필엔 그런 작업 흔적들이 남아있지요. 그래서 프로필을 보고 ‘아 이 사람이 개발자로서 얼마나 왕성하게 활동했구나’를 볼 수 있습니다.

그 외에 멘티님의 작업물 중에 보여주면 플러스 요소가 되겠다 싶은 게 있다면 그것을 효율적으로 보여주는 방향으로 포트폴리오를 만들어 두는 것도 좋은 것 같습니다.

다만 github 프로필과 다르게 포트폴리오의 양은 전혀 중요하지 않으니, 부끄러운 작업물은 굳이 포함하지 않고 자랑스러운 작업물 위주로 정리하는 편이 낫습니다.

Ⓒtyler franta

필요와 흥미를 기준으로 공부계획을 세우세요

멘티님이 언급한 순서대로 공부하는 것도 괜찮아 보입니다. 질문에 적은 개발자 로드맵에도 선형적으로 공부해야 할 내용들이 포함되어 있긴 하지만, HTML/CSS/JS를 익힌 이후에는 어떤 순서로 진행해도 무방하다고 생각합니다.

다만 필요와 흥미를 고려해서 지속적으로 잘 학습할 수 있는 아이템 위주로 공부하면 더 좋을 것 같습니다.

개발자는 꾸준히 성장만 한다면 타 직종으로 전환할 필요가 없는 장래성이 좋은 직종이라고 생각합니다. 지금처럼 계속 정진해서 좋은 성장 이뤄나가길 바랍니다. 화이팅!

*마크업: markup. HTML 문서의 포맷을 정하고 요소들을 집어넣어 문서를 만드는 것

*컴포넌트: 소프트웨어 개발을 마치 레고 블록 쌓듯이 쉽게 할 수 있도록 하는 기술

윤원진 멘토 팔로우 질문하기

레진엔터테인먼트 · 개발팀

대표 멘토링 분야

Front-end 개발, 마크업 개발

멘토링 분야

IT개발

직무