내려받은 HTML 템플릿을 우리 회사 페이지로 바꾸는 법

Qorlize 팀 작성 · 마지막 검토 2026년 11월 12일

Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기

잘 만든 HTML 템플릿 하나면 몇 주치 작업을 아낄 수 있습니다. 압축 파일을 풀고 index.html을 열면 "Agency"라는 회사의 세련된 페이지가 나오고, 웃고 있는 직원 사진과 "123 Main Street, New York" 주소가 보입니다. 이것을 우리 페이지로 바꾸는 일은 대부분 바꿔 넣기입니다. 그런데 나중에 곤란해지는 건 늘 잊어버린 부분입니다. 메뉴에서 여전히 들어갈 수 있는 데모 블로그 페이지, 아무도 받지 않는 전화번호, 템플릿 제작자의 방문 분석 코드가 내 방문자를 세고 있는 경우 같은 것들입니다.

이 글은 되돌아갈 일이 가장 적은 순서로 작업을 정리했습니다.

고치기 전에 라이선스부터 읽기

템플릿마다 사용 조건이 꽤 다릅니다. 보통 LICENSE, license.txt, readme.txt 파일에 적혀 있거나, 내려받은 사이트의 상품 페이지에 있습니다. 세 가지를 확인하십시오.

출처 표시: 무료 템플릿 상당수는 바닥글에 "Design by …" 같은 제작자 표기를 남기도록 요구합니다. 비용을 내야만 지울 수 있게 한 곳도 있습니다. 남겨야 하는 표기를 지우면 정리가 아니라 라이선스 위반입니다.
상업적 이용: 개인 용도로만 쓰게 한 무료 템플릿이 있습니다. 회사 소개 페이지는 상업적 이용에 해당합니다.
사용 가능한 사이트 수: 마켓에서 산 템플릿은 결과물 하나에만 쓸 수 있는 경우가 많습니다. 다른 브랜드나 고객사 페이지에 다시 쓸 계획이라면 라이선스를 하나 더 사야 하는지 확인하십시오.

템플릿 안에 든 요소도 따로 보십시오. 사진, 아이콘 묶음, 글꼴은 각자 라이선스가 있을 수 있고, 특히 데모 사진은 미리보기용으로만 들어 있는 경우가 흔합니다. 어차피 데모 이미지는 전부 바꾼다고 생각하는 편이 안전합니다.

고치기 전에 폴더 구조 익히기

템플릿을 전용 폴더에 풀고, 파일을 열기 전에 먼저 구성을 살펴봅니다. 흔한 구성은 이렇습니다.

index.html
about.html
blog.html
contact.html
css/style.css
js/main.js
images/logo.png
images/hero.jpg
fonts/

이 구조는 그대로 두십시오. HTML이 css/style.css, images/hero.jpg를 상대 경로로 가리키고 있어서, 폴더를 옮기거나 이름을 바꾸면 스타일과 이미지가 깨집니다. 경로와 폴더의 관계가 헷갈린다면 HTML 파일 구조 이해하기를 참고하십시오.

손대기 전에 원본 템플릿을 template-original 같은 이름으로 복사해 두십시오. 나중에 어떤 섹션이 망가졌을 때 다시 내려받지 않고 원본과 비교할 수 있습니다. 간단한 관리 요령은 HTML 파일 버전 관리하기에 있습니다.

그다음 실제로 필요한 페이지를 정합니다. 템플릿에는 홈, 소개, 서비스, 포트폴리오, 포트폴리오 상세, 블로그, 블로그 글, 요금, FAQ, 문의까지 열 페이지쯤 들어 있는 경우가 많습니다. 작은 회사라면 홈 하나에 문의 페이지 정도면 충분한 경우가 많습니다.

로고, 글, 사진, 연락처 바꾸기

페이지 단위가 아니라 항목 단위로 모든 페이지를 훑으며 작업하십시오. "3페이지 완료"보다 "로고는 전부 바꿨다"를 확인하기가 훨씬 쉽습니다.

로고: 내 로고를 템플릿 로고와 같은 파일 이름, 비슷한 비율로 저장해 덮어씁니다. 예를 들어 images/logo.png입니다. 그러면 HTML을 고치지 않아도 모든 페이지에 반영됩니다. 가로나 세로 비율이 많이 다르면 폭을 한 번 조정해야 합니다. 바닥글도 확인하십시오. 어두운 배경용으로 logo-white.png 같은 밝은 로고가 하나 더 들어 있는 경우가 많습니다.
글: 제목과 문단을 우리 내용으로 바꿉니다. 원래 글 길이에 대충 맞추는 것이 좋습니다. 세 단어짜리 제목 자리에 열다섯 단어를 넣으면 휴대폰에서 거의 틀어집니다. 한국어는 영어보다 글자 폭이 넓어 줄바꿈 위치도 달라지니 꼭 확인하십시오.
사진: 데모 사진을 웹용으로 줄인 우리 사진으로 바꿉니다. 4MB짜리 휴대폰 사진을 상단 배너에 그대로 넣으면 페이지가 느려집니다. 웹페이지 이미지 용량 줄이기를 참고하십시오. 템플릿은 alt 문구를 "image"나 빈 값으로 두는 경우가 많으니 함께 고치십시오.
연락처: 전화번호, 이메일, 주소, 지도, 영업시간, SNS 링크입니다. 보통 머리글, 문의 섹션, 바닥글 최소 세 군데에 나옵니다. 데모 전화번호와 이메일로 파일을 검색하면 빠짐없이 찾을 수 있습니다.
페이지 제목과 설명: <title>과 meta description에 템플릿 이름이 그대로 남아 있는 경우가 많습니다. 검색 결과와 브라우저 탭에 보이는 글이 바로 이것입니다.

데모 섹션과 안 쓰는 페이지 지우기

템플릿은 할 수 있는 것을 전부 보여 주도록 만들어집니다. 내 페이지는 내가 가진 것만 보여 주면 됩니다. 지어낸 고객 후기, 쓰지 않는 요금표, 견본 글 세 개가 든 "최근 소식", "만족한 고객 1,250명" 같은 숫자 카운터는 반쯤 채워 두지 말고 지우십시오.

섹션을 지울 때는 글만 비우지 말고 블록 전체를 지웁니다. 내용만 비운 섹션도 자리와 여백은 그대로 차지합니다. HTML에서 섹션은 보통 <section id="testimonials"> 같은 줄로 시작해 짝이 맞는 </section>에서 끝납니다.

그다음 메뉴를 정리합니다. 메뉴에 #testimonials를 가리키는 "Testimonials" 항목이 남아 있으면 눌러도 아무 일도 일어나지 않습니다. 지운 blog.html을 가리키고 있다면 방문자는 "404 Not Found" 화면을 보게 됩니다. 메뉴 항목을 지우고, 메뉴를 한 번 더 반복하는 경우가 많은 바닥글 링크도 확인하십시오.

쓰지 않는 HTML 파일은 링크만 끊지 말고 폴더에서도 지우십시오. 서버에 올라간 파일은 주소를 짐작한 누구나 열 수 있고, 검색엔진이 찾아내 색인할 수도 있습니다.

화면에서 고치는 부분은 Finipage로

위의 작업은 모두 메모장이나 VS Code 같은 텍스트 편집기로 할 수 있고, 여러 파일에 걸친 찾아 바꾸기는 그쪽이 가장 빠릅니다. 페이지 화면을 직접 눌러 가며 고치는 편이 편하다면 Finipage를 쓸 수 있습니다. HTML 파일을 브라우저에서 열어 눈으로 보며 고치는 무료 편집기입니다.

상단 폴더 연결로 템플릿 폴더를 고르면, 상대 경로로 연결된 이미지와 CSS가 편집 중에도 보입니다.
글자는 더블클릭해서 고치고, 사진은 새 이미지 파일을 페이지 속 사진 위에 끌어다 놓으면 바뀝니다.
데모 섹션을 클릭하고 Delete를 누릅니다. 안쪽 상자만 선택됐다면 부모 요소 선택 버튼이나 레이어 패널로 섹션 전체를 먼저 고르십시오.
오른쪽 속성 패널의 문서 항목에서 페이지 제목과 설명을 고칠 수 있습니다.

Finipage는 HTML 파일을 한 번에 하나씩 편집하므로 index.html과 contact.html은 따로 엽니다. 템플릿의 자바스크립트는 편집 중에는 실행되지 않아 슬라이더나 애니메이션이 멈춘 듯 보일 수 있지만, 저장할 때 그대로 남습니다.

마지막으로 남은 흔적 확인하기

남은 HTML 파일을 하나씩 텍스트 편집기로 열어 아래 단어를 검색하십시오. 하나같이 실제로 공개된 페이지에서 자주 발견되는 것들입니다.

견본 문구: "Lorem ipsum", "dolor sit amet", "Your Company", "Company Name", "John Doe", "Agency", 템플릿 자체의 이름.
데모 연락처: "123 Main", "555-", "info@example.com", "yourdomain".
데모 링크: href="#", example.com, 템플릿 제작자의 사이트나 SNS 계정, 테마 데모 주소. 링크를 빠짐없이 시험하는 방법은 링크와 버튼이 작동하지 않을 때에 정리했습니다.
추적·분석 코드: gtag, googletagmanager, analytics, fbq, pixel, 그리고 모르는 도메인을 가리키는 <script src>를 검색합니다. 제작자가 데모 사이트에서 쓰던 추적 ID가 그대로 들어 있는 템플릿이 있습니다. 해당 블록을 지우거나, 같은 서비스를 쓴다면 내 ID로 바꾸십시오. Finipage는 스크립트를 손대지 않고 그대로 두며 소스 편집 기능이 없으므로, 이 단계는 텍스트 편집기에서 합니다.
메타 정보: meta name="author" 태그, 데모 제목과 이미지가 든 Open Graph 태그, 템플릿 로고로 된 파비콘. 파비콘과 링크 미리보기를 참고하십시오.

검색해도 더 나오는 것이 없으면 브라우저로 페이지를 열어 메뉴를 하나씩 눌러 보고, 휴대폰으로도 확인하십시오. 그러면 올릴 준비가 끝난 것입니다.

내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.