가이드 / Finipage / 페이지 고치기

코딩 몰라도 HTML 파일 고치는 방법 세 가지

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

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

외주 업체가 넘겨 준 index.html에서 전화번호 하나, 첫 화면 사진 한 장만 바꾸면 되는데, 파일을 더블클릭하면 크롬에 페이지가 뜰 뿐 고칠 곳이 보이지 않습니다. 어떤 도구를 쓰든 결국 파일 안의 같은 글자를 바꾸게 되므로, 먼저 HTML 파일 속이 어떻게 생겼는지부터 보겠습니다.

HTML 파일 속은 이렇게 생겼습니다

HTML 파일은 글자로만 이루어진 텍스트 문서이고, 브라우저가 이 글자를 읽어 화면을 그립니다. 내용 앞뒤에 붙은 태그가 "이건 제목, 이건 문단"이라고 알려 주고, 태그 안의 속성이 색이나 주소 같은 세부 정보를 담습니다.

<h1>봄맞이 할인</h1>
<p style="color: #1a7f5a;">문의 02-555-0134</p>
<img src="images/hero.jpg" alt="매장 전경" width="800">
<a href="https://example.com/order">주문하기</a>

• <h1>과 </h1> 사이의 글이 제목입니다. 앞은 여는 태그, 뒤는 닫는 태그입니다.
• style="color: #1a7f5a;"는 속성입니다. 글자색을 16진수 색 코드로 정합니다.
• src는 이미지 파일의 위치입니다. alt는 화면 낭독기가 읽어 주는 이미지 설명으로, 이미지가 뜨지 않을 때 그 자리에 대신 나옵니다.
• <a> 태그의 href는 링크를 눌렀을 때 가는 주소입니다.

일상적인 수정은 대부분 태그 사이의 글자나 따옴표 안의 값을 바꾸는 일입니다. 다만 < 하나, 따옴표 하나를 실수로 지우면 그 아래 화면 전체가 틀어질 수 있습니다. <head>와 <body>에 각각 무엇이 들어가는지는 HTML 파일의 구조에서 더 자세히 다룹니다.

메모장이나 VS Code로 직접 고치기

윈도우에서는 파일을 오른쪽 클릭해 연결 프로그램 > 메모장을 고릅니다. 무료인 VS Code를 쓰면 태그와 글자가 다른 색으로 보이고 짝이 되는 닫는 태그도 표시돼 훨씬 덜 헷갈립니다. 맥의 텍스트 편집기(TextEdit)는 HTML을 서식 있는 문서로 열어 버리므로, 설정에서 HTML 파일을 코드로 표시하는 옵션을 먼저 켜야 태그가 보입니다.

• 글자: Ctrl+F로 화면에 보이는 문장 일부를 검색해 그 글자만 바꿉니다. 둘레의 태그는 건드리지 않습니다.
• 색: color:, background, #으로 검색합니다. 위쪽 <style> 안에 한 번 정해 둔 색이 여러 곳에 쓰이는 경우가 많습니다.
• 이미지: <img를 찾아 src 값을 새 파일 이름으로 바꾸고, 그 경로에 실제 파일을 넣어 둡니다.
• 링크: href=를 찾아 따옴표 안 주소만 바꿉니다.

저장한 뒤 브라우저에서 F5로 새로 고쳐 확인합니다. 바꿀 단어나 값이 정확히 정해져 있을 때, 분석 스크립트나 메타 태그처럼 화면에 보이지 않는 부분을 고칠 때는 이 방법이 가장 확실합니다. 반대로 "이 상자를 저 상자 위로" 같은 배치 변경은 중첩된 태그 덩어리를 깨뜨리지 않고 통째로 잘라 붙여야 해서 어렵습니다.

브라우저 개발자 도구는 왜 저장이 안 될까

크롬이나 엣지에서 페이지를 오른쪽 클릭해 검사를 누르거나 F12를 누르면 개발자 도구가 열립니다. 요소(Elements) 패널에서 글자나 스타일 값을 더블클릭하면 바로 바뀌고 화면에도 즉시 반영됩니다.

하지만 기본 상태에서는 디스크의 파일이 아니라 브라우저 메모리에 올라간 사본을 고치는 것이라, 새로 고침을 누르면 모두 사라집니다. (크롬의 Workspaces 기능을 설정하면 로컬 파일에 저장할 수도 있지만 개발자용 기능입니다.) 한 시간 동안 다듬어 놓고 새로 고침 한 번에 날리는 일이 생각보다 흔합니다. 개발자 도구는 "이 파란색을 조금 진하게 하면 어떨까", "이 영역은 어느 태그가 만들까"를 확인하는 연습장으로 쓰고, 원하는 값을 찾으면 다른 도구로 실제 파일에 옮겨 적습니다.

시각 편집기로 화면을 보며 고치기

시각 편집기는 완성된 화면을 띄워 놓고 마우스로 눌러 고친 뒤, 결과를 다시 HTML로 저장해 줍니다. Finipage도 그중 하나로, 설치 없이 브라우저에서 finipage.app/app/을 열어 무료로 씁니다. 파일은 브라우저 안에서 열고 저장하며 서버로 올라가지 않습니다.

1. 파일 열기(Ctrl+O)를 누르거나 .html 파일을 창에 끌어다 놓습니다.
2. 제목이나 문단을 더블클릭해 글자를 고치고 Esc로 끝냅니다.
3. 요소를 한 번 클릭해 고른 뒤 오른쪽 속성 패널에서 글자색, 배경색, 글자 크기, 폭, 바깥 여백과 안쪽 여백을 바꿉니다.
4. 이미지는 속성 패널의 이미지 바꾸기를 누르거나 새 이미지 파일을 기존 이미지 위에 끌어다 놓습니다.
5. 링크는 선택한 뒤 링크 칸에 새 주소를 넣습니다.
6. 순서를 바꾸려면 선택 상자 옆 손잡이를 끌거나, 앞뒤 요소와 자리를 바꾸는 버튼을 씁니다.
7. Ctrl+S로 저장합니다. 크롬·엣지에서는 처음 한 번 허락하면 원본 파일에 덮어쓰고, 파이어폭스·사파리에서는 새 파일로 내려받습니다.

한계도 있습니다. images/hero.jpg처럼 상대 경로로 넣은 이미지는 파일만 열면 비어 보이므로 상단 폴더 연결로 HTML 파일이 든 폴더를 골라야 합니다. 또 소스 코드를 직접 입력할 수 없으므로 스크립트나 제목·설명 외의 메타 태그는 메모장에서 고칩니다.

상황별로 고르는 법

섞어 써도 됩니다. 대부분은 화면을 보며 고치고, 정확히 한 줄만 손봐야 하는 부분은 메모장으로 여는 방식이 실무에서 흔합니다.

고친 뒤 자주 생기는 문제

• 한글이 방법 같은 기호로 바뀜: 저장 인코딩과 브라우저가 읽는 인코딩이 다를 때 생깁니다. 깨진 한글 고치기를 참고하십시오.
• 이미지 자리에 깨진 아이콘: 파일을 옮기거나 이름을 바꿔 src 경로가 맞지 않는 경우입니다. HTML 파일에서 이미지가 안 보일 때에서 원인별로 정리했습니다.
• 어느 지점 아래로 화면이 전부 틀어짐: 닫는 태그나 따옴표가 지워진 경우가 대부분입니다. 백업본의 같은 부분과 비교해 보십시오.

내 화면에서 잘 보인다면 다른 사람에게 보내기 전에 휴대폰 폭에서 확인하기를 거치십시오.

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