워드프레스에서 효과적인 이미지 업로드는 사이트 로딩 속도를 개선하고 SEO 성능을 높이는 데 중요한 역할을 합니다. 아래는 이미지 최적화를 위한 단계별 가이드를 소개합니다. 아래의 작업을 통해 용량을 10분의 1로 줄일 수 있습니다.

이미지 다운로드

Unsplash 또는 Pixabay 등의 고품질 이미지 다운로드 사이트를 활용하여 포스트에 어울리는 적절한 이미지를 다운로드 합니다. 이를 바로 사이트에 올리는 것이 아니라 최대한 사이즈를 경량화하여 업로드 하는 것이 중요합니다.

이미지 크기 조정

photopea

다운로드한 이미지를 워드프레스에 업로드하기 전에 https://www.photopea.com/ 사이트를 사용하여 이미지 크기를 줄이세요. 특히 이미지 너비는 1,000px 미만으로 설정하여 크기를 줄이도록 합니다.


이미지 파일 형식 변환

towebp


최적화된 이미지 포맷으로 변환하려면 https://towebp.io/ 사이트를 활용하여 JPG나 PNG 이미지를 WebP 형식으로 변환하면 파일 크기를 더욱 줄일 수 있습니다. WebP는 품질 손실을 최소화하면서 용량을 대폭 줄여주는 효율적인 이미지 포맷입니다.

사이트에 이미지 업로드

최종 이미지 파일을 관리자 페이지 미디어 라이브러리에 업로드 합니다. 이 때 대체텍스트(alt text)에 해당 포스트 제목을 입력합니다. 이는 SEO와 접근성을 높이는 데 좋습니다.

마무리

위 단계를 따라 이미지 업로드를 최적화하면 페이지 로딩 시간이 단축되고 사용자 경험이 향상됩니다. 또한 SEO 관점에서 검색엔진이 이미지의 내용을 더 잘 파악할 수 있으므로 웹사이트의 검색 순위 향상에 기여합니다.

패스크코멧에서 호스팅을 구매하신 후 워드프레스 설치하는 방법을 살펴보겠습니다. 아래의 순서대로 실행하시면 됩니다.

패스트 코멧에서 워드프레스 설치

패스트코멧 워프 설치1

패스트코멧 관리자 페이지에서 애플리케이션 아이콘을 선택합니다.

패스트코멧 워프 설치2

WordPress Install 버튼을 클릭합니다.

패스트코멧 워프 설치3

워드프레스 설치에 아래와 같은 기본항목을 입력한 후 Quick Install을 선택합니다.

위와 같은 절차를 걸처 설치가 완료된 후, Congratulations, the software was installed successfully 메시지와 함께 사이트 관리자 페이지 링크가 나옵니다. 관리자 페이지 주소는 사이트 뒤에 /wp-admin 가 붙습니다.

seo

SEO(Search Engine Optimization)는 검색 엔진에서 사이트와 콘텐츠의 가시성을 높이는 기술입니다. 구글은 전 세계적으로 가장 많이 사용되는 검색 엔진으로, SEO 최적화를 통해 사이트 트래픽을 효과적으로 증가시킬 수 있습니다.

SEO는 단순히 검색 결과 상위에 노출되는 것을 넘어, 사용자가 사이트에서 더 오래 머물고 재방문하게 만드는 핵심 전략입니다. 이 가이드는 구글이 선호하는 SEO 작업 방법을 체계적으로 정리했습니다.

SEO 작업의 핵심

SEO 작업은 온페이지, 오프페이지, 테크니컬 SEO, 콘텐츠 최적화 등으로 나눌 수 있습니다. 각 작업은 사이트의 전반적인 검색 노출과 트래픽 증가에 기여합니다.

온페이지 SEO

오프페이지 SEO

테크니컬 SEO

구글 페이지랭크의 중요성

페이지랭크란?

페이지랭크(PageRank)는 구글이 개발한 알고리즘으로, 웹페이지의 중요도를 평가하여 검색 결과 순위를 매기는 데 사용되는 기법입니다. 2016년 이후 공개적으로 페이지랭크 점수를 표시하지 않고 있지만, 알고리즘의 일부로 여전히 사용되고 있습니다. 페이지랭크는 웹페이지 간의 연결, 즉 링크의 수와 품질을 기반으로 페이지의 신뢰도와 권위를 판단합니다. 페이지랭크는 웹사이트들 사이의 링크 관계를 순환적으로 계산합니다. 예를 들어, A 페이지가 높은 점수를 가지고 있고, 그 페이지가 B 페이지를 링크한다면, B 페이지도 높은 점수를 얻게 됩니다.

페이지랭크 높이는 전략

구글의 알고리즘 중 하나인 페이지랭크는 사이트의 신뢰성과 권위를 평가하는 핵심 요소입니다. 페이지랭크를 높이기 위해서는 다음과 같은 전략이 필요합니다:

구글이 선호하는 글쓰기 작성법

제목 작성

본문 구성

메타 설명

SEO 친화적인 사이트 구조 설계

URL 최적화

카테고리 구조

내부 링크와 외부 링크

한 게시물에 내부 링크 2개 이상, 신뢰할 수 있는 외부 링크 1개 이상을 포함하세요. 예: "SEO 플러그인 사용법" 글에서 "Yoast SEO 설정 가이드"로 연결.

구글 SEO 모니터링 및 개선

SEO 플러그인

블록 에디터 사용법

블록에디터 위젯
단축키
단축키2

마무리

SEO는 단기적인 작업이 아닙니다. 꾸준히 고품질 콘텐츠를 발행하고, 사이트 성능을 개선하며, 트렌드를 반영하여 최적화를 이어가는 것이 중요합니다. 이 가이드를 참고하여 사이트를 최적화하고, 검색 엔진에서 상위에 노출되는 블로그를 만들어보세요.

워드프레스 버전 설치

워드프레스와 플러그인 업데이트는 사이트의 보안성과 성능을 유지하는 데 필수적입니다. 하지만 업데이트 과정에서 사이트가 깨지거나 기능이 비활성화되는 문제를 겪을 수도 있습니다. 이번 가이드에서는 복원 후 안전하게 워드프레스와 플러그인을 단계적으로 업그레이드하여 문제를 해결하는 방법을 상세히 설명합니다. 이 단계를 따라하면 업데이트 중 발생하는 대부분의 문제를 방지할 수 있습니다.

1단계: 플러그인 충돌 확인

사이트가 깨지거나 오류가 발생하였다면 FTP에 접속하여 플러그인 전체를 비활성화한 후 하나씩 활성화하여 문제되는 플러그인을 찾습니다.

FTP로 플러그인 비활성화

문제 플러그인 식별(하나씩 활성화)

문제 플러그인 확인 후

2단계: 데이터, DB 복원(1번 단계 스킵 후)

FTP, 관리자 페이지에서 플러그인 설치가 안되어 1번 단계가 불가능할 경우, 해도 안될 경우 바로 호스팅업체를 통해 데이터와 DB를 복원합니다. 복원 후 화면, 페이지, 플러그인 동작 등이 정상적인지 확인합니다.

카페24의 경우, 나의 서비스 관리 > DATE&DB 복원/백업 메뉴에서 이전의 백업분을 선택하여 복원을 실행하시면 30분 안으로 복원이 되고, 해외 호스팅 업체는 24시간 고객센터를 통해 복원 신청을 하면 30분 안에 작업이 완료 됩니다.

3단계: 워드프레스 버전 업데이트

관리자 페이지 > 대시보드 > 업데이트로 이동하여 워드프레스 자체를 최신 버전으로 업그레이드 합니다. 이 후 사이트 레이아웃, CSS 로딩, 주요 기능을 확인합니다.

4단계: 플러그인 단계별 업데이트

플러그인을 하나씩 업그레이드하며 문제를 사전에 방지합니다.

플러그인 이전 버전 다운로드

5단계 최종 점검 및 백업

모든 업데이트가 완료 되면 최신 상태를 기준으로 수동으로 백업을 생성합니다.

마무리

이번 가이드에서는 워드프레스와 플러그인 업데이트 중 발생하는 문제를 예방하고 해결하기 위한 단계별 전략을 살펴보았습니다. 업데이트는 사이트 보안과 성능을 위해 유지하는 작업이지만 신중하게 접근해야 합니다. 항상 정기적인 백업과 테스트를 통해 사이트의 안정성을 유지하세요.

웹사이트 디자인에서 애니메이션은 단순히 시각적인 요소를 넘어 사용자 경험(UX)을 개선하는 강력한 도구입니다. 적절한 애니메이션 효과는 콘텐츠를 더 매력적으로 만듭니다. 이번 포스팅에서는 제가 평소에 사용하는 Fade In, Fade Up, Zoom In과 같은 주요 애니메이션의 자연스러운 효과 설정 방법을 안내하겠습니다.

Fade in

Fade In 효과는 콘텐츠를 자연스럽게 화면에 나타나게 하는 가장 기본적이고 부담 없는 애니메이션입니다. 부드러운 페이드 효과는 사용자의 시선을 자연스럽게 유도하며 텍스트나 이미지, 버튼 등 다양한 요소에 활용 가능합니다.
특히, 메인 배너 이미지나 첫 번째 텍스트 블록에 사용하면 웹사이트의 첫인상을 한층 더 고급스럽게 만들 수 있습니다.

Fade up

콘텐츠가 아래에서 위로 부드럽게 떠오르며 나타나게 합니다. 사용자에게 자연스러운 시각적 움직임을 제공하며, 주로 리스트 형식의 콘텐츠, 섹션 전환, 또는 카드형 레이아웃에 적합합니다.
예를 들어, 서비스 소개 섹션에서 각각의 서비스 항목을 Fade Up 애니메이션으로 등장시키면 사용자가 각 항목에 더 집중할 수 있습니다.

Zoom in

콘텐츠가 확대되며 화면에 나타나게 합니다. 강렬한 시각적 효과로 사용자의 주의를 즉각적으로 끌 수 있어, 중요 텍스트 또는 프로모션 배너에 효과적이지만 과하게 사용하면 산만하게 느껴질 수 있으므로, 강조해야 하는 주요 요소에만 선택적으로 적용해야 합니다.

마무리

애니메이션을 과도하게 사용하면 오히려 사이트 속도를 저하시킬 수 있으며, 사용자에게 피로감을 줄 수 있기 때문에 최대한 자연스럽고 적절하게 사용하는 것을 권장드립니다. 예시로 이 사이트에 가시면 적절한 애니메이션 사용의 예를 확인할 수 있습니다.

워드프레스 로그인

워드프레스란 무엇인가요? 웹사이트와 관련된 일을 하고 있든 아니든, 아마 한 번쯤은 들어본 이름일 것입니다. 전 세계 웹사이트의 약 43%가 워드프레스로 구축되어 있어, 많은 사이트가 이 플랫폼을 사용하고 있습니다. 이 글에서는 워드프레스의 기본적인 내용을 다루며 초보자를 위한 기본 개념을 제공해 보겠습니다.

워드프레스란 무엇인가?

워드프레스는 PHP와 MySQL 기반의 콘텐츠 관리 시스템(CMS)입니다. 오픈 소스 소프트웨어로 누구나 무료로 사용할 수 있으며, 지속적인 개선이 이루어져 웹사이트를 구축하는 데 있어 신뢰할 수 있는 선택지입니다. 워드프레스는 개발 지식 없이 누구나 할 수 있는 노코드 툴로 인기를 누리가 된 이유는 다양한 테마와 플러그인을 사용해 개인, 회사 홈페이지부터 블로그, 커뮤니티, 쇼핑몰까지 손쉽게 사이트를 만들 수 있다는 점입니다. (참고로 미국 백악관 사이트 및 해외, 국내 대기업 홈페이지들도 워드프레스로 만들어졌습니다!)

워드프레스로 어떤 사이트를 만들 수 있을까요?

워드프레스의 초기 타겟은 블로그를 만드는 용도였으나 시간이 지나고 사용자가 많아지면서 다양하고 고도화된 테마와 플러그인의 확장으로 지금은 쇼핑몰, 비즈니스 웹사이트, 다국어, 포트폴리오, LMS, 커뮤니티, 예약, 병원 사이트 등 거의 모든 웹사이트를 만들 수 있는 환경에 이르렀습니다.

워드프레스 장점 및 단점

워드프레스 장점

무료

오픈소스 CMS 방식으로, 다운받고 설치하는 데 비용이 발생하지 않는다는 큰 장점을 가지고 있습니다. 대부분의 호스팅 업체(예: 카페24, 가비아, 해외 호스팅사들)에서 초기 워드프레스 세팅을 지원하여 수동 설치 과정의 번거로움을 줄일 수 있습니다. 단, 오픈소스 특성상 개인 사이트의 식별을 위해 도메인 주소와 데이터 저장을 위한 호스팅 서버가 필요하므로 이에 따른 비용만 발생합니다.

손쉬운 제작 가능

초보자도 쉽게 웹사이트를 제작할 수 있다는 점입니다. HTML이나 CSS 같은 웹 개발 언어를 잘 몰라도, 유튜브나 블로그에서 제공하는 다양한 정보를 활용해 손쉽게 웹사이트를 만들 수 있습니다. 이로 인해 전문가가 아닌 사람들도 직접 웹사이트를 제작할 수 있는 환경을 제공합니다.

플러그인으로 기능 구현

워드프레스에는 수많은 무료 및 유료 플러그인이 존재합니다. 플랫폼 자체가 오픈되어 있어 여러 개발자들이 다양한 플러그인을 지속적으로 제공하고 있으며, 이미 많이 사용하는 유용한 도구들도 구축되어 있습니다. 플러그인을 선택할 때는 사용자 리뷰를 꼼꼼히 확인하여 필요한 기능을 충족하는 플러그인을 선택하는 것이 중요합니다.

템플릿으로 프리미엄급 디자인 제작

다양한 무료 및 유료 테마와 템플릿을 제공합니다. 원하는 디자인의 테마를 찾아 적용하기만 하면 손쉽게 동일한 스타일을 자신의 웹사이트에 반영할 수 있습니다. 이 때문에 워드프레스 홈페이지, 블로그, 쇼핑몰 등 다양한 사이트 제작 방법은 어떤 테마를 선택하느냐에 따라 달라집니다.

SEO 유리

SEO(검색 엔진 최적화) 측면에서 특히 구글 검색에 최적화되어 있습니다. 이를 통해 사용자들은 웹사이트를 구축하고 나서 별도의 추가 설정 없이도 검색 엔진에서 높은 노출을 기대할 수 있습니다.

워드프레스 단점

지속적인 업데이트 필요

지속적인 업데이트가 필요한 플랫폼으로 유지보수로 늘 최신 버전을 유지하는 것이 좋으나 업데이트 후 기존의 플러그인과 충돌이 일어날 수 있으므로 백업을 준비해야 하고, 문제가 생길 시 호스팅사와 접촉하여 해결해야 할 일들이 있을 수 있습니다.

커스터마이징의 한계

다양한 기능과 디자인을 제공하지만 100% 세부적인 커스터마이징에는 한계가 있습니다. HTML, CSS, JS, PHP에 대한 기본적인 이해도가 필요하며, 워드프레스의 코어 구조, 테마 및 플러그인의 기능, 호출 기능인 훅(Hook)에 대한 사전 지식도 알고 있어야 원활한 커스터마이징이 가능합니다. 고도의 기능이 구현된 사이트르 제작하기 위해서는 코드 기반의 웹개발이 더 나은 선택이 될 수 있습니다.

느린 속도

데이터베이스, 플러그인의 코드 데이터가 증가하면 소프트웨어 속도가 느려집니다. 이를 위한 속도에 최적화된 방법으로 웹사이트를 꾸준히 관리하는 것이 필요합니다.

마무리

이처럼 워드프레스는 쉬운 제작부터 비용 절감, 다양한 확장 기능, SEO 친화적인 특징까지 많은 장점을 제공합니다. 많은 장점을 가졌지만 무언가를 시작하고 완성하기까지 많은 단계가 있고 간단하지 만은 않기 때문에 세부적인 커스터마이징을 하려면 한계가 있을 수 있습니다.

최근에 제가 워드프레스 플러그인 설치시 가장 첫번째로 설치하는 강력한 기능의 무료 플러그인이 있습니다. 바로 Admin and Site Enhancements(ACE) 플러그인 입니다. 여러가지 강력한 기능을 한 번에 제공하여 사용자 경험을 크게 향상시킵니다. 이 플러그인 하나로 인하여 여러 다른 플러그인을 설치할 필요가 없어 가장 추천하는 플러그인입니다. 이번 글에서는 ASE 플러그인의 추천 기능을 설명하겠습니다.

플러그인 소개

ase 플러그인

플러그인명은 Admin and Site Enhancements 이고, 한국어로는 관리자 및 사이트 개선 사항입니다. 관리자 페이지에서 플러그인 > 새로 추가를 통해 플러그인을 검색하여 지금 설치 > 활성화를 합니다.

ASE 플러그인 추천 기능

콘텐츠 관리

ase 플러그인 기능1

사용자 정의 코드

ase 플러그인 기능2

<head>, <body>, <footer>에 코드 삽입 기능입니다. 이전에는 코드 스니펫 플러그인 또는 사용하는 테마를 이용해 코드 삽입을 하였다면 이제는 이 기능 활성화 후 아래에서 직접 코드를 입력할 수 있습니다.

구성 요소 비활성화

ase 플러그인 기능3

워드프레스에서 불필요한 기본 기능인 댓글을 비활성화하여 관련 화면을 제거할 수 있고, 코어, 테마, 플러그인의 자동 업데이트를 비활성화하여 수동으로 업데이트를 관리하여 보다 안전하게 사이트를 운영할 수 있습니다.

마무리

Admin and Site Enhancements(ASE) 플러그인은 무료로 하나의 플러그인에 사이트 제작과 운영에 필요한 강력한 도구를 제공하여 콘텐츠 제작, 관리부터 보안 강화, 코드 삽입에 이르기까지 사이트의 효율성을 높이는데 탁월한 선택입니다. 효율적인 제작, 운영이 필요하다면 ASE 플러그인을 적극적으로 활용해보세요.

웹사이트 개설 전 도메인과 호스팅을 연결해주는 작업은 필수 입니다. 여기서는 Hosting.kr에서 구입한 도메인을 카페24 호스팅과 연결하는 방법을 알아보겠습니다.

hosting.kr 도메인 네임서버 변경

hosting.kr 도메인 정보 확인

hosting.kr 도메인

먼저 hosting.kr에 로그인하여 상단 오른쪽 프로필 아이콘을 통해 해당 도메인을 클릭하여 도메인 관리 페이지로 이동합니다.

hosting.kr 도메인2

네임서버/DNS 탭으로 이동하여 연필 수정 아이콘을 선택합니다. 기본적으로 등록된 네임서버 정보는 hosting.co.kr로 지정되어 있는데 이를 카페24에 맞게 변경할 필요가 있습니다.

카페24 네임서버 정보 확인

카페24 네임서버 확인

카페24 호스팅 센터에 로그인 한 후 오른쪽 상단의 나의 서비스 관리를 클릭한 후 호스팅 관리 > 도메인 연결관리를 클릭한 후 페이지에서 도메인 연결 정보 섹션에서 카페24 네임서버 보기를 클릭하여 주소를 확인합니다.

카페24의 기본 네임서버를 다음과 같습니다. 이 정보를 hosting.kr 네임서버에 입력하면 됩니다.

hosting.kr 네임서버 설정 변경

hosting.kr 도메인 네임서버 변경

다시 hosting.kr 사이트로 이동하여 기존의 네임서버 정보를 삭제하고 카페24 네임서버 4가지 주소를 입력한 후 저장합니다. 네임서버 변경은 완료 후 적용되는데 몇 시간 내부터 최대 24시간까지 소요될 수 있습니다.

카페24 도메인 연결

카페24 도메인 연결 확인 및 대표 도메인으로 변경

카페24 대표도메인 설정

네임서버가 설정되었으면 카페24에서 도메인 연결을 확인하는 단계입니다. 카페24 호스팅 관리 페이지에서 도메인 연결 관리로 이동합니다. 설정된 도메인 섹션에 대표 도메인이 xxx.mycafe24.com로 되어 있을 경우, hosting.kr에서 구매한 xxx.com과 같은 도메인으로 설정해 주어야 합니다. 이 전에 SSL 인증이 안되어 있을 경우, SSL 인증서의 요청 버튼을 클릭하여 SSL 적용을 시킵니다.

최종적으로 도메인으로 접속하였을 때 정상적으로 워드프레스 초기 화면이 나오는지 확인합니다.

📚 함께 읽으면 좋은 글

카페24 호스팅 타사 도메인 연결 (가비아)
카페24 도메인 호스팅 구입

프로필 이미지는 기본 설정에서 워드프레스 사이트에 로그인 한 후, Gravatar를 통해 사용자 프로필 이미지를 관리해야 하므로 번거로울 수가 있는데요. 사이트 내에서 직접 이미지를 업로드하고, 사용자별로 프로필 사진을 빠르게 변경하고 싶을 때는 Simple Local Avatars 플러그인을 활용하는 것이 좋습니다. 이 글에서는 Simple Local Avatars 플러그인을 사용하여 프로필 이미지를 변경하는 방법을 안내합니다.

Simple Local Avatars 활용법

플러그인 설치

simple local avatars

플러그인 < 새로 추가로 이동하여 검색을 통해 Simple Local Avatars 플러그인을 찾고 설치 후 활성화를 클릭합니다.

프로필 이미지 변경

아바타 업로드

사용자 > 프로필로 이동 후 페이지 하단의 아바타 섹션에서 아바타 업로드 옵션을 통해 원하는 이미지를 선택하고 업로드 할 수 있습니다. 업로드 후 프로필 업데이트 버튼을 클릭하여 변경사항을 저장합니다.

이미지가 업로드 되면 프로필 페이지, 워드프레스 댓글, 포스트 등에서 새로 설정한 프로필 이미지가 나타납니다.

📚 함께 읽으면 좋은 글

워드프레스 관리자 페이지 기본 설정
워드프레스 플러그인 설치 방법
Smush 이미지 최적화 플러그인

워드프레스에서 바로 폰트 설치를 위해 폰트 파일을 미디어에 삽입시 죄송합니다. "이 파일 타입 업로드할 권한이 없습니다."라는 오류가 나옵니다. 이를 해결하기 위해서는 function.php 파일에 폰트 형식을 허용하는 코드의 삽입이 필요합니다.

이 글에서는 폰트 타입 허용 코드를 삽입 후 직접 폰트 파일을 업로드하여 사이트에 추가하는 방법을 살펴보겠습니다.

워드프레스 폰트 직접 설치

폰트 추가 삽입 코드

function custom_mime_types($mimes) {
$mimes['otf'] = 'font/otf';
$mimes['ttf'] = 'font/ttf';
$mimes['woff'] = 'font/woff';
$mimes['woff2'] = 'font/woff2';
return $mimes;
}
add_filter('upload_mimes', 'custom_mime_types');

위의 코드를 functions.php 파일에 추가하면 otf, ttf, woff, woff2 파일을 자유롭게 미디어에 업로드하여 폰트를 설치하여 내 사이트에 적용할 수 있습니다.

관리자페이지에서 모양 > 테마 파일 편집기에서 functions.php 파일을 찾을 수 있으며, 테마 파일 편집기가 메뉴에 없다면 FTP를 접속하거나 파일 매니저라는 플러그인을 설치하면 됩니다.

css에 @font-face 적용

@font-face {
font-family: 'Pretendard-Medium';
src: url('폰트 위치') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Pretendard-SemiBold';
src: url('폰트 위치') format('woff');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'Pretendard-Bold';
src: url('폰트 위치') format('woff');
font-weight: 700;
font-style: normal;
}

html {
scroll-behavior: smooth;
}

h1,
h2 {
font-family: 'Pretendard-Bold';
}

h3,
h4,
h5,
h6,
strong,
b {
font-family: 'Pretendard-SemiBold';
}

body {
word-break: keep-all;
font-family: 'Pretendard-Medium';
}

모양 > 사용자 정의 > 추가 CSS 에서 위의 font-face를 통해 폰트를 사이트에 적용할 수 있습니다.

📚 함께 읽으면 좋은 글

워드프레스 폰트 추가 방법

카페24 호스팅에 가비아, 후이즈, 닷홈, 호스팅케이알과 같은 타사에서 산 도메인을 연결할 경우가 많습니다. 이 포스팅에서는 카페24에 타도메인인 가비아 연결하는 방법을 안내하겠습니다.

방법은 타도메인 사이트에 들어가 네임서버를 변경한 후 카페24 도메인 설정에서 타도메인을 연결해주면 되는 간단한 작업입니다.

카페24 호스팅 타사 도메인 연결

카페24 네임서버 복사

타도메인 연결방법

카페24 도메인 연결관리에 보유 도메인을 연결할 경우 도메인의 네임서버를 카페24로 변경해주어야 합니다. 카페24 네임서버 보기를 통해 네임서버 주소 4개를 복사하여 사용합니다.

가비아에서 네임 서버 변경

가비아 도메인 관리툴

가비아 로그인 후 My가비아 > 도메인 통합 관리툴을 선택합니다.

가비아 카페24 네임서버로 변경

네임서버 설정창에서 좀 전에 카페24 서버 주소를 복사하여 붙여넣기를 합니다.

카페24 타도메인 연결

카페24 타도메인 연결

카페24 호스팅 로그인 후 나의서비스관리 > 도메인 연결관리 > 도메인 연결하기 에서 구매한 도메인을 입력한 후 연결하기

대표 도메인 변경
타도메인 연결 완료

도메인 소유자의 이메일로 인증키 발송을 통해 인증 절차를 진행한 후 정상적으로 연결이 완료됩니다. 대표 도메인이 mycafe24.com 으로 되어있다면 도메인 선택 후 대표도메인으로 변경을 눌러 대표 도메인으로 설정해줍니다.

워드프레스 도메인 주소 변경

워드프레스 주소 변경

마지막으로 워드프레스의 관리자 > 설정 > 일반 페이지에서 도메인 워드프레스 주소와 사이트 주소에 https://를 포함한 전체 도메인 주소를 입력한 후 변경사항 저장을 누릅니다.

📚 함께 읽으면 좋은 글

카페24 도메인 호스팅 구입
FastComet 요금제 비교 및 구매 (워드프레스 호스팅 추천)

워드프레스 Child 테마는 부모 테마의 자식 테마로 사이트를 수정과 업데이트를 할 경우 필수적으로 이용해야 합니다. 이 글에서는 차일드 테마를 사용하는 이유와 역할, 내부에 포함되는 파일에 대해 살펴보겠습니다.

child 테마

왜 Child 테마가 필요한가?

Child 테마의 역할

부모 테마에 기반을 두고 추가적인 사용자 정의, 스타일 변경 또는 기능 확장을 역할을 합니다. 부모 테마의 기능을 그대로 상속받으면서 그 위에 커스텀 코드를 추가하여 원하는 대로 사이트를 제작할 수 있습니다.

Child 테마 파일 구성

Elementor는 인기 있는 노코드 페이지 빌더 플러그인으로 코드 개발 없이 웹사이트를 제작하도록 도와줍니다. 이 도구는 드래그 인 드롭 방식으로 웹 페이지의 요소를 배치하고 화면을 꾸밀 수 있습니다.

엘리멘터는 무료 버전과 프로 버전이 있는데 무료에서는 기본적인 웹사이트를 위한 최소한 기능의 위젯만 제공하기 때문에 원하는 사이트를 만들고자한다면 더 복잡하고 다양한 기능을 제공하는 프로 버전으로 업그레이드하는 것을 권장드립니다.

이 글에서는 엘레멘토 프로의 주요 기능과 프로 버전에서 제공하는 기능을 무료 버전과 비교하여 살펴보겠습니다.

elementor pro

Elementor 장점

Elementor Pro 주요 기능

Elementor 프로 버전 vs 무료 버전

위젯 기능무료 버전에서 제공프로 버전에서만 제공
텍스트 편집기O
이미지O
비디오O
버튼O
이미지 박스O
헤드라인 애니메이션O
아이콘O
아이콘 박스O
소셜 아이콘O
이미지 갤러리O
이미지 카루셀O
기본 갤러리O
구글 맵O
아코디언O
O
토글O
소셜 버튼O
알림O
프로그레스 바O
테스트 모듈O
비디오 플레이어O
카운터O
타이머O
폼 빌더O
포스트 네비게이션O
포스트 정보O
포트폴리오O
로그인O
애니메이션 헤드라인O
가격표O
카운트다운O
팝업 빌더O
메뉴O
우커머스 위젯O
다이나믹 태그O
테마 빌더O

Elementor Pro 가격(2024년 2분기 기준)

elementor pro 가격

Elementor 빌더로 만든 테마 리스트

📚 함께 읽으면 좋은 글

Elementor 글꼴, 색상 바꾸기
Elementor에서 breadcrumbs 삽입

워드프레스에서 여러 사용자가 함께 작업할 경우 효율적으로 관리하기 위하여 사용자를 추가하고, 사용자에 대한 권한을 적절히 설정해야 합니다. 이 글에서는 워드프레스 관리자 화면에서 사용자를 추가하고 권한을 조정하는 방법에 대해 설명하겠습니다.

사용자 추가

사용자 추가

관리자 페이지에서 사용자 > 새 사용자 추가를 통해 아래와 같이 입력 후 새 사용자 추가 버튼을 클립니다.

역할은 설정 > 일반 페이지에 새 사용자 기본 역할이 구독자로 기본 설정 되어 있습니다. 이를 관리자로 변경할 경우 사이트의 모든 기능에 접근하여 관리가 가능합니다.

사용자 역할

사용자 권한 조정

사용자 > 모든 사용자를 선택하여 변경하고자 하는 이름 옆에 편집을 선택하여 역할 드롭다운 메뉴에서 새 역할을 선택 후 사용자 업데이트를 클릭하여 저장합니다.

사용자 삭제

사용자 > 모든 사용자를 선택하여 삭제할 사용자 이름 옆의 체크박스를 선택하여 삭제합니다.

마무리

워드프레스에서 사용자를 추가하고 그들의 권한을 조정하는 것은 사이트 관리에서 핵심적인 부분입니다. 적절한 권한을 설정함으로써 사이트의 보안을 유지하고 작업을 효율적으로 처리할 수 있습니다.

📚 함께 읽으면 좋은 글

마이그레이션 플러그인 All-in-One WP Migration 사용법
워드프레스 관리자 페이지 기본 설정
워드프레스 메뉴 만들기
워드프레스 플러그인 설치 방법

워드프레스 직접 설치하여 사이트를 제작할 경우 로컬 서버에서 작업을 완료한 후 public으로 전환을 하게 됩니다. 이 글에서는 MAMP 프로그램을 컴퓨터에 설치하여 로컬 서버를 이용해 워드프레스 설치하는 방법을 살펴보겠습니다.

워드프레스 설치형 다운로드

설치형 다운로드

wordpress.org/download/ 에 방문하여 WordPress 현재 버전을 다운로드합니다.

MAMP 다운로드

MAMP란?

웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP의 약어이자 Solution Stack 입니다. MAMP를 컴퓨터에 설치하면 PHP, 웹서버, MySQL 서버 환경이 구축되어 워드프레스를 로컬서버로 구축하여 사용할 수 있습니다. 대체할 다른 프로그램은 XAMPP와 WAMP가 있습니다.

MAMP 다운로드, 설치

MAMP 설치

MAMP 사이트에서 내 컴퓨터 환경에 맞는 것으로 다운로드 후 설치를 합니다.

데이터베이스 만들기

mamp 구동 시작

MAMP 프로그램을 구동 시킨 후 상단 오른쪽 Start를 클릭하면 잠시 후 사이트가 오픈됩니다.

mamp tools phpmyadmin

Tools > phpMyAdmin 선택합니다.

db 만들기

데이터베이스 탭에서 데이터베이스명을 입력하고 만들기를 통해 새 데이터베이스를 만듭니다.

워드프레스 설치

MAMP에 워드프레스 폴더 삽입

mamp에 워드프레스 폴더 삽입

컴퓨터 응용 프로그램 > MAMP > htdocs 폴더에 다운로드 하였던 압축 해제한 wordpress 폴더를 그대로 삽입합니다.

로컬호스트 설정

localhost port 확인
localhost 화면

MAMP에서 Ports를 확인하여 설정된 Apache Port 번호를 확인 후 웹 창을 띄어 localhost:포트번호를 입력하면 위의 같은 화면이 나옵니다.

wordpress/ 를 클릭합니다.

로컬호스트에서 워드프레스 기본 설정

워드프레스 설치

wordpress/ 를 클릭시 위와 같은 화면으로 전환되면 시작합니다를 클릭하여 워드프레스 기본 설정을 합니다.

워드프레스 설치2

위에서 phpMyAdmin의 데이터베이스에서 새로 만든 데이터베이스 이름을 입력하고, 사용자명과 비밀번호는 root로 입력해 줍니다.

워드프레스 설치3

사이트 제목과 어드민 아이디인 사용자명, 어드민 비밀번호인 비밀번호 그리고 이메일 주소를 입력 후 워드프레스 설치를 누릅니다.

워드프레스 설치완료

성공이라는 메시지가 뜨면 설치가 완료된 것입니다. 로그인을 눌러 관리자 계정으로 로그인하여 진입합니다.

📚 함께 읽으면 좋은 글

워드프레스 가입형 VS 설치형

워드프레스는 설치형과 가입형 2가지로 나뉩니다. 가입형은 wordpress.com에서 가입을 하고, 설치형은 wordpress.org에서 설치 파일을 다운로드하여 직접 설치합니다. 보다 자세히 살펴보겠습니다.

가입형

매달 비용을 지불하고 보안 문제로 인해 플러그인, 테마, 커스텀 코드 등의 지원을 하지 않아 확장성과 커스터마이징의 제약이 있습니다. 가격은 아래와 같이 연단위, 월단위의 가격을 제공하고 있습니다. 테마와 플러그인 설치 기능을 제공하는 요금제인 Creator 요금의 경우 연단위는 25달러, 월단위는 40달려로 저렴하다고 생각되지는 않습니다.

가입형 연단위 가격

연단위 요금제 wordpress.com

가입형 월단위 가격

월단위 요금제 wordpress.com

설치형

설치형 다운로드

가입형에 비하여 기능과 디자인 구현의 자유도가 높지만 호스팅을 구매하고 직접 설치한 후 연결해야 하므로 손이 더 갈 수 있습니다. 호스팅 업체마다 서비스 가격이 다르고 서버 트래픽과 용량 등의 조건에 따라 비용이 다릅니다. 보통 알고 있는 워드프레스는 이 설치형을 이야기 합니다.

설치형은 자유롭게 커스터마이징이 가능하고, 무료, 유료 테마와 플러그인을 자유롭게 설치하고, 코드 수정이 가능합니다.

가입형과 설치형 중 어떤 것을 선택해야 할까?

가입형과 설치형의 선택은 사용 목적에 따라 나뉠 수 있습니다. 가입형은 구현 자유도가 상당히 낮기 때문에 기능의 거의 없고, 심플한 디자인의 블로그, 회사 소개 페이지를 제작할 경우에 맞을 수 있습니다.

반면에 설치형은 자유도가 높고, 커스터마이징이 자유로워 원하는 기능과 스타일의 사이트가 있다면 설치형을 권장합니다. 단, 설치형은 웹호스팅과 도메인을 구매하여 연결해야 하므로 시간과 노력이 더 들 수 있습니다.

워드프레스로 블로그를 운영하시는 분들이라면 필수적으로 애드센스 승인을 받아 수익화 운영을 하시는 편입니다. 보통 포스팅의 개수가 10개를 넘으면 구글에서 애드센스를 신청하고 승인받기까지의 기간동안 꾸준히 포스팅을 하는 것이 좋습니다. 이 글에서는 애드센스 신청부터 연동 방법까지를 살펴보도록 하겠습니다.

애드센스 시작

아래 링크를 통해 구글 애드센스 페이지로 이동하여 첫 페이지에서 시작하기를 클릭한 후 구글 로그인을 합니다.

구글 애드센스 가입

워드프레스 애드센스 연동

애드센스를 처음 사용하는 경우 - 사이트 신규

애드센스 사용시작

애드센스를 처음 신청한다면 시작 전 유의사항 페이지에서 사이트 주소를 입력한 후 수취인 국가/지역을 대한민국으로 지정한 후 애드센스 사용 시작을 선택합니다.

애드센스 사용시작2

애드센스 사용을 위해 지급, 광고, 사이트의 3단계 단계를 거쳐야 하는데요. 광고 단계는 승인 이후에 처리하면 됩니다.

애드센스를 이미 사용하는 경우 - 사이트 추가

사이트 추가
사이트 추가2

현재 애드센스를 운영중이고, 이미 등록한 사이트가 있다면 새 사이트 버튼을 눌러 추가해줍니다.

사이트 소유권 확인

사이트 소유권 확인 1

다음으로 사이트 소유권 확인 작업을 진행합니다. 필자의 경우 메타 태그의 코드를 복사하는 방법을 사용합니다. 메타태그 코드를 복사한 후 워드프레스 관리자 페이지로 이동합니다.

wp code 플러그인

메타태그 코드 삽입을 위해 WPCode - Insert Headers and Footers 플러그인을 설치한 후 활성화합니다.

워드프레스 코드 삽입

위의 플러그인은 Code Snippets > Header & Footer 페이지로 들어가 Header 부분에 코드 붙여넣기를 합니다. 다시 위의 구글 화면으로 돌아가 확인 버튼을 눌러주면 소유권 확인이 완료되었다는 메시지를 확인합니다.

검토 요청

애드센스 검토요청

아래의 검토 요청 버튼을 클릭합니다.

요청완료

요청이 완료되었습니다. 승인까지의 검토 기간은 최대 2주가 소요될 수 있다고 하며 결과는 이메일로 통보됩니다.

애드센스 승인상태

승인 검토 상태에서는 준비 중으로 되어있고, 승인이 완료 되었다면 준비됨으로 표시됩니다.

승인 완료 이메일

애드센스 승인 이메일

필자의 경우 신청 후 이틀 만에 승인 이메일을 받았습니다. 이제 자동 광고를 설정하면 자동으로 광고가 게재되게 됩니다.

📚 같이 읽으면 좋은 글

구글 사이트 등록 (서치콘솔)

워드프레스 제작시 사이드바나 푸터를 위젯을 사용하여 커스텀할 경우가 많습니다. 위젯 페이지는 알림판에서 외모 > 위젯인데요. 테마별로 위젯 페이지의 화면이 다른 경우가 있습니다. 사이드바만 나온 기본 화면의 위젯 페이지의 경우 상세 옵션 설정이 가능한 위젯 페이지로 바꿔야할 경우 해당 플러그인을 설치하면 됩니다. 이 글에서 상세 위젯 페이지로 변경하는 방법을 살펴보겠습니다.

위젯 설정 페이지 커스텀용으로 변경하는 방법

이전 위젯 페이지

이전 위젯화면

기본 위젯화면으로 사이드바만 나와있어 다른 푸터나 다른 부분의 위젯을 커스텀하기 어려운 화면입니다.

플러그인 설치

위젯 옵션 플러그인

플러그인에서 widget을 검색하여 위의 위젯 옵션 플러그인을 설치한 후 활성화합니다. 워드프레스 플러그인 설치 방법은 이글을 참고하시면 됩니다.

커스텀용 상세 위젯 페이지

위젯화면

다음과 같이 플러그인 설치 후 다양한 커스텀이 가능한 위젯 페이지로 변경되었습니다. 해당 페이지에서 보다 다양한 위젯을 생성할 수 있습니다.

ALL RIGHTS ARE RESERVED.
magnifiercrossmenucross-circle