이제는 평범한 ppt 포트폴리오의 시대는 지났다
개인 사이트 링크를 가진 준비생들이 하나 둘 늘고 있다
그러나 나만의 웹사이트를 제작하는 것이 그리 어려운 일은 아니다
간단하게 HTML을 만질 수 만 있어도 개인 웹사이트를 제작하는 것이 가능하다
HTML5 UP!이라는 사이트에 가면 웹사이트 템플릿을 제공한다
뿐만 아니라 Google에 검색하면 많은 템플릿 사이트가 나오니 다양성을 즐길 수 있다
첫 이미지와 같은 웹사이트이다
심지어 반응형, 맞춤형 Full size의 프레임을 제공하기 때문에
있어보이는 사이트가 제작 가능하다
1. IDE 제작 환경 갖추기
먼저 HTML 에디터를 설치해야 한다
필자는 brackets란 툴을 이용해 html을 위와 같이 편집했다
HTML5 UP!사이트에서
템플릿을 다운받으면 위와 같은 폴더가 나온다
어떤 템플릿을 받아도 무방하다
안에는 이렇게 파일이 많다
가장 메인이 되는 웹사이트 파일이 index 이다
brackets을 통해 폴더를 통째로 넣으면 시작이다
2. 흰 것은 글씨, 노란 것은 이미지
여기서부터 멘붕이 올수도 있지만
전혀 어렵지 않다
왼쪽 상단에 파일 -> 확장 기능 관리자-> 테마
에디터에 테마를 입히면 위의 사진과 같이 글씨 색을 구분할 수 있다
필자는 monokai라는 테마를 입혔다
추가적으로 손볼 곳은
<head>대신에 <head lang="ko">를 넣는 것 뿐이다
빨간 글씨로 나오겠지만
혹시 찾기 힘든 부분이 있다면 Ctrl + F로 태그를 찾아보자
위와 같은 아이콘을 누르면 진행 과정을 실시간으로 볼 수 있다
여기부터는 흰 글씨에 본인이 넣고 싶은 글씨를 넣어보자
이미지 넣는 태그는 <img src="images/">이다
images 폴더안의 pic_01을 불러온 것이다
이제 본인이 필요한 사진을 차근차근 넣고
해당 태그에 본인의 이력서나 취업사진, 무료 이미지들을 삽입해보자
3. 소스 보기
웹에서 소스를 보고 싶다면 F12를 눌러보자
또한, 내가 찾는 부분이 에디터에서 어딘지 알고 싶다면 Ctrl + Shift + C 를 눌러서 태그를 확인하자
에디터에선 Ctrl + F를 누르면 쉽게 찾을 수 있다
4. <!-- 덜어내기 -->
이런 회색 텍스트는 설명을 위한 '각주'이다.
각주는 웹사이트 환경에 전혀 반영이 되지 않으며
<!-- --> 이런 식으로 가두리를 쳐주면 만들 수 있다
웹사이트를 처음 보면 알겠지만
포트폴리오를 위한 사이트가 아니기 때문에
불필요한 요소가 많다
이런 부분은 분명 내 포트폴리오에 들어갈 필요가 없다
이런식으로 icon과 footer를 각주 처리했다
나는 첫 사이트를 만들 때 반이상은 각주처리를 했던 기억이 있다
5. 랜딩 페이지
좌측 프로젝트창에는 index 파일 뿐 아니라 single.html이 하나 더 있다
데모 사이트에서 이 버튼을 누르면 이동하는 랜딩 페이지이다
하지만 버튼 수는 많은데 랜딩 페이지는 single.html하나뿐이다
이 파일을 여러개 복사해서 필요한 만큼 제작하자
에디터에서 편집해 single1.html, single2.html을 삽입해 주면 된다
6. 웹사이트 퍼블리싱
<유료>
본인만의 도메인, 사이트 주소를 가지기 좋은 방법은 cafe24를 이용하는 것이다
그 외에도 AWS, 애저, 가비아 등
가장 저렴한 상품을 고르면 합리적인 유지비로 자신의 포트폴리오를 제출할 수 있다
<무료>
무료 퍼블리싱 사이트는 본인의 주소를 가질 수 없다
하지만 쉽고 간편한데다 무료이기 때문에 포트폴리오용으론 손색이 없다
사이트에 들어가 Get started를 누르면 간단하게 가입한 후 사용 가능하다
본인의 프로젝트 폴더 통째로 칸에 놓으면 완료
사이트 세팅에 들어가
change site name에서 본인의 주소를 넣으면 끝이다
그렇다면 oholic.netlify.app/index.html
위와 같은 형태로 나만의 웹사이트를 가질 수 있다
하나하나 만지다보면 하루가 걸릴 수도 있고 이틀이 걸릴 수도 있다
그러나 항상 같은 자소서, 늘 비슷한 PPT 포트폴리오 보단
위처럼 나만의 웹사이트를 가지는 것이 더 좋을 것이다.
*라이센스 주의
이미 알고 있겠지만 license는 가장 우선이 되는 파일이다
재생산 단계에서 저작권을 어기는 행위는 없었으면 좋겠다