워드프레스 ShortCode와 블로그스팟 위젯/HTML 코드 사용법 비교

블로그를 운영하다 보면 웹사이트에 다양한 기능(갤러리, 폼, 포스트 목록 등)을 손쉽게 넣고 싶을 때가 많습니다.
워드프레스에서는 ShortCode(숏코드), 블로그스팟(Blogger)에서는 HTML 위젯과 커스텀 코드 활용이 대표적입니다.

1. ShortCode (워드프레스)

• ShortCode는 [gallery ids="10,20"], [contact-form-7 id="123"] 등 대괄호로 감싸 표현합니다.

• 복잡한 기능도 한 줄로 삽입 가능하며, “ID”, "slug" 등 존재하는 콘텐츠의 식별자가 필요합니다.

• 예시:

  [gallery ids="10,22,35"] [product id="123" show_price="yes"]

• 올바른 값을 입력하지 않으면 404 페이지(아래 이미지처럼)가 나타날 수 있습니다.

잘못된 값을 입력해 나타난 404 에러 화면 예시*

2. 블로그스팟(Blogger)에서 비슷하게 적용하는 법

블로그스팟은 ShortCode 기능은 없지만, 비슷한 목적을 다음과 같이 달성할 수 있습니다.

(1) HTML/JavaScript 위젯 활용

• 구성: 블로거 대시보드 > 레이아웃 > “가젯 추가” > “HTML/JavaScript”

• 활용 예시:

  • 갤러리, 폼, 구글 캘린더 등 원하는 기능의 임베드 코드, 간단한 HTML, 외부 위젯 삽입

  • 예:

    
    

    <!-- 이미지 갤러리 임베드 예시 --><div><imgsrc="이미지1.jpg"alt="photo1"width="100"><imgsrc="이미지2.jpg"alt="photo2"width="100"></div>

  • 폼 추가 예시 (구글 폼, Typeform 등):

    
    

    <iframesrc="폼_임베드_URL"width="100%"height="500"></iframe>

• 콘텐츠 식별자:
  블로그스팟에서는 포스트의 링크(고유 URL), 이미지 주소 등을 직접 삽입합니다.

(2) 개별 포스트/페이지에 코드 직접 추가

• 작성 페이지에서 “HTML 모드”로 전환 후 위와 같은 코드를 붙여넣어 원하는 기능을 구현

3. 요약 비교

플랫폼	기능	방식형식/문법	적용 위치
워드프레스	ShortCode	[shortcode id="123"]	글, 페이지, 위젯 등
블로그스팟	HTML/Script 직접입력	<div>...</div>, <iframe src="...">, 이미지/포스트 URL 활용	가젯, 포스트, 페이지

4. 활용 Tips

• 워드프레스: 반드시 실제 존재하는 콘텐츠의 ID, slug 등 정확한 값을 사용해야 하며, 잘못된 값/오타 입력 시 404처럼 “표시할 글이 없습니다” 메시지가 뜰 수 있습니다.

• 블로그스팟: 위젯이나 포스트 내에 HTML 삽입 시 링크 주소, 이미지 경로 등을 정확히 입력해야 원하는 결과가 나옵니다.

결론

워드프레스의 ShortCode는 기능 확장과 통합에 강력하고, 블로그스팟(Blogger)은 HTML, 임베드 코드, 위젯을 활용해 비슷한 효과를 줄 수 있습니다.  각 플랫폼의 방식에 맞춰 콘텐츠의 식별자(포스트 ID, 슬러그, URL 등)와 옵션값을 올바르게 입력하는 것이 가장 중요합니다.

이처럼 플랫폼에 따라 사용법은 다르지만, 핵심 원리는 정확한 콘텐츠 지정과 올바른 삽입 위치입니다.궁금한 점이 있으면 각 플랫폼의 공식 문서와 커뮤니티를 적극 활용하세요!

처음으로