컴공 포트폴리오 사이트 - keomgong poteupollio saiteu

개발을 하기에 앞서 기획 부분이 엄청나게 중요하기 때문에 차근차근 정리하면서 서술할 것입니다. 중간중간 든 생각과 행동을 기록하고자 합니다.

왜 만들기로 생각했나?

구직 활동을 제대로 시작하기 위해 취업관련 사이트들을 둘러보았다.

개발자는 깃헙 URL과 포트폴리오 URL이나 파일 기재란이 따로 되있다. 포트폴리오를 위한 사이트가 있어야 되겠다고 생각했다.

부트캠프에서 팀원들과 함께 만든 두 개의 프로젝트와 최근에 인프런 강의를 보면서 만든 클론코딩은 생각해보면 본인 스스로 코딩을 한 것은 맞지만 100% 내가 한 것은 아니였다.

어찌보면 팀원과의 커뮤니케이션을 통해 조율하거나 인프런에서 강의 질문, 관련 깃헙 소스코드를 통해 문제점들을 해결한 것이다.

부분적으로는 알 수 있겠지만, 정작 본인이 어느정도의 역량을 가진 사람인지 알 수 있을까? 더군다나 보여줄게 많이 없는 상태니까... 눈물이 흐르내 ㅠ

그래서 이번에 포트폴리오는 오직 100% 나만의 힘으로 만들기로 하였다. 레퍼런스를 참고하거나 관련 블로그, 구글링을 통해 정말 개발자같은 개발을 해보기로 했다. 막막하구만..🤒

그렇다면 기획을 해볼까?

자! 이제 만들어 보기로 했으니 어떻게 만들어볼까? 기획이라는 것은 어떠한 종류와 형태든지 수요자들의 마음을 사로잡아야한다.

우선, 나의 포트폴리오는 나를 팔기 위해서니까 진솔하고, 꾸밈없이 나 자신을 드러내야겠다고 마음가짐을 하였다.

첫번째, 포트폴리오에 어떠한 내용이 들어가야 될까?

사이트에 들어오게 되면 어? 이건 뭐지? 호기심을 자극해야 될 것 같다.

메인 페이지에는 내가 지금 껏 개발 했었던 작업물들을 보여주어야 되나? 꼭 넣어야 될 사항이 있나? 이럴땐 구글링이지! 갓 구글

다른 사람들은 어떻게 만들었는지 한번 살펴보고자 했다.

  • http://www.garysheng.com/

  • http://findmatthew.com/

  • https://weaklion.github.io/React-PortFolio/

심플하면서도 깔끔하다. 😍

나는 누구인가? 어떤 것을 했나? 무엇을 할 수 있는가? 등 담겨있다.

그렇다면 이와 관련해서 우선, 레이아웃부터 만들어야 될 것 같다. 레이아웃 메모!

두번째, 레이아웃을 만들고 그 다음은?

디자인에 대해서는 내가 디자이너도 아니고 딱히, 미적감각도 뛰어난 것이 아니니까 최근에 썼던 ant design을 이용해야겠다.

그리고 반응형으로 웹사이트를 제작할 것이고, react를 사용할 것이다.

세번째, 배포는 어떻게?

배포는 어떻게 해야될까? AWS로 여태껏 사용해왔는데 요금이 발생한다. 그래도 뭔가 개발자스럽게 돈나가는 것 같아서 기분좋으면서도 약간 엿같은.. 포트폴리오 사이트는 계속 열어놔야하니깐 부담이 된다.

heroku(https://www.heroku.com)는 무료 티어의 경우 한달에 서버를 550시간 돌릴 수 있다고 한다. 또한, 30분동안 아무 접속이 없으면, 잠들게 되며 잠든상태에서 접속을 하면 약간의 시간이 걸리며 깨어나게 됩니다.

찾아보니까 15초 정도라고 합니다. 느려보여서 파토! GG! 계속 깨어있게 하는 방법이 있는데 그냥 귀차니즘

github.io(https://pages.github.com)는 첫 페이지에 이러한 문구가 있었다.

You get one site per GitHub account and organization,
and unlimited project sites. Let‘s get started.
User or organization site Project site

Okay!! 오케이 오카이 너로 정함. Jekyll 이것도 한번 배워볼 수 있는 경험이 될 듯 싶다.
이히힣 신난다신난다 😀😀


다음 블로깅은 레이아웃을 짜고 포스팅하겠습니다.

성장하는 개발자가 되기위해 꾸역꾸역 개발일지를 써보겠습니다! 이제 시작이지만 차곡차곡 쓰다보면 언젠가 누군가에게 도움이 되지 않을까 하는 바람으로 저는 이만 bye~ 아디오스👋

야, 너두 개발자 포트폴리오 만들 수 있어 👉😉

  • 2018.12.21 02:05
  • Job/Portfolio

컴공 포트폴리오 사이트 - keomgong poteupollio saiteu

👋 들어가며

 나는 취업을 준비하면서, 네이버 핵데이 인턴 이후 채용에 필요한 서류를 준비하면서 개발자용 포트폴리오를 만들고 기획해왔다. 컴퓨터 공학과 대학생들은 대부분 취업시기가 다가오는 3~4학년때 이력서 및 포트폴리오를 준비하는데, 막상 포트폴리오를 만들려면 왜 만들어야하는 지 무슨 내용이 들어가야 하는 지, 어떻게 만들어야 하는 지 막막하고 참고할만한 자료도 충분치 않다. 작은 경험이지만 내가 개발자 포트폴리오를 준비하면서 고민했던 것들에 대해 적어보려한다.

🗂 당신이 개발자 포트폴리오를 만들어야하는 이유

포트폴리오를 만들어야하는 이유에 대해 생각하기 전에 우선 포트폴리오의 목적에 대해 짚고 넘어가보자. 포트폴리오의 목적은 단순하다.

내가 이 분야를 얼마나 잘하고 얼마나 열정을 가지고 있는 지 보여주는 것

그럼 이 목적이 포트폴리오를 만들어야하는 이유와 무슨 연관이 있을까? 이 연관성은 면접때 잘 드러난다. 면접자에 대한 아무런 정보도 없는 개발자 면접에서 물어볼 수 있는 질문은 굉장히 포괄적으로 가서 개발의 A 부터 Z까지 물어보게 된다. 예를 들면 웹 프론트엔드 개발자에게 알고리즘 위주의 질문을 한다던가, 서버와 관련된 심도깊은 질문을 할 수 있다. 그러나 면접자가 어떤 기술에 관심있고, 어떤 기술을 잘 하는 지 알 수 있다면 면접관은 컴퓨터 공학(CS) 전반에 대한 질문보다 포트폴리오에 있는 면접자의 기술 스택이나 진행했던 프로젝트에 관련된 질문을 할 것이다. 질문의범위가 줄어든 다는 것은, 면접자 입장에서는 면접 준비에 굉장한 시간적 이점을 가져다줄뿐만 아니라, 면접관 입장에서도 면접자의 그 때 기억력과 운에 맡기는 의미없는 질문이 아닌 정말 생산적인 질문을 할 수 있게 해준다. 간단하게 말하자면 포트폴리오는 면접을 서로가 원하는 방향으로 끌고 갈 수 있는 가장 좋은 방법인 것이다.

컴공 포트폴리오 사이트 - keomgong poteupollio saiteu
개발자 포트폴리오가 있다면, 면접자와 면접관 모두가 윈윈할 수 있다.

남들은 어떻게 했는가? 🤔

 경험해보지 않은 작업을 할 때, 가장 먼저해야 할 것은 누가 뭐래도 남들이 한 작업을 최대한 많이 보는 것이다. 최대한 많은 포트폴리오를 보고 참고하여 각 포트폴리오 간의 공통점을 정리한다. 또한 눈에 띄는 포트폴리오가 있다면, 일부 디자인을 차용하는 방법도 좋다. 나는 예전에 노마드 코더 뉴스레터에 소개되었던 외국 개발자들의 포트폴리오를 잠시 살펴보았다. 주로 프론트엔드 엔지니어들의 포트폴리오이기 때문에 웹사이트 형태로 만들어져있고, 자바스크립트를 이용한 웹의 인터렉티브함을 보여줄 수 있는 방식으로 포트폴리오를 꾸민 모습이다. 

컴공 포트폴리오 사이트 - keomgong poteupollio saiteu

다양한 포트폴리오 예시들

조사한 포트폴리오의 공통점을 정리해보자면, 다음과 같다.

  1. 본인의 이름 또는 닉네임을 사이트 제목으로 설정한다.
  2. 메인 페이지에 본인의 얼굴 혹은 이름을 이쁘게 보여주고, 본인이 사용할 수 있는 프로그래밍 언어 혹은 분야를 적는다.
  3. 메인 페이지만 볼 수 있기 때문에 두괄식으로 구성되어 있으며, 포트폴리오 사이트가 메인의 높이가 매우 길고, 메인 페이지에 엄청난 공을 들인다. 맨 마지막 포트폴리오에서는 저 풍선이 아주 귀엽게 움직인다.
  4. 상단 메뉴는 본인 소개, 프로젝트, 연락처가 공통적으로 존재한다.
  5. 어떤 사이트는 모바일에서 열면 데스크탑으로 봐달라는 경고를 띄우는 등 대부분 반응형을 고려하여 디자인되었다.

위에 언급했던 것처럼 대부분이 프론트엔드 개발자이기 때문에 저 정도의 인터렉티브함까지는 필요하지 않다고 본다. 일반적인 해외 이력서의 양식처럼 정적으로 본인의 프로젝트만 적어놓아도 좋다.

🤷‍♂️ 어떻게 만들지?

포트폴리오를 만들겠다고하면 위의 예시처럼 웹사이트로 만드는 것만 생각할 것이다. 그러나 포트폴리오는 굳이 웹사이트로 만들지 않아도 된다. 위에 언급한 정보만 들어가 있다면, 간단한 PPT나 마크다운, 워드를 이용해서 문서형식으로 만들어도 된다. 아래 언급하지만 노션이라는 노트앱으로도 간단하지만 이쁜 포트폴리오를 만들 수 있다. 웹사이트가 아닌 간단한 문서형식을 원한다면 노션 포트폴리오는 좋은 선택지중의 하나라고 생각한다.

🗣포트폴리오에 대한 말말말

포트폴리오를 만들게 된 계기가 되는 영상들로 어떤 포트폴리오를 만들지, 포트폴리오를 만드는 이유가 무엇인지에 대한 설명이 자세히 나와있다.

📹 포트폴리오의 가치 및 의미 - 포프TV

컴공 포트폴리오 사이트 - keomgong poteupollio saiteu
  • 포트폴리오에 들어가는 프로젝트를 보여주는 방식은 사진, 동영상, 구동가능한 프로그램, 코드, Github 리포지토리 등이 있다.
  • 보안 문제 때문에 첨부 파일의 형태보다는 웹에서 사진이나 동영상으로 보여주는 방식을 선호한다. 또한 이것이 더 직관적이다.
  • 포트폴리오는 최소한 비 전공자가 봤을 때 "뭔가 배우긴 했구나"정도의 느낌이 날 정도면 괜찮다.
  • 포트폴리오는 어디까지나 나를 알리기 위한 도구이다. 올인을하여 과도하게 시간을 투자하지 말자.
  • 결국 면접의 결과는 기술 면접에서 결정된다. 포트폴리오보다 기술 면접을 대비하여 컴퓨터 공학에 대한 기본 과목( 알고리즘, 하드웨어, 아키텍쳐, OS ... )을 복습하는 것이 중요하다.
  • 포트폴리오는 졸업 이 후에 준비하는 것이 아닌, 졸업할 때 완성이 되어야 한다. 만약 포트폴리오가 부족한 상태라면 포트폴리오에 모든 시간을 투자하는 것보다 구직 활동을 하면서 해당 포트폴리오를 개선 시키는 것이 낫다.

📹 [개발자 취업] 포트폴리오 어떻게 정리할까 - Sayun TV

컴공 포트폴리오 사이트 - keomgong poteupollio saiteu
  • 포트폴리오의 프로젝트는 Github을 활용하는 것이 좋다.
  • Github 리포지토리를 포트폴리오에 올릴 경우, README를 잘 정리하자.
  • 개인 개발 블로그는 본인을 어필할 수 있는 좋은 수단이 될 수 있다.
  • 기존의 이메일보다 취업용 이메일을 새로 파는 것도 좋다.

추가적으로 사윤님 채널에 있는 포트폴리오 만드는 과정을 담은 영상도 참고하면 좋다.

포트폴리오의 구성 🙋‍♂️

가장 위의 영상과 예시 포트폴리오를 바탕으로 가장 간단한 포트폴리오의 구성을 나열해보자면 다음과 같다.

  • 포트폴리오 구성
    • 사이트명: 이름 혹은 닉네임 ( 로고를 만들면 더 좋다 )
    • 들어가야 할 내용
      • 자기 소개: 장황하게 써놓기 보다는 간단한 개발자로서의 좌우명
      • 이력 및 학력: 인턴, 외주, 산학, 수상경력 등
      • 연락처: 이메일, 핸드폰 번호, SNS, Linked in, Github
      • 프로젝트
        • 프로젝트 이름 
        • 기술 스택: 큰 기술 위주 세부적인 라이브러리 수준까지는 기술하지 않아도 된다.
        • 프로젝트 기간
        • 프로젝트 내용: 최대한 자세하게 서술
        • 프로젝트 데모: 사진, 동영상, 웹사이트 형식 웹 프로젝트라면 웹사이트 형식이 가장 좋다.

나의 포트폴리오 🤗

나는 웹사이트형과 문서형 두 가지 형태로 포트폴리오를 다 만들었다.

웹사이트형 개발자 포트폴리오

하나는 위에 보인 것처럼 웹사이트 형태의 포트폴리오이다. 제작기간은 이틀정도 걸렸고, 라이브러리 없이 기존 사용하던 보일러플레이트를 사용했는데, 찾아보면 템플릿처럼 사용할 수 있는 디자인이 깔끔한 라이브러리들도 있어서 라이브러리를 이용하는 편이 좋을 것 같다. 사용 라이브러리는 반응형 디자인이 가능한 bootstrap 혹은 tailwindcss를 추천한다.

컴공 포트폴리오 사이트 - keomgong poteupollio saiteu
웹사이트형 포트폴리오
  • 웹사이트형 포트폴리오

문서형 개발자 포트폴리오

다음으로 만든 형태의 포트폴리오는 문서형식의 포트폴리오이다. 툴은 노션이라는 노트앱을 이용했고, 해당 포트폴리오 제작에 관련된 글을 블로그에 올려놨으니 관심있으신 분들은 여기를 참고하자.

컴공 포트폴리오 사이트 - keomgong poteupollio saiteu
노션을 이용한 문서형 포트폴리오
  • 문서형 포트폴리오