10분만에 개인 웹사이트 만들기 #2
뚝딱뚝딱 만들기. 바퀴는 다시 만들지 말고.
개인 포트폴리오 사이트를 구축해보자.
"10분만에 홈페이지 만들기"의 두 번째 글이다.
눈치 빠른 독자는 이쯤에서 알아차렸을 것이다.
포스팅에서 다루는 주제마다 각 10분 남짓 걸려서 실제로는 수십분만에(...) 시리즈가 될 예정이다.
순서가 거꾸로 흘러간다고 느껴질 수도 있지만 그냥 어디선가 다운받은 HTML 파일을 그대로 올려놓고 쓰려는 경우 지난 글만 봐도 충분하다. 인터넷만 된다면 어디서든 접속 가능한 '홈페이지' 맞다.
"나 홈페이지 만들었다~ 주소는 {아이디}.github.io야."
(That's it.)
But, 그러나.
...혹시 부끄러워서 이런 걸 도저히 '홈페이지'라고 공개하지는 못하겠다면?그럼 이번에는 어떤 코드를 가져와서 이름만 바꿔서 올리는 것이 아닌, '나만의' 홈페이지를 만드는 방법이다. 코딩을 좀 가미해서 말이다.
(다음에 진짜 나만의 홈페이지 만들기에 대한 글도 계획 중이다. 그 다음은 진짜진짜 나만의 홈페이지, 또 그 다음은...)
바로 그 '나만의 홈페이지'를 만드는 방법은 여러 가지다. 적정기술을 택하자. 예컨대,
1. HTML, CSS, JS를 다 공부할지
2. HTML, CSS까지만 공부할지
3. HTML 문법만 살펴볼지
4. 바퀴의 사용법만 익힐지(바퀴의 재발명은 피하자)
1번은 미래의 개발자 그중에서도 프론트엔드 개발자에게 추천한다. 다 꼭 필요한 기본기들이다. 2번은 취미로 홈페이지를 만들고 꾸밀 애호가에게, 3번은 알쓸신잡*을 지향하는 일반인에게 적합할 듯싶다. 마지막 4번이 가장 비용 효율적(Cost-effectiveness)인 선택이다. 그렇다. 우리 시대의 언어로 가성비라고 하는 그거다.
*알아두면 쓸데없는 신비한 잡학사전(tvN)이 되고 싶다면
HTML, CSS, JS가 무엇의 약자인지, 그게 무슨 역할을 하는지 설명하는 데만도 10분은 걸릴 것 같다. 제목처럼 10분 만에 다 완성시켜 보려면 가성비가 뛰어난 4번을 택하자.
또
이제부터 '10분 만에'의 시작이다.
잘 따라가보자.
1. 템플릿이 마련돼 있는 다음 주소로 가서 제일 마음에 드는 디자인을 고른다.
https://startbootstrap.com/template-categories/one-page
- 하나하나 눌러보고 [Live Preview]로 전체 구성을 확인한다.
- 가장 마음에 드는(따라하고 싶은) 구조의 템플릿을 [Download]한다.
※ 위 주소는 부트스트랩 테마/템플릿이 공개된 링크로, 다른 소스가 있다면 그것도 상관없다.
디자인을 고르는 시간마저 아끼고 싶다면...
2. 파일을 수정할 준비를 한다.
1) 다운로드한 Zip파일의 압축을 푼다.(윈도우 기준 우클릭 - 압축풀기)
2) 탐색기에서 index.html을 더블클릭하고 브라우저에서 확인한다. 웹브라우저(MS 익스플로러, 구글 크롬 등)에 방금 고른 그럴싸한 홈페이지가 나타날 것이다.
3) 이번에는 다시 탐색기로 가서 쉬프트 키를 누른 채로 index.html 파일 우클릭 - 연결 프로그램 - 메모장이나 기타 편집기 선택
*이 과정이 어렵게 느껴진다면 메모장을 열고, index.html을 마우스로 드래그하면 코드를 열어볼 수 있다.(캡쳐화면 좌)
**줄바꿈 등의 문제로 메모장에서 도저히 알아볼 수가 없다면 Brackets같은 전용 에디터를 추천한다.(캡쳐화면 우)
앗, 잠깐.
'10분만에'의 본분을 망각했다.
메모장에서처럼 정체를 알아볼 수 없는 글자의 집합을 아름답고 예쁘게 표시해주는 formatter나 beautifier를 이용해보자. 프로그램을 따로 설치할 필요 없이 온라인으로 접속하고 메모장에서 Copy&Paste(a.k.a. 복붙)해서 쓸 수 있다.
기능은 대강 비슷하니 아무거나 택하자.
http://minifycode.com/html-beautifier/
3. 타이틀 이름과 주소 등 텍스트를 살포시 수정한다.
- 2-2에서 열어둔 브라우저에서 바꾸고 싶은 부분을 찾는다.
- 2-3으로 띄운 메모장/온라인 편집기 등에서 그 단어를 검색(Ctrl+F)한다.
- 그 텍스트만 고스란히 본인에게 맞춰 바꾼다.
- 저장한다. (온라인에서 작업 중이었다면 다시 index.html을 열어뒀던 메모장으로 옮겨서 저장)
Before
After (무엇이 무엇이 바뀌었을까?)4. 브라우저에서 다시 열어본다.
- index.html을 또 더블클릭하거나, 2-2에서 열어둔 브라우저에서 새로고침(F5)하면 된다.
5. 10분이 되기 전까지 3번과 4번 과정을 반복한다.
- 디자인을 고르느라 5분이 걸렸다면 나머지 5분 동안만.
- 굳이 설명하진 않았지만 텍스트를 수정하는 것 외에도 본인이 원하는 이미지를 기존 소스와 동일한 크기(pixel)로 맞춰서 동일한 경로(path)에 덮어쓰면 사진도 바꿀 수 있다.
6. 완성!
(누군가 만들어둔 템플릿을 바탕으로) 나만의 홈페이지를 만들었다.
인터넷에서 확인하려면 당연히 업로드해야 한다.
어디라도 상관없지만 일단 github.io에 올리는 건 지난 글에서 다뤘다. 친절하게 다시 옮겨적자면,
- 본인의 깃허브 페이지 저장소(https://github.com/아이디/아이디.github.io)에서
- [Upload files] 버튼 선택
- 다음 화면에서 방금 다운받아서 수정한 파일 모두를 드래그하여 전부 업로드한다.
- 녹색버튼(Commit changes) 클릭
업로드까지 성공적으로 완료됐다.
굉장히 쉽게 만들었지만 모바일 페이지도 지원하는 스마트한 홈페이지다.
Responsive, full screen modal windows for featuring project details
Mobile friendly contact form with floating form labels(피쳐 소개 中)
별 고민 없이 템플릿(테마)을 다운 받아서 그중 타이틀과 일부 설명 텍스트만 본인에게 맞게 수정한 후에 깃허브에 업로드하는 과정 자체는 10분도 채 안 걸렸을 것이다.
이정도로 만족스러운가 아니면 더 공부를 하고 싶어 졌는가. 관심이 생겼다면 그 정도에 따라 서두에 나열했던 적정기술 분류에서 3번부터 밟아 올라가면 된다. HTML 문법을 익히면 단순 텍스트 대체 외에도 링크를 추가한다거나 버튼을 추가/제거하거나, 새로운 표(table)와 목록(list)을 생성할 수 있다. CSS를 공부하면 배경 색상을 변경하고 각 요소의 크기나 배치 등을 자유롭게 조절할 수 있다. 간단한 애니메이션 효과를 넣을 수도 있다. JavaScript까지 공부한다면 웹 서비스까지는 어렵더라도 개인 홈페이지 수준에서 흔히 상상할 수 있는 대부분의 일들을 '프로그래밍'할 수 있을 것이다.
1. HTML, CSS, JS를 다 공부할지
2. HTML, CSS까지만 공부할지
3. HTML 문법만 살펴볼지
4. 바퀴의 사용법만 익힐지
사실 지난번과 진행은 동일하다. 단지 어디에서 바퀴를 찾아 가져올 것인가에 대한 내용을 더했을 뿐이다. index.html 파일을 만들거나 일부 수정해서 인터넷의 한 공간에 업로드하는 것으로 동일하게-간단하게-했는데 결과물은 사뭇 다르다.
인터넷에는 굉장히 좋은 소스들이 많다. 굳이 HTML을 하나하나 공부하지 않아도, 극단적으로는 HTML 태그가 어떻게 생겼는지조차 몰라도 이번과 같은 방법으로(브라우저에서 확인-텍스트 검색-그 부분만 수정-저장) 원하는 바를 달성하면 된다고 생각한다.
이쯤에서 한 가지 당부하고 싶은 말은 저작권(license)은 반드시 준수해야 한다는 점이다.
예제로 사용한 Freelancer 테마는 "Copyright 2013-2016 Blackrock Digital LLC. Code released under the MIT license."라고 표시돼 있다. 뭔가 설명을 할 때마다 새로운 용어들이 꼬리에 꼬리를 물게 되는데 궁금한 내용은 위키백과를 찾아보자.
-.NULL
