가이드 / Finipage / 문제 해결

링크와 버튼이 작동하지 않을 때 원인과 해결법

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

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

페이지는 다 된 것 같은데 "문의하기" 버튼을 눌러도 반응이 없고, 메뉴의 "서비스"를 누르면 서비스 섹션이 아니라 맨 위로 올라가고, 노트북에서 전화번호를 누르면 오류 창이 뜹니다. 링크 문제는 대개 알 수 없는 원인에서 나오지 않습니다. 거의 전부가 몇 가지 정해진 유형이고, 링크마다 href를 읽어 보고 브라우저가 그것을 어떻게 해석하는지만 알면 찾아낼 수 있습니다.

상대 주소와 절대 주소

href로 목적지를 가리키는 방법은 세 가지이고, 이것을 섞어 쓰는 것이 "내 컴퓨터에서는 되는데 올리면 안 되는" 링크, 또는 그 반대 경우의 가장 흔한 원인입니다.

되풀이해서 나오는 실수는 세 가지입니다.

• https://를 빠뜨림: href="www.instagram.com/yourshop"은 외부 링크가 아닙니다. 브라우저는 이것을 상대 경로로 읽어 yoursite.com/www.instagram.com/yourshop으로 가고, 결과는 "404 Not Found"입니다. 외부 링크 앞에는 반드시 https://를 붙이십시오.
• 루트 기준 주소를 파일로 열어 시험함: index.html을 더블클릭하면 페이지가 내 디스크에서 열리고, 이때 /contact.html은 프로젝트 폴더가 아니라 드라이브의 맨 위를 뜻합니다. 같은 링크가 인터넷에 올리면 잘 될 수도 있습니다. contact.html 같은 상대 주소는 양쪽 모두에서 동작합니다.
• 하위 경로에 올린 사이트에서 루트 기준 주소를 씀: 사이트가 username.github.io/project/처럼 하위 경로에 있다면 /contact.html은 프로젝트 밖의 username.github.io/contact.html을 가리킵니다. 이것도 상대 주소로 쓰면 피할 수 있습니다.

섹션 이동 링크가 엉뚱한 곳으로 갈 때

한 페이지짜리 사이트의 메뉴는 보통 <a href="#services"> 같은 앵커 링크입니다. 누르면 id가 services인 요소로 화면이 이동합니다. 반응이 없거나 맨 위로 올라간다면 다음을 차례로 확인하십시오.

1. 그 id가 실제로 있는지: HTML에서 id="services"를 검색합니다. 섹션 이름을 바꿨거나 지웠거나, 템플릿에서는 id="service"였다면 링크가 도착할 곳이 없습니다.
2. 철자가 대소문자까지 똑같은지: #Services와 id="services"는 서로 다릅니다. id에는 띄어쓰기를 넣지 말고 id="contact-form"처럼 하이픈을 쓰십시오.
3. 같은 id가 한 번만 쓰였는지: 섹션을 복제했다면 같은 id가 두 군데 붙어 있을 수 있고, 그러면 브라우저는 첫 번째로 갑니다.
4. 링크가 # 하나뿐이지 않은지: 뒤에 아무것도 없는 href="#"은 "이 페이지 맨 위"라는 뜻입니다. 템플릿이 아직 채우지 않은 링크 자리에 넣어 두는 값입니다.

id="문의"처럼 한글 id도 HTML 문법상 문제는 없지만, 주소를 공유하면 주소창에서 긴 인코딩 문자열로 바뀝니다. 짧은 영문 id가 다루기 편합니다.

이동은 되는데 섹션 제목이 상단 고정 메뉴에 가려진다면 스타일 문제입니다. 도착할 섹션에 CSS scroll-margin-top을 주면 메뉴 높이만큼 여유가 생깁니다.

새 탭, 전화번호, 메일 주소

새 탭으로 열기

target="_blank"를 붙이면 링크가 새 탭에서 열립니다. 예전에는 이렇게 열린 페이지가 window.opener로 원래 페이지에 접근할 수 있어서, rel="noopener"를 함께 쓰라는 권고가 생겼습니다.

<a href="https://blog.naver.com/yourshop" target="_blank" rel="noopener">블로그</a>

MDN에 따르면 지금 브라우저는 target="_blank"만 있어도 noopener가 붙은 것처럼 동작합니다. 그래도 명시해 두면 손해가 없고 오래된 브라우저까지 대비할 수 있습니다. 외부 사이트는 새 탭으로 열어도 좋지만, 내 사이트 안의 링크는 같은 탭에서 여는 편이 낫습니다. 같은 사이트 탭이 여러 개 쌓이면 방문자가 헷갈립니다.

전화 링크와 메일 링크

tel: 링크를 쓰면 휴대폰 방문자가 한 번 눌러 바로 전화를 걸 수 있습니다. 국제 형식으로 쓰는 것이 가장 확실합니다. 더하기 기호, 국가번호, 그리고 맨 앞 0을 뺀 번호 순서입니다. 한국의 국가번호는 82입니다.

하이픈은 넣어도 되고 무시됩니다. 띄어쓰기와 괄호는 빼는 편이 좋습니다. 화면에 보이는 글자는 익숙한 국내 표기 그대로 두면 됩니다. tel:02-1234-5678 같은 국내 형식도 한국에서 쓰는 휴대폰에서는 대개 제대로 걸리지만, 국제 형식은 어디서나 통합니다. 1588 같은 대표번호는 국내에서만 걸 수 있습니다. 컴퓨터에서 tel: 링크를 누르면 설치된 통화 앱이 열리거나 아무 일도 일어나지 않으므로, 번호를 링크 안에만 숨겨 두지 말고 글자로도 보여 주십시오.

mailto: 링크는 방문자의 메일 프로그램을 엽니다.

<a href="mailto:hello@yourcompany.co.kr?subject=%EA%B2%AC%EC%A0%81%20%EB%AC%B8%EC%9D%98">메일 보내기</a>

제목의 띄어쓰기는 %20으로 써야 하고, 한글 제목은 위처럼 퍼센트 인코딩해 두는 것이 안전합니다(예시는 "견적 문의"). 공용 컴퓨터나 회사 컴퓨터에는 메일 프로그램이 설정되지 않은 경우가 많아, 눌러도 눈에 보이는 반응이 없을 수 있습니다. 주소를 글자로도 보여 주어 복사할 수 있게 하십시오.

진짜 버튼 요소일 때

버튼처럼 보이는 것은 HTML에서 두 가지 중 하나입니다. 버튼 모양으로 꾸민 <a>는 링크라서 스크립트 없이도 href로 이동합니다. 반면 <button> 요소는 그 자체로는 아무 일도 하지 않습니다. 자바스크립트가 반응을 붙여 주거나, <form> 안에 있어야 기본 동작인 폼 제출을 합니다.

그래서 템플릿의 "시작하기"가 <button>이고 그것을 처리하던 스크립트가 지워졌거나 처음부터 없었다면, 눌러도 반응이 없습니다. 다른 페이지나 섹션으로 보내는 것이 목적이라면 링크로 바꾸십시오. <a href="#contact" class="btn">처럼 쓰고 class를 그대로 두면 모양도 유지됩니다. 폼 안의 버튼이라면 정적 페이지는 혼자서 폼 제출을 받을 수 없으므로 정적 페이지에 문의 폼 달기를 보십시오.

HTML을 읽는 김에 example.com, href="#", javascript:void(0)도 검색해 보십시오. 모두 실제 목적지를 받지 못한 링크입니다.

서버에서는 파일 이름의 대소문자를 구분합니다

Windows와 macOS는 보통 About.html과 about.html을 같은 파일로 취급합니다. 대부분의 웹 서버는 그렇지 않습니다. 실제 파일 이름이 about.html인데 링크가 About.html이면, 내 컴퓨터에서는 열려도 올린 뒤에는 404가 납니다. 폴더와 이미지도 같습니다. Images/Logo.PNG와 images/logo.png는 다른 주소입니다. 가장 간단한 규칙은 파일 이름을 소문자와 하이픈으로만, 띄어쓰기 없이 짓고, 링크를 그 이름과 정확히 맞추는 것입니다. 이미지에서 생기는 같은 문제는 HTML 파일에서 이미지가 안 보일 때에 정리했습니다.

공개 전에 링크를 전부 점검하는 법

1. 임시 주소라도 먼저 인터넷에 올린 뒤 그곳에서 시험합니다. 파일로 열어 시험하면 루트 기준 주소 문제와 대소문자 문제가 드러나지 않습니다.
2. 머리글, 본문, 바닥글의 링크를 하나씩 전부 눌러 봅니다. 섹션 링크는 맞는 섹션이 화면 위쪽에 오는지 확인합니다.
3. 휴대폰으로 전화번호와 메일 링크를 눌러 봅니다. 전화 앱에 맞는 번호가 뜨는지 확인합니다.
4. 텍스트 편집기로 HTML을 열어 href="#", example.com, http://(대개 https://여야 합니다), 템플릿 제작자 도메인을 검색합니다.
5. 페이지가 많다면 W3C Link Checker 같은 자동 점검 도구로 공개된 페이지를 훑어 끊어진 링크 목록을 받을 수 있습니다.

Finipage에서 링크 고치기

Finipage로 편집한다면 링크나 버튼을 클릭하고 오른쪽 속성 패널의 링크 칸에서 주소를 바꾸면 됩니다. 이 칸에는 입력한 주소가 그대로 들어갑니다. https://로 시작하는 웹 주소, #services 같은 섹션 주소, 위에서 설명한 형식의 tel: · mailto: 링크 모두 됩니다. 이 글에서 다룬 문제 대부분은 이것으로 고칠 수 있습니다. <button>을 <a>로 바꾸는 일은 요소 자체를 바꾸는 것이라 메모장이나 VS Code 같은 텍스트 편집기에서 HTML을 직접 고칩니다. 또 Finipage는 편집 중에 페이지의 자바스크립트를 실행하지 않으므로, 스크립트로 동작하는 버튼은 브라우저에서는 잘 되더라도 편집기 안에서는 반응하지 않습니다.

링크 정리가 끝나면 주소를 알리기 전에 랜딩 페이지 공개 전 점검표의 나머지 항목도 확인하십시오.

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