웹 프로그래밍 - HTML 템플릿

사람이나 일이나 인상이 참 중요한데요, 개발도 마찬가지인 것 같아요.

간단한 프로토타이핑이라도 결과물의 비쥬얼이 허접하면 기술도 평가절하될 수 있습니다.

그렇다고 개발자가 디자인 전문가도 아닌데, UI까지 만들기도 쉽지 않고...

---

바로 이럴 때, HTML 템플릿을 활용합니다!

 

HTML 템플릿이란, 컨텐츠만 살짝 바꿔서 즉시 사용할 수 있는 코드 집합으로, 좋은 퀄리티의 템플릿 하나 정도 포장용으로 갖고 있으면 여러 모로 유용합니다. 요즘 웹 프로그래밍은 기본적으로 HTML, CSS, Javascript 등으로 잘 나누어져 있기 때문에, 보통 HTML 텍스트 정도만 바꿔서 사용할 수 있습니다.

 

Where?

그럼 어디에서 이런 템플릿을 구할 수 있을까요?

인터넷 검색에 'html template'으로 찾아보면, 무료 HTML 템플릿 사이트들이 있는데요, 어떤 것을 구하더라도 반드시 라이선스 조건을 꼼꼼이 살펴야 합니다.

 

참고로 저는 아래 사이트에서 레스토랑 템플릿을 받아 활용한 적이 있어서 해당 템플릿을 보여드리려고 했는데, 찾아 보니 템플릿이 내려갔는지 보이지 않네요. (광고 아님. 아래 사이트와 아무 관련 없어요~)

 

548+ Free HTML CSS Templates by TemplateMo

※무료라고 써있긴 한데, 라이선스 이슈가 있을지도 모르니 공개적으로 사용하실 땐 반드시 꼼꼼히 확인해 보세요.

 

또한 요즘 반응형 웹이 기본이라서 기능을 포함한 템플릿이 많을 겁니다. 반응형 웹이란, 가령 PC로 접근했을 때와 모바일로 접근했을 때 컴포넌트들을 보기 좋게 자동 배치해주는 기능이죠.

 

실행하기

다운로드 받은 템플릿을 확인해 보려면, 간단한 웹 서버를 띄어서 확인할 수 있습니다. 가령, node.js가 설치되어 있다면, live-server를 설치하면 되는데,

• (설치) npm install -g live-server
• (실행 - 템플릿 코드가 있는 디렉토리에서) live-server ./ 

이후 브라우저를 열어 http://localhost:8000 을 입력하면 현재 디렉토리 기준 public/index.html에 해당하는 템플릿이 보입니다.

 

여기서 잠깐! 혹시 결과가 나오지 않는 경우에는 개발자 툴(크롬 기준 F12키)을 실행해서 콘솔(console)을 확인해봅니다. 보통 CORS 문제가 많이 발생하는데요, console 로그에 cors 어쩌구가 뜨면서 안되는 것이라면, 아래와 같이 --cors 옵션을 줘서 다시 실행해 봅니다.

• (실행) live-server ./ --cors

그래도 안 되면...... 로그를 보고 인터넷을 찾아봅니다.

 

수정하기

텍스트 에디터로 수정할 수도 있겠지만 무료 툴인 Visual Studio Code를 권장합니다.

 

Visual Studio Code로 템플릿 소스를 폴더째 열어서 html 파일들을 살펴봅니다. 전체 찾기로 변경하려는 텍스트를 찾아가면서 보는 것도 방법이죠. HTML 문법을 잘 몰라도 텍스트 위주로 바꾸면서 브라우저를 리프레쉬(F5) 하다 보면 대충 어디를 바꿔야 하는지 눈에 들어올 것입니다.

 

여기에 별도의 웹앱을 만들어 연동하고 싶다면, 간단히 버튼이나 링크 태그를 넣어서 열리도록 하면 되겠죠.

• (버튼) <button onClick='window.location.href="~~~.html"'>My App</button>
• (링크) <a href="~~~~.html">My App</a>