프론트엔드 포트폴리오 웹사이트

신입 프론트엔드 개발자를 위한 차별화된 포트폴리오 웹사이트 예시와 제작 방법을 소개합니다.

혹시 아직도 이력서와 포트폴리오를 똑같이 제출하는 신입 개발자분이라면 필독! 요즘 노션이나 깃허브로 프론트엔드 이력서를 작성하는 개발자분들을 보면 하단에 프로젝트 내용을 상세하게 담아서 포트폴리오란에도 동일하게 제출하시는 분들이 많더라고요.
하지만 이력서와 포트폴리오는 엄연히 다르다는 사실!
이력서는 프로젝트, 공부한 기술 등 본인의 경험을 정리해서 전체적으로 보여주지만, 포트폴리오는 다양한 경험 중에서 가장 보여주고 싶은 경험만 뽑아서 보여주는 것이 핵심입니다. 특히, 회사별로 프론트엔드 포트폴리오에 넣을 경험이 달라지는 것도 중요하죠.

노션과 깃허브는 프론트엔드 개발자들이 흔하게 사용하는 이력서와 포트폴리오 제작 사이트입니다. 그래서 더욱 이력서와 포트폴리오의 경계가 모호해졌는데요. 제로베이스 프론트엔드 스쿨에서 흔한 노션, 깃허브로 만든 포트폴리오가 아닌 프론트엔드 포트폴리오 웹사이트를 소개해드리려고 합니다.
웹페이지 내 기능을 구현하는 프론트엔드 개발자라면, 포트폴리오도 웹으로 한 번 만들어봐야죠! 아직 웹페이지는 다루기 어려워서 프론트엔드 포트폴리오 웹사이트 제작을 망설이고 있었나요? 제로베이스랑 같이 시작해봐요.🙂

Chapter 1.
프론트엔드 포트폴리오 웹사이트를 쓰는 이유

프론트엔드 포트폴리오는 노션, 깃허브, PDF 파일 등 다양한 방식으로 제작할 수 있어요. 그중에서도 프론트엔드 개발자들이 웹사이트 포트폴리오를 선호하는 이유는 지원자의 개성을 담은 차별화된 포트폴리오를 제작할 수 있기 때문입니다. 기존 문서형 포트폴리오와 다르게 프론트엔드 포트폴리오 웹사이트는 개발자가 페이지 템플릿 제작부터 관여하기 때문에 다양한 기능을 넣고 꾸밀 수 있습니다. 예를 들어, 자바스크립트를 활용하여 웹의 인터렉티브함을 보여주거나 마우스 포인터 기능을 넣는 등 지원자가 구현할 수 있는 기술의 범위가 제한이 없다는 것이 가장 큰 장점입니다.

더불어 프론트엔드 포트폴리오 웹사이트는 기업에 기술 구현 능력을 어필하는 부분으로도 쓰입니다. 포트폴리오 내 프로젝트뿐만 아니라 웹사이트 디자인, 기능을 통해 지원자의 역량을 한 번 더 눈여겨 볼 수 있는 것이죠. 프론트엔드 개발자 취업을 준비 중이라면 포트폴리오 웹사이트를 제작하는 것을 추천해 드립니다.

Chapter 2.
프론트엔드 포트폴리오 웹사이트 예시 모음

하지만 아직 웹사이트를 제작해보지 않은 분들도 많을 텐데요. 경험해보지 않은 작업을 할 때, 가장 먼저 해야 할 것은 레퍼런스 체크죠. 다른 프론트엔드 개발자분들의 포트폴리오를 최대한 많이 참고해보면서 어떤 내용을 담고, 어떤 항목을 중점적으로 써야 할지 파악해보는 것이 중요해요. 더불어 일부 포트폴리오에서 디자인을 차용하는 것도 좋은 방법입니다.
아래 국내외 개발자분들의 프론트엔드 포트폴리오 웹사이트 예시를 10개 준비해보았는데요. 포트폴리오 웹사이트별 특징을 간단하게 적어놓았답니다. 각각의 장단점이 있으니 본인의 프론트엔드 포트폴리오 웹사이트에는 어떤 방식이 제일 잘 맞을지 비교하면서 확인해보세요!

1) 국내 개발자의 프론트엔드 포트폴리오 웹사이트

2) 해외 개발자의 프론트엔드 포트폴리오 웹사이트

Chapter 3.
프론트엔드 포트폴리오 웹사이트의 필수 항목

앞서 소개드린 프론트엔드 포트폴리오 웹사이트 예시들로 감을 좀 잡으셨나요? 이제 포트폴리오 웹사이트에 꼭 들어가야 할 필수 항목들을 알려드릴게요. 기업 담당자의 시선을 사로잡는 자기소개부터 구체적인 프로젝트 정리 방법만 안다면 프론트엔드 포트폴리오 웹사이트 제작은 금방이겠죠?!

1) 사이트명

프론트엔드 포트폴리오 웹사이트 예시를 보면 모두가 본인의 이름 또는 닉네임으로 사이트 제목을 설정하고 있습니다. 웹사이트는 기업에 제출할 때, URL 형식으로 제출하기 때문에 이 주소도 본인의 개성을 보여주는 하나의 도구가 될 수 있다는 점!

2) 자기소개

모든 이력서, 포트폴리오에 필수로 들어가는 항목이죠. 하지만 프론트엔드 포트폴리오 웹사이트는 여기서도 차별점을 보여줄 수 있습니다. 먼저, 자기소개와 학력, 경력은 이력서처럼 길게 쓸 필요는 없습니다. 메인 페이지에 자신의 개발 철학 혹은 목표 지점을 말하며 간단하게 소개를 끝내는 것이 가독성을 더 높일 수 있습니다.
또한 웹페이지 내 본인의 캐릭터나 타이포그래피 등의 효과를 활용하여, 기업 담당자가 문서형에서 무심코 넘어갔던 자기소개에 한 번 더 이목을 집중시킬 수 있습니다.

3) 프로젝트

포트폴리오를 제작하는 이유에는 프로젝트 소개 목적이 가장 큽니다. 그 이유는 프로젝트 - 포트폴리오 - 면접, 이 3개의 연관성때문입니다. 면접에서 기업 담당자는 포트폴리오 속 다양한 경험을 통해 지원자의 역량을 파악하고 질문을 던집니다. 프로젝트를 상세히 기술하고, 이해하고 있을수록 지원자의 대답도 더욱 풍부해지겠죠? 그렇기에 프론트엔드 포트폴리오 웹사이트에서 프로젝트는 절대 빼놓을 수 없습니다. 아래 프론트엔드 포트폴리오 웹사이트의 프로젝트에 들어갈 내용을 적어놓았습니다. 추후 포트폴리오 웹사이트를 제작할 때 참고해보세요.

Chapter 4.
프론트엔드 포트폴리오 웹사이트 유의사항

프론트엔드 포트폴리오 웹사이트 제작에 필요한 과정을 모두 알았다면 이제 마지막으로 제작 시 유의사항을 짚고 넘어가야죠.
웹사이트 포트폴리오 제작을 고려 중이라면 이 부분을 놓치지 말고 꼭 확인하세요.

1) 프론트엔드 포트폴리오 웹사이트 디자인도 신경쓰기

프론트엔드 개발자라면 당연히 디자인도 중요하겠죠? 특히 메인 페이지 화면은 기업 담당자가 지원자의 포트폴리오를 계속 볼지에 대한 여부를 결정하는 부분입니다. 그래서 바로 보여줄 수 있고, 즉시 설명이 가능한 디자인과 UI로 웹페이지를 제작해야 합니다.
만약 디자인적 감각이 부족하다면 앞서 본 프론트엔드 포트폴리오 웹사이트 예시에서 디자인을 차용하거나 템플릿을 활용하는 것을 추천드려요.

2) 무료 서브도메인 사용 자제하기

Freenom.com / herokuapp.com과 같은 무료 서브 도메인 사용은 비추천합니다. 프론트엔드 포트폴리오 웹사이트를 제작한다면 반드시 커스텀 도메인을 구매해서 연결해야 합니다. 무료 도메인은 악성코드 같은 잠재적 위협이 늘 있기 때문입니다. 더불어 도메인이 언제든 회수될 수 있다는 단점도 있죠. 이런 기본적인 것들을 하지 않는다면 기업 담당자에게 꼼꼼하지 않은 인상을 줄 수 있기에 꼭 유의해야합니다.

3) 라이브 프로젝트 링크 버튼 필수로 추가하기

프론트엔드 포트폴리오 웹사이트에 프로젝트 이미지 혹은 이름만 적어놓았다면 꼭 연결 링크까지 추가해주세요. 프로젝트 이미지만 있다면 기업 담당자가 관심을 가져도 더 많은 정보를 얻을 수 없죠. 그러므로 라이브 프로젝트를 볼 수 있는 버튼을 꼭 만들어보세요. 실제 프로젝트 웹사이트나 깃허브를 연결하면 단순한 이미지 한 장보다 지원자의 프로젝트를 더 풍부하게 보여줄 수 있습니다. 만약 화면이 없는 프로젝트라면 깃허브에 코드만 올리고 README를 꼼꼼하게 적는 것을 추천해 드려요

마치며

오늘은 프론트엔드 포트폴리오 웹사이트 예시 모음과 제작 시 유의할 점에 대해 알아보았습니다. 많은 프론트엔드 개발자분들이 아직 이력서와 포트폴리오를 함께 쓰고 있는데요. 이번 기회에 프론트엔드 포트폴리오 웹사이트를 한 번 제작해보는 것은 어떨까요?
개발자 본인의 개성이 담긴 포트폴리오인 만큼 기업 채용 담당자와 현직자에게 더 좋은 인상을 보여줄 기회라고 생각합니다. 또한 기존 문서형 템플릿과 다르게 처음부터 끝까지 직접 만들어갈 수 있기에 기능 구현 및 개발 실력도 더 향상될 수 있죠.

하지만 아직 포트폴리오를 혼자 만들기 어렵거나, 포트폴리오 내에 들어갈 프로젝트가 적어서 고민이신가요? 그렇다면 제로베이스 프론트엔드 스쿨을 추천해 드립니다. 위에 보여드렸던 프론트엔드 포트폴리오 웹사이트 예시에는 실제 수강생분의 포트폴리오도 함께 들어있는데요. 비전공자도 개발자로 한 번에 취업할 정도의 프로젝트와 포트폴리오 웹사이트의 퀄리티를 이미 보셨을 것이라 생각해요. 수강생분이 포트폴리오를 만드는 과정과 프론트엔드 스쿨 후기가 궁금하다면 아래 수강생 후기를 참고해주세요 🙂

제로베이스 프론트엔드 스쿨은 개발자 취업을 준비하는 모든 분들의 러닝메이트로, 언제나 취업까지 함께 간다는 점. 잊지 마세요! 프론트엔드 스쿨에서 개발자 스펙, 경험 제대로 준비하고 한 번에 취업해요!

개발자 취업은 제로베이스

추천 컨텐츠