[Web Portfolio] 웹 포트폴리오를 만들기 위한 과정

우리는 여러가지 경로로 개발에 대해 배운다.

그리고 취업시장으로 나가기 위해 이력서와 포트폴리오를 제작한다.

 

포트폴리오는 크게 웹 포트폴리오, pdf 포트폴리오, Notion 포트폴리오 이렇게 나눠지는 것 같다.

 

본 포스트에서는 웹 포트폴리오를 만들기 위한 과정을 짧게 정리하고자 한다.

 

Web Portfolio를 만들기 위한 과정

1. 정보 수집

: 포트폴리오 안에 어떤 내용을 담을 건지 결정 후에 내용을 채울 정보를 수집해야 한다. 처음 포트폴리오를 만드는 경우 어떻게 만들어야할지 엄두가 안나기 때문에 '개발자 포트폴리오', '비전공자 포트폴리오' 등과 같은 키워드로 찾아보며 참고할만한 레퍼런스를 최대한 많이 보면서 내용 구성을 생각해두는게 도움이 된다.

 

2. 구성(틀) 잡기

: 웹 페이지로 포트폴리오 제작 시 크게 ①one page로 제작(스크롤이 긴 페이지) ②사이트로 제작(여러 페이지 → 여러 html 파일) 이 두가지 방법으로 나눈다. 1번에서 타 개발자들의 포폴 레퍼를 보다보면 아 이사람은 원페이지로 구성했네, 아 이사람은 여러 페이지로 구성했네 정도는 보일거다.

따라서 내가 원하는 구성을 선택하면된다.

 

3. 레이아웃 만들기(화면 설계하기)

: 어떤 요소를 어디에 배치하고 구성을 어떻게 할건지 설계한다. 기본적인 화면 설계 없이 작업하다보면 디자인 작업에만 너무 많은 시간을 할애하기 때문에 미리 내가 어떻게 화면을 설계하고싶은지 생각해두기!

 

레이아웃을 만드는 방법으로는 ①내가 직접 구상 하거나, ②잘 만들어진 템플릿을 이용하여 구현하는 방법이 있다. 공부를 마치고 바로 포트폴리오를 작업할때는 보통 내가 직접 구상한건 매우 볼품없기때문에.. 템플릿을 이용하여 구현하는것을 추천한다. 템플릿으로 작업하다가도 일정 부분은 마음에 들고 일정 부분은 마음에 들지 않아서 어느 파트를 수정해야 할지가 보이기 때문에 차차 커스텀해가는게 가장 나은 방법인 것 같다.

 

템플릿을 찾기 위한 키워드로는 여러가지가 있겠지만 아래와 같이 검색해도 제법 훌륭한 템플릿을 구할 수 있다.

• html5 template
• javascript template
• jquery template
• responsive web template

 

4. 구현하기

: HTML, CSS, JavaScript를 사용하여 1~3번에서 설계한대로 웹 포폴을 구현한다.

 

5. 웹 서비스

: 구현한 웹 사이트를 인사담당자들이 보게 하려면 24시간 동작하는 서버가 필요한데, 실질적으로 집에 이런 서버역할을 할 환경을 갖긴 힘들다. 따라서 웹 호스팅 서비스를 이용한다면 24시간 언제든 특정 링크를 클릭 시 인사담당자들이 내 포트폴리오를 볼 수 있게된다.

 

웹 호스팅 서비스는 무료/유료 다양하게 있는데, 취준생인 우리 입장에서는 웹 포트폴리오때문에 유료로 웹 호스팅 서비스를 이용하는건 좀 아깝다.

 

이때 유용하게 쓰이는 것이 GitHub의 Pages 기능! 호스팅 서비스를 제공하는데, 나도 웹 포트폴리오를 pages를 이용하여 배포했다.

 

GitHub의 Pages에 대한 사용법은 구글에 검색하면 자세히 나오니 참고하면 금방 따라할 수 있다!

 

이렇게만 하면 나도 웹 포폴 만들 수 있다!!!