가이드
HTML 페이지를 받았는데 고치거나, 문제를 해결하거나, 인터넷에 올려야 하는 분을 위한 실용 안내입니다. 대부분 어떤 도구를 쓰든 통하는 내용입니다.
Finipage가이드 17편
HTML 파일을 코드 없이 고치는 편집기. HTML 파일을 열고 바꿀 글자를 눌러 고치면 됩니다. 색, 크기, 이미지, 링크, 섹션 순서도 마우스로 바꿉니다. 파일은 브라우저 밖으로 나가지 않고, EUC-KR로 저장된 옛 한글 페이지도 글자 깨짐 없이 열립니다. Finipage 열기
페이지 고치기
- 코딩 몰라도 HTML 파일 고치는 방법 세 가지이미 있는 .html 파일의 글자, 색, 이미지, 링크, 배치를 개발자 없이 바꾸는 방법을 메모장, 개발자 도구, 시각 편집기로 나눠 비교합니다.
- ChatGPT·Claude가 만든 랜딩페이지, 제대로 고쳐 쓰는 법AI가 만들어 준 HTML 랜딩페이지에서 바꾸고 지워야 할 것, AI에게 다시 시키지 않고 직접 고치는 순서, 쓰기 전 점검 항목을 정리했습니다.
- HTML 파일 구조, 개발자가 아니어도 읽는 법HTML 파일의 doctype, head와 body, 태그와 속성, class와 id, CSS가 각각 무슨 일을 하는지, 화면의 글자를 만드는 줄을 찾는 방법까지 정리했습니다.
- 웹페이지 글꼴의 원리와 HTML에서 폰트 바꾸는 법font-family와 대체 글꼴, 구글 폰트·CDN 웹폰트, 프리텐다드와 Noto Sans KR, 라이선스, 가짜 굵게가 생기는 이유, 한글 줄 간격과 자간까지 정리했습니다.
- Git 없이 HTML 파일 버전 관리하는 법개발자가 아니어도 할 수 있는 버전 관리 습관. 날짜 폴더, 구글 드라이브·원드라이브 버전 기록, 두 버전 비교, Git이 필요한 시점까지 정리했습니다.
- 내려받은 HTML 템플릿을 우리 회사 페이지로 바꾸는 법라이선스 확인, 폴더 구조 파악, 로고·글·사진·연락처 교체, 데모 섹션과 안 쓰는 페이지 정리, 남은 견본 문구와 추적 코드 점검까지 순서대로 정리했습니다.
- HTML 페이지 색을 브랜드 색으로 바꾸기페이지의 색이 어디에 적혀 있는지, 검사 도구로 규칙 찾기, hex·rgb·hsl 읽는 법, 읽기 좋은 대비, 요소별로 바꿀지 변수 하나로 바꿀지 정리했습니다.
문제 해결
- HTML 한글 깨짐 해결: EUC-KR 파일을 UTF-8로 바꾸는 법오래된 HTML 파일의 한글이 "ÇѱÛ"나 "�"로 보이는 이유, 파일의 실제 인코딩을 확인하는 법, UTF-8로 안전하게 바꾸는 순서를 정리했습니다.
- HTML 파일에서 이미지가 안 보일 때: 경로 점검법HTML 파일을 옮기거나 메일로 보내거나 서버에 올렸을 때 이미지·CSS·글꼴이 사라지는 이유와, 개발자 도구로 깨진 경로를 찾아 고치는 방법입니다.
- HTML 페이지가 휴대폰에서 제대로 보이는지 확인하는 법뷰포트 태그 누락, 옆으로 밀리는 화면, 너무 큰 이미지, 작은 글씨, 긴 주소 등 한 장짜리 HTML 페이지의 모바일 문제를 찾고 고치는 방법입니다.
- 브라우저마다 페이지가 다르게 보일 때 원인과 점검법크롬에서는 멀쩡한데 사파리, 삼성 인터넷, 다른 사람 PC에서는 다르게 보일 때 확인할 것. 글꼴, CSS 지원 범위, 캐시, 확대 배율, 강제 다크 모드, 인앱 브라우저.
- 링크와 버튼이 작동하지 않을 때 원인과 해결법상대·절대 주소, #섹션 이동, 새 탭 열기, 전화(tel:)·메일(mailto:) 링크 형식, 스크립트가 필요한 버튼, 공개 전 링크 점검법을 정리했습니다.
공개하기
- HTML 파일을 인터넷에 올리는 방법: 무료·저가 호스팅 4곳 비교완성한 .html 파일에 공개 주소를 붙이는 방법. GitHub Pages, Netlify Drop, Cloudflare Pages, FTP 웹호스팅을 비교하고 폴더째 올리는 법을 정리했습니다.
- 정적 사이트에 내 도메인 연결하기 (DNS 설정 안내)GitHub Pages, Netlify, Cloudflare Pages에 올린 페이지에 www.회사.com을 연결하는 방법. A와 CNAME, www와 맨 도메인, TTL, nslookup 확인, 자주 하는 실수.
- 랜딩 페이지 공개 전 체크리스트한 장짜리 사이트를 공개하기 전에 확인할 것들. 제목과 설명문, 링크, 연락처, 이미지 용량, 대체 텍스트, 파비콘, 모바일, 폼, 개인정보 처리방침까지.
- 정적 HTML 페이지의 문의 폼, 실제로 받으려면HTML 파일에 넣은 문의 폼이 아무것도 보내지 않는 이유와 구글 폼, Formspree, Netlify Forms, Tally로 받는 방법, 스팸 차단과 개인정보 동의까지.
- 한 장짜리 사이트의 검색 노출 기본기원페이지 사이트를 위한 제목·설명문, 제목 구조, alt, 속도 점검과 구글 서치 콘솔·네이버 서치어드바이저 등록, 그리고 현실적인 기대치.
Finipix가이드 7편
웹용 이미지 줄이기 · 크기 바꾸기. 여러 이미지를 한 번에 가볍게: 본문 · 히어로 · 썸네일 · 공유 이미지 크기로 줄이고, WebP · JPEG · PNG로 바꾸고, 전후를 비교합니다. 로고로 파비콘 세트도 만듭니다. 이미지는 브라우저 밖으로 나가지 않습니다. Finipix 열기
페이지 고치기
공개하기
- 파비콘과 카카오톡 링크 미리보기(오픈그래프) 설정하기브라우저 탭 아이콘(파비콘)과 apple-touch-icon, 카카오톡·페이스북 링크 미리보기를 정하는 오픈그래프 태그, 예전 미리보기를 새로 고치는 방법을 정리했습니다.
- 웹페이지 이미지 용량 줄이기: 화질은 그대로, 파일은 가볍게이미지가 무거워지는 이유, 크기부터 줄이고 압축하는 순서, 100%로 확대해 확인하는 법, PNG를 그대로 둘 때, 폴더째 한 번에 처리하는 법을 정리했습니다.
- 로고 이미지로 파비콘 세트 만들기 (ICO, PNG, 애플 터치 아이콘)브라우저와 휴대폰이 실제로 쓰는 아이콘 크기, 16픽셀에서도 알아보이게 로고를 단순화하는 법, 파일과 link 태그 위치, 옛 파비콘이 안 바뀔 때 해결법을 정리했습니다.
- 사진 속 위치 정보(EXIF) 확인하고 지우는 법사진 파일에 담기는 위치·기기·시각 정보, 내 홈페이지에 올리면 그대로 공개되는 이유, Windows와 Mac에서 확인하는 법, 올리기 전에 지우는 법을 정리했습니다.
- 링크 공유 이미지(1200×630) 잘 보이게 만드는 법링크를 공유할 때 뜨는 og:image의 크기, 안전 영역, 글자 크기, 대비, 로고 위치와 자르고 압축하는 방법을 정리했습니다.
- 이미지를 WebP로 바꿔야 할까?WebP가 지금 어디서 잘 되고 어디서 아직 말썽인지, 투명·움직이는 이미지, JPEG·PNG를 유지할 때와 AVIF가 나을 때, 원본을 지키며 변환하는 법.
일반가이드 2편
문제 해결
공개하기
가이드를 쓰는 방식
모든 가이드는 Qorlize 팀이 쓰고 검토합니다. 안내하는 과정은 직접 해 보고, 브라우저 동작은 MDN 같은 표준 문서로, 다른 회사 서비스는 그 회사의 공식 문서로 확인합니다. 서비스가 바뀌면 글과 검토일을 고칩니다. 틀린 곳을 발견하면 알려 주세요.