잡오브브라더스

JOB 홈페이지 정보 54개의 글

홈페이지 제작을 준비하는 분이 꼭 알아야 할 기준, 견적, 점검 항목

핵심 요약

웹디자인을 할 때 폰트는 단순한 텍스트가 아닙니다. 브랜드 의도, 분위기, 가독성, 신뢰도까지 좌우하는 중요한 요소 죠. 하지만 좋은 웹폰트를 찾고, 비교하고, 실제 텍스트로 테스트 하는 과정은 생각보다 번거롭습니다. 그래서 오늘은 웹폰트를 모아서 쉽게 비교하고 선택할 수 있는 사이트 <폰트 아카이브> 를 소개합니다. [폰트 아카이브 | 상업용 무료 한글 폰트 저장소](https://fonts.taedonn.com/)

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

웹디자인을 할 때 폰트는 단순한 텍스트가 아닙니다. 브랜드 의도, 분위기, 가독성, 신뢰도까지 좌우하는 중요한 요소 죠.

하지만 좋은 웹폰트를 찾고, 비교하고, 실제 텍스트로 테스트 하는 과정은 생각보다 번거롭습니다. 그래서 오늘은 웹폰트를 모아서 쉽게 비교하고 선택할 수 있는 사이트 <폰트 아카이브> 를 소개합니다.

폰트 아카이브 | 상업용 무료 한글 폰트 저장소

웹폰트 선택이 중요한 이유

폰ㅌ 하나로 브랜드 톤이 달라집니다

가독성 좋은 폰트가 전환율에 긍정적인 영향을 줍니다

모바일,PC 모두 깔끔하게 보여야 UX가 좋아집니다.

특히 요즘은 단순히 예쁜 폰트가 아니라 브랜드 철학과 조화를 이루는 폰트 선택 이 훨씬 중요해졌습니다

폰트 아카이브 한눈에 보고 비교하기

폰트 아카이브는 웹에서 흔히 쓰는 다양한 웹폰트들을 모아서 비교할 수 있는 사이트 입니다.

다양한 웹폰트 미리보기

한 화면에서 글자 스타일 체크

웹용으로 바로 테스트 가능

폰트 간 조합 비교에도 좋음

디자이너든, 퍼블리셔든, 개발자든, 빠르게 폰트를 평가하고 선택할 때 유용합니다.

이런 상황에 특히 추천드려요

브랜드 컬러,이미지에 맞는 서체를 찾고 싶을 때

제목과 본문에 어울리는 조합을 테스트 할 때

모바일과 P에서 가독성 차이를 확인할 때

클라이언트에게 여러 대안 보여줄 때

폰트아카이브는 이런 고민을 한곳에서 해결해줍니다.

사용 방법

폰트 아카이브 사이트에 접속합니다.

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

  1. 폰트 미리보기 아래에 있는 텍스트 상자에 예시 문구를 입력합니다.

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

  1. 텍스트 상자에 예시 문구를 적으면 오른쪽에 폰트가 적용된 모습을 확인할 수 있습니다.

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

  1. 안심 오카리나 글꼴을 상용하고 싶은 경우 해당 영역을 클릭합니다.

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

  1. 해당 페이지에서 파일 다운로드. css, link, import, font-face를 확인할 수 있습니다.

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

  1. font-face방법을 사용할 경우 font-face를 클릭하고 코드를 복사하여 css파일에 붙여넣기 하여 사용합니다.

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

  1. 스크롤을 하단으로 내리면 라이센스 사용범위가 적혀 있으니 꼭 확인해주세요.

웹폰트를 한눈에! 웹폰트 모아보기 사이트 폰트 아카이브

고르는 꿀팁

본문용 vs 제목용을 구분하라

본문은 읽기 편한 걸, 제목은 개성 있는걸 선택해주세요.

2. 가독성 우선, 장식은 그 다음

장식적인 폰트는 포인트용으로만 사용해주세요.

3. 모바일 테스트는 필수

PC에서 예뻐도 모바일에서 깨질 수 있어요.


좋은 디자인은 디테일에서 완성됩니다 그리고 그 디테일의 시작이 바로 폰트선택입니다. 브랜드에 어울리는 다양한 서체를 찾아보세요.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

이 글 전체 보기 →

핵심 요약

요즘 잘 만든 홈페이지를 보면 공통점이 하나 있습니다. 스크롤을 내릴때마다 자연스럽게 콘텐츠가 등장하고, 이미지가 부드럽게 움직이며 중요한 메세지가 타이밍에 맞춰 강조됩니다. 우리는 이걸 스크롤 인터랙션 이라고 부릅니다. 많은 분들이 이 기능을 단순히 보기 좋은 애니메이션 정도로 생각하지만, 실제로는 사용자 경험(UX)과 전환율에 직접적인 영향을 주는 핵심 요소 입니다. 오늘은 왜 스크롤 인터랙션이 중요한지 정리해보겠습니다.

요즘 잘 만든 홈페이지를 보면 공통점이 하나 있습니다.

스크롤을 내릴때마다 자연스럽게 콘텐츠가 등장하고, 이미지가 부드럽게 움직이며 중요한 메세지가 타이밍에 맞춰 강조됩니다.

우리는 이걸 스크롤 인터랙션 이라고 부릅니다.

많은 분들이 이 기능을 단순히 보기 좋은 애니메이션 정도로 생각하지만, 실제로는 사용자 경험(UX)과 전환율에 직접적인 영향을 주는 핵심 요소 입니다. 오늘은 왜 스크롤 인터랙션이 중요한지 정리해보겠습니다.

스크롤 인터랙션이 중요한 이유, 그냥 애니메이션이 아닙니다

사용자의 집중력을 설계할 수 있습니다

일반적인 정적인 홈페이지는 스크롤을 내리면 모든 정보가 한 번에 노출됩니다. 사용자는 어디가 중요한지 판단해야 하고, 집중력은 쉽게 분산됩니다.

하지만 스크롤 인터랙션이 적용된 홈페이지는 다릅니다.

메세지가 순서대로 등장하고

이미지가 흐름에 맞춰 움직이며

핵심 문장은 타이밍에 맞게 강조됩니다

즉, 사용자의 시선을 설계할 수 있습니다.

이는 단순한 디자인 요소가 아니라, 기획 단계에서부터 "어떤 메세지를 먼저 보여줄 것인가"를 전략적으로 설계하는 과정입니다.

브랜드의 완성도를 높입니다

같은 콘텐츠라도 표현 방식에 따라 브랜드의 인상이 완전히 달라집니다.

정적인 페이지는 다소 올드하고 단순해 보일 수 있습니다. 반면, 부드러운 스크롤 인터랙션이 적용된 홈페이지는 세련되고 디지털 친화적인 이미지를 줍니다.

특히 B2B 기업, 병원, IT 기업, 제조업체의 경우 홈페이지의 첫인상이 곧 기업 신뢰도로 이어집니다.

"이 회사는 디테일까지 신경 쓰는구나"

이 인식을 만드는 데 스크롤 인터랙션은 상당히 큰 역할을 합니다.

체류 시간을 늘려줍니다

사용자가 페이지에 오래 머무를수록 전환 가능성은 높아집니다.

스크롤 인터랙션은 사용자의 행동에 반응합니다. 내가 스크롤을 내리면 콘텐츠가 반응한다는 경험은 사용자에게 작은 '몰입감'을 줍니다. 이 몰입감은 자연스럽게 다음 콘텐츠를 보게 만들고, 결과적으로 이탈률을 낮추는 효과가 있습니다.

광고용 랜딩페이지에서 특히 중요한 이유도 여기에 있습니다.

복잡한 정보를 쉽게 전달할 수 있습니다

예를 들어

서비스 프로세스 설명

수술 과정 안내

제품 기술력 소개

ESG 경영 구조 설명

이런 콘텐츠는 한 번에 나열하면 복잡해 보입니다.

하지만 단계별로 등장하도록 설계하면 사용자는 흐름에 따라 자연스럽게 이해하게 됩니다.

즉, 스크롤 인터랙션은 정보전달을 돕는 스토리텔링 도구 이기도 합니다.

하지만 과하면 독이 됩니다

여기서 중요한 포인트가 있습니다. 스크롤 인터랙션은 많다고 좋은 것이 아닙니다.

지나치게 느린 애니메이션

불필요하게 과한 모션

모바일에서 버벅이는 효과

이런 요소는 오히려 사용자 경험을 해칩니다.

좋은 인터랙션의 기준은 명확합니다.

자연스러울 것

빠를 것

콘텐츠 이해를 방해하지 않을 것

디자인이 주인공이 아니라, 콘텐츠를 돋보이게 하는 조연이어야 합니다 .

결국 스크롤 설계는 전략입니다

홈페이지는 단순한 온라인 브로셔가 아닙니다. 브랜드를 설명하고, 설득하고, 신뢰를 쌓는 공간입니다.

스크롤 인터랙션은 그 설득 과정을 '보여주는 방식'을 바꾸는 요소입니다. 같은 문장, 같은 이미지라도 어떻게 등장하느냐에 따라 사용자의 인식은 완전히 달라집니다. 그래서 잘 만든 홈페이지는 스크롤부터 다릅니다.


홈페이지 제작을 고민하고 있다면, 디자인만 보지 말고 "흐름"을 보셔야 합니다.

스크롤 하나에도 전략이 담겨있는지, 그 차이가 결국 브랜드의 차이를 만듭니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

이 글 전체 보기 →

핵심 요약

개발을 하다보면 이런 순간이 자주 옵니다. 이 코드가 왜 안되는지 모르겠다 구현은 했는데 이게 맞는 방식인지 확신이 없다 검색해도 딱 맞는 예제가 안 나온다 특히 주니어 개발자이거나 혼자 개발을 하는 경우라면 구글, 스택오버플로우, GPT를 하루에도 몇십 번 씩 왔다갔다 하게 됩니다. 문제는 맥락이 끊긴다는 것 입니다. 이런 불편함을 크게 줄여준 도구가 Cursor AI입니다. 오늘은 Cursor AI를 어떻게 사용하면 개발 실력을 실제로 향상시킬 수 있는지 실무 관점에서 정리해보겠습니다.

실무 개발자가 직접 써보고 느낀 활용법 정리

코딩 실력, 혼자 고민하지 마세요 : Cursor AI 활용법

개발을 하다보면 이런 순간이 자주 옵니다.

이 코드가 왜 안되는지 모르겠다

구현은 했는데 이게 맞는 방식인지 확신이 없다

검색해도 딱 맞는 예제가 안 나온다

특히 주니어 개발자이거나 혼자 개발을 하는 경우라면 구글, 스택오버플로우, GPT를 하루에도 몇십 번 씩 왔다갔다 하게 됩니다. 문제는 맥락이 끊긴다는 것 입니다.

이런 불편함을 크게 줄여준 도구가 Cursor AI입니다. 오늘은 Cursor AI를 어떻게 사용하면 개발 실력을 실제로 향상시킬 수 있는지 실무 관점에서 정리해보겠습니다.

Cursor AI란 무엇인가?

Cursor AI는 VS Code 기반의 AI 코드 에디터입니다. 겉으로 보면 일반 코드 에디터처럼 보이지만, 가장 큰 차이점은 AI가 프로젝트 전체 맥락을 이해하고 있다는 점 입니다.

코딩 실력, 혼자 고민하지 마세요 : Cursor AI 활용법

현재 열려 있는 파일

프로젝트 폴더 구조

이미 작성된 코드 스타일

사용 중인 프레임워크

이 모든 정보를 기반으로 질문에 답합니다.

그래서 Cursor AI는 단순한 코드생성기가 아니라 코드를 이해하고 함께 고민해주는 개발 파트너 에 가깝습니다.

실력 향상에 도움이 되는 이유

코딩 실력, 혼자 고민하지 마세요 : Cursor AI 활용법

코드 작성보다 이해에 집중하게 된다.

Cursor AI를 사용하면서 가장 크게 느낀 변화는 코드를 이해하는 시간이 늘어난다는 점입니다.

모르는 코드에 "이 코드가 무슨 역할을 하는지 설명해줘" 라고 입력하면 함수 단위, 로직 흐름 단위로 아주 친절하게 설명해줍니다.

이 과정이 반복되면 코드 읽는 속도가 빨라지고, 남이 짠 코드에 대한 두려움이 줄어듭니다.

개발 실력의 핵심은 결국 읽을 수 있는 능력이라는걸 체감하게 됩니다.

2. 에러를 복붙이 아니라 이해하면서 해결하게 된다.

기존에는 에러가 나면 에러메세지를 그대로 검색해서 해결책을 복사해오는 경우가 많았습니다.

Cursor AI에서는 이렇게 합니다.

에러코드 선택

왜 이렇게 발생했는지 설명해줘

현재 코드 기준으로 해결 방법 알려줘

그러면 단순한 해결책 뿐 아니라 에러 발생 원인, 자주 발생하는 케이스, 같은 실수를 피하는 방법까지 설명해줍니다.

이 과정을 반복하다보면 에러를 보는 눈 자체가 달라집니다 .

3. 리팩토링 감각이 자연스럽게 생긴다

주니어 개발자가 가장 어려워하는 것 중 하나가 리팩토링입니다.

"돌아가긴 하는데, 이게 좋은 코드인가?"라는 고민이 항상 따라옵니다.

Cursor AI에서는 이렇게 활용할 수 있습니다.

이 코드에서 리팩토링해줘

실무에서 많이 쓰는 방식으로 개선해줘

가독성 위주로 다시 짜줘

중요한 점은 왜 이렇게 바꿨는지 이유를 설명해준다는 것 입니다.

변수명을 왜 이렇게 바꿨는지

함수 분리를 왜 했는지

구조를 왜 이렇게 가져갔는지

이 설명들이 쌓이면 코드를 짜는 기준이 점점 명확해집니다.

실무에서 이렇게 쓰면 좋아요

코딩 실력, 혼자 고민하지 마세요 : Cursor AI 활용법

기능 구현할 때

현재 구조 기준으로 로그인 기능 추가해줘

이 페이지에 폼 검증 로직 추가해줘

프로젝트 구조를 이해한 상태에서 코드 생성

2. 코드 리뷰용으로

이 코드에서 문제가 될 만한 부분 있으면 알려줘

성능이나 유지보수 측면에서 개선할 점 알려줘

혼자 개발할 떄 특히 유용

3. 학습용 질문

이 코드에 사용된 패턴 설명해줘

이 방식 말고 다른 선택지는 뭐가 있어?

단순히 구현이 아니라 개념 학습까지 가능

4. 주니어 성장용 질문

내가 이런 방식으로 짜면 안 되는 이유 알려줘

실무에서는 보통 어떻게 접근하는지 설명해줘

시니어에게 물어보기 어려운 질문도 부담없이 가능

사용할 때 주의할점

코딩 실력, 혼자 고민하지 마세요 : Cursor AI 활용법

아무리 좋아도 무작정 의존하면 실력이 늘지 않습니다

바로 복사해서 쓰지 말고

왜 이런 코드가 나왔는지 반드시 질문하고

기존 코드와 비교해보는 습관이 중요합니다.

대신 생각해주는 도구가 아니라, 생ㄴ각을 확장해주는 도구로 써야 합니다.

이런 개발자에게 특히 추천합니다

코딩 실력, 혼자 고민하지 마세요 : Cursor AI 활용법

주니어 개발자

혼자 프로젝트를 진행하는 개발자

스타트업, 에이전시 실무 개발자

왜 이렇게 짜야 하는지 알고 싶은 사람

특히 성장 속도가 답답하다고 느끼는 시점이라면 Cursor AI의 도움을 크게 받을 수 있습니다.

마무리하며

개발 실력은 코드를 많이 치는 것보다 코드를 이해하는 시간이 늘어날 때 성장한다

Cursor AI는 그 시간을 만들어주는 도구입니다.

검색에 쓰던 시간을 줄이고, 고민하던 시간을 줄이고, 대신 이해하는 시간을 늘리고 싶은 분이라면 충분히 투자할 가치가 있습니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

이 글 전체 보기 →

핵심 요약

퍼포먼스 광고를 집행할 때 많은 분들이 광고 소재와 예산 에는 신경을 쓰지만, 정작 랜딩페이지 는 "홈페이지 한 페이지면 되겠지"하고 넘어가는 경우가 많습니다. 하지만 실제로는 성과의 상당 부분은 랜딩페이지에서 결정 됩니다. 클릭은 많은데 문의가 없고, CPA가 계속 올라가고 있다면 가장 먼저 점검해야 할 것이 바로 광고용 랜딩페이지입니다.

광고성과를 만드는 랜딩페이지 구조, 체크리스트로 정리했습니다

퍼포먼스 광고를 집행할 때 많은 분들이 광고 소재와 예산 에는 신경을 쓰지만, 정작 랜딩페이지 는 "홈페이지 한 페이지면 되겠지"하고 넘어가는 경우가 많습니다.

하지만 실제로는 성과의 상당 부분은 랜딩페이지에서 결정 됩니다.

클릭은 많은데 문의가 없고, CPA가 계속 올라가고 있다면 가장 먼저 점검해야 할 것이 바로 광고용 랜딩페이지입니다.

오늘은 웹에이전시 실무 기준으로 성과를 만드는 랜딩페이지 체크리스트 를 정리해보겠습니다.

목적이 명확한가?

광고성과를 만드는 랜딩페이지 구조, 체크리스트로 정리했습니다

광고용 랜딩페이지의 목적은 단 하나입니다.

방문자를 행동하게 만드는것.

문의 남기기

전화걸기

상담신청

예약완료

그런데 실제 페이지를 보면 회사소개, 연혁, 조직도, 인사말까지 홈페이지 역할을 동시에 하려는 경우 가 많습니다.

체크포인트

이 페이지의 목표 행동은 1개인가?

불필요한 메뉴와 링크는 제거했는가?

방문자가 무엇을 해야 하는지 한눈에 보이는가?

랜딩페이지에는 선택지를 줄이는 것이 핵심 입니다.

첫 화면(Above the Fold)에 핵심 메세지가 있는가?

광고를 통해 들어온 사용자는 3초안에 이 페이지를 볼지 말지 결정 합니다.

광고성과를 만드는 랜딩페이지 구조, 체크리스트로 정리했습니다

첫 화면에는 반드시 아래 요소가 들어가야합니다.

어떤 서비스인지

누가 봐야 하는지

왜 지금 신청해야 하는지

체크포인트

헤드라인만 보고도 서비스 이해가 되는가?

"그래서 나한테 뭐가 좋은데?"가 바로 보이는가?

스크롤하지 않아도 CTA가 보이는가?

"최고의 기술력", "고객 만족 1위"같은 추상적인 문구는 효과가 약합니다.

소재와 메세지가 일치하는가?

광고문구는 A인데 페이지에서는 전혀 다른 이야기를 하는 경우도 많습니다

예를들어

광고 : 라식 수술 비용 상담

페이지 : 병원 소개부터 시작

이런 경우 사용자는 바로 이탈합니다.

체크포인트

문구가 랜딩페이지 제목에 그대로 반영되는가?

사용자가 기대한 정보가 바로 보이는가?

키워드 검색 의도와 맞는 구조인가?

흐름이 끊기지 않는것이 중요합니다.

신뢰 요소가 충분한가?

사용자는 기본적으로 의심상태 입니다.

"여기 믿어도 되나?"라는 질문에 답해줘야 합니다.

광고성과를 만드는 랜딩페이지 구조, 체크리스트로 정리했습니다

신뢰요소 체크리스트

실제 후기 또는 고객 사례

인증, 수상, 협회 로고

숫자로 표현된 성과

실제 사진(사람, 공간, 작업결과)

믿고 맡기세요 같은것보다는 증명 자료가 훨씬 강력합니다.

CTA(Call To Action)가 명확한가?

페이지에 내용은 많은데 정작 어디를 눌러야 할지 모르는 경우도 많습니다.

광고성과를 만드는 랜딩페이지 구조, 체크리스트로 정리했습니다

체크포인트

CTA 버튼이 눈에 띄는 위치에 있는가?

버튼 문구가 행동을 유도하는가?

스크롤을 내려도 CTA가 반복 노출되는가?

입력폼이 너무 복잡하지 않은가?

전환을 막는 가장 큰 원인 중 하나가 과도한 입력 항목 입니다.

광고성과를 만드는 랜딩페이지 구조, 체크리스트로 정리했습니다

체크포인트

꼭 필요한 정보만 받고 있는가?

개인정보 부담을 느끼게 하지는 않는가?

모바일에서도 입력이 편한가?

처음부터 모든 정보를 받으려 하지 말고 전환 허들을 낮추는 것 이 핵심입니다.

모바일 최적화는 충분한가?

광고 유입의 대부분은 모바일입니다. 그런데 여전히 pc 기준으로 만든 사이트들이 많습니다.

모바일 화면

체크포인트

모바일에서 글자가 너무 작지 않은가?

버튼이 누르기 쉬운 크기인가?

로딩 속도가 느리지 않는가?

모바일 기준으로 보지 않으면 성과는 절대 나오기 어렵습니다.

로딩 속도와 기술적 문제는 없는가?

아무리 잘만든 사이트라도 느리면 끝입니다.

광고성과를 만드는 랜딩페이지 구조, 체크리스트로 정리했습니다

체크포인트

이미지 용량이 과도하지 않은가?

불필요한 스크립트가 많은가?

실제 문의/예약이 정상 작동하는가?

광고 집행 전에는 반드시 테스트 전환을 해봐야합니다.

마무리

광고는 사람을 데려오는 역할이고, 랜딩페이지는 사람을 설득하는 역할입니다.

아무리 광고를 잘 돌려도 랜딩페이지가 준비되지 않았다면 결과는 나오지 않습니다.

광고 성과가 고민이라면 예산을 늘리기 전에 체크리스트부터 점검해보세요.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

이 글 전체 보기 →

핵심 요약

안녕하세요. 잡오브브라더스입니다. 홈페이지를 만들고나면 이런 질문을 많이 듣습니다. "홈페이지는 있는데, 네이버나 구글에서 잘 안보여요." 이럴때 가장 먼저 확인해야 하는 것 중 하나가 바로 사이트맵(sitemap.xml) 입니다. 오늘은 사이트맵이 뭔지, 왜 필요한지, 직접 만드는 방법까지 차근차근 정리해볼게요. 사이트맵은 말 그대로 홈페이지의 지도 입니다. 검색엔진(네이버, 구글 등)에게 "우리 사이트는 이런 페이지들이 있어요"라고 알려주는 역할을 합니다.

홈페이지 검색 노출울 위해 꼭 해야하는 기본설정 사이트맵 sitemap.xml 직접 만드는 방법

안녕하세요. 잡오브브라더스입니다. 홈페이지를 만들고나면 이런 질문을 많이 듣습니다.

"홈페이지는 있는데, 네이버나 구글에서 잘 안보여요."

이럴때 가장 먼저 확인해야 하는 것 중 하나가 바로 사이트맵(sitemap.xml) 입니다.

오늘은 사이트맵이 뭔지, 왜 필요한지, 직접 만드는 방법까지 차근차근 정리해볼게요.

사이트맵(sitemap.xml)이란?

홈페이지 검색 노출울 위해 꼭 해야하는 기본설정 사이트맵 sitemap.xml 직접 만드는 방법

사이트맵은 말 그대로 홈페이지의 지도 입니다. 검색엔진(네이버, 구글 등)에게 "우리 사이트는 이런 페이지들이 있어요"라고 알려주는 역할을 합니다.

사이트맵이 있으면 검색엔진이 페이지를 더 빠르게 수집하고, 새로 만든 페이지도 누락 없이 인식할 확률이 높아집니다.

특히 새로만든 홈페이지, 페이지 구조가 복잡한 사이트, 검색 노출이 중요한 기업 홈페이지라면 사이트맵은 거의 필수라고 보시면 됩니다.

사이트맵에 어떤 페이지를 넣어야할까?

홈페이지 검색 노출울 위해 꼭 해야하는 기본설정 사이트맵 sitemap.xml 직접 만드는 방법

여기서 중요한 포인트가 하나 있습니다. 보여주고 싶은 페이지만 넣는다는 점 이에요.

👍 포함하면 좋은 예시

메인페이지

회사소개, 서비스 소개

제품/랜딩페이지

블로그 글, 콘텐츠 페이지

👎 굳이 넣지 않아도 되는 페이지

관리자페이지

로그인 / 회원가입

테스트페이지

검색결과 페이지

검색엔진 입장에서는 중요한 페이지가 깔끔하게 정리된 사이트맵 을 더 좋아합니다.

sitemap.xml 기본구조 이해하기

사이트맵은 XML 파일 형태로 만들어집니다. 처음 보면 어려워 보이지만, 구조는 단순합니다.

각 항목의 의미는 이렇습니다.

loc : 페이지 주소 (https 포함)

lastmod : 마지막 수정일

changefreq : 변경주기

priority : 페이지 중요도

참고로 changefreq, priority는 참고정보 라 너무 정확하게 맞추지 않아도 됩니다.

직접 만드는 방법

방법은 크게 두 가지가 있습니다.

페이지 수가 적다면 (직접만들기)

메모장 또는 텍스트편집기를 엽니다.

사이트맵 기본 구조를 붙여넣습니다.

주소를 내 홈페이지 URL로 수정합니다.

파일 이름을 sitemap.xml로 저장

인코딩은 UTF-8로 설정

생각보다 단순해서 페이지 수가 적은 기업 홈페이지라면 이 방법도 충분합니다.

서버에 업로드하기

홈페이지 검색 노출울 위해 꼭 해야하는 기본설정 사이트맵 sitemap.xml 직접 만드는 방법

완성한 파일은 홈페이지 최상위 경로(루트경로)에 올려야합니다.

업로드 후 브라우저에서 https://도메인/sitemap.xml 을 입력했을 때 파일 내용이 보이면 정상입니다.

robots.txt에 사이트맵 등록하기

사이트맵을 만들었다면 검색엔진이 더 잘 인식하도록 robots.txt에도 등록해주는게 좋습니다.

robots.txt 파일 아래에 한 줄만 추가하세요.

이 한줄만으로도 검색엔진이 사이트맵을 자동으로 찾아갑니다.

네이버 구글에 사이트맵 제출하기

마지막 단계입니다.

네이버 서치어드바이저 ➡️ 사이트 등록 ➡️ 사이트맵 제출

구글 서치 콘솔 ➡️ Sitemaps 메뉴 ➡️ sitemap.xml 입력

제출한다고 바로 노출이 되는 건 아니지만, 검색엔진이 사이트를 이해하는 속도는 확실히 빨라집니다.

자주 나오는 실수

사이트맵은 "한 번 만들면 끝"이 아니라 홈페이지 구조가 바뀔 때마다 관리해줘야 하는 기본설정입니다.

페이지를 추가했는데 검색에 잘 안나온다면 사이트맵부터 다시 한 번 확인해보세요.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

이 글 전체 보기 →
JOB 홈페이지 정보 글 목록54

JOB 홈페이지 정보 글 목록

54개의 글
글 제목조회작성일
홈페이지 리뉴얼, 기존 검색 유입을 지키기 위한 점검 6가지 JOB 홈페이지 정보02026. 10. 19.
기업 홈페이지 제작, 회사 소개서 내용을 그대로 옮겨도 될까요? JOB 홈페이지 정보02026. 10. 14.
카페24 쇼핑몰 제작, 상품 분류부터 정리해야 하는 이유 JOB 홈페이지 정보02026. 10. 12.
변호사 홈페이지에 쓰면 안 되는 표현 체크리스트: 광고규정과 문구 점검 기준 JOB 홈페이지 정보02026. 10. 7.
무료폰트 라이선스, 이것만 알면 문제 없습니다. 어디까지 써도 괜찮을까 총정리 JOB 홈페이지 정보02026. 5. 19.
이미지 용량 줄이면 홈페이지 속도가 빨라지는 이유 JOB 홈페이지 정보02026. 5. 18.
크롬 개발자 도구로 홈페이지 분석하는 방법 | 비전공자도 가능 JOB 홈페이지 정보02026. 5. 15.
도메인 vs 호스팅 헷갈리는 개념 한번에 정리 JOB 홈페이지 정보02026. 5. 14.
디자이너들이 몰래 쓰는 글꼴 찾는 꿀팁 글꼴검색 사이트 폰트폰트 JOB 홈페이지 정보02026. 5. 12.
가산 아임웹 홈페이지 제작, 웹에이전시 선택이 중요한 이유와 성공 포인트 JOB 홈페이지 정보02026. 3. 30.