고스트 프로(Ghost Pro) 블로그 장점 3가지

1. 시작하며 웹카이브는 고스트 프로(Ghost Pro)로 제작된 블로그입니다. 현재 고스트 프로의 Creator 플랜을 구독 중이며, 2025년 1월 첫 포스팅을 시작으로 홈페이지와 아임웹 관련 콘텐츠를 업로드해 왔습니다. 웹카이브를 구독해 주신 구독자분들께 뉴스레터 발행 등 최대한 고스트 프로에 내장된 다양한 기능을 사용하고자 노력하고 있습니다. 이번 글에서는 고스트 프로를 사용해 보며

구글 파비콘 노출 방법 (이미지 크기 변경, 서치콘솔 재크롤링)

1. 시작하며 고스트(Ghost) 블로그를 운영하면서 구글, 네이버, 다음에 모두 사이트를 등록했습니다. 그런데 네이버에서는 파비콘이 잘 노출되지만, 구글에서는 파비콘이 노출되지 않는 현상이 발생했습니다. 이번 글에서는 파비콘이 구글에 노출되지 않을 때 확인해야 할 사항과, 실제로 해결했던 과정을 공유해 드리겠습니다. 고스트(Ghost) 블로그뿐만 아니라 홈페이지의 파비콘이 구글에 노출이 안 되고 있다면 아래

아임웹 자주 묻는 질문 게시판 디자인 커스텀 (코드)

1. 시작하며 홈페이지를 제작할 때 자주 묻는 질문(FAQ) 게시판은 방문자의 문의를 줄이고, 빠른 정보 제공을 도와주는 핵심 요소입니다. 특히 예약·상담·구매 전 궁금증이 많은 페이지일수록 FAQ 게시판은 반드시 필요하다고 할 수 있습니다. 아임웹에서는 아코디언 게시판 기능을 활용해 쉽게 FAQ 게시판을 만들 수 있지만, 기본 디자인은 다소 아쉽게 느껴질

아임웹 입력폼 디자인 커스텀 (코드)

1. 시작하며 아임웹 홈페이지를 제작할 때 입력폼 위젯은 많이 사용되는 요소 중 하나입니다. 간단한 문의 양식부터 상담 신청, 예약 접수까지 다양한 목적으로 활용됩니다. 하지만 아임웹 디자인 모드에서 제공하는 기본 설정만으로는 세세한 디자인 설정이 어려운 경우가 많습니다. 특히 사이트 전체 분위기와 입력폼의 디자인이 어울리지 않으면 통일감이 떨어지게 됩니다. 그래서 이번 글에서는,

아임웹 여러 개 위젯에 배경색 칠하기 (코드)

1. 시작하며 아임웹에서는 기본적으로 섹션 설정 > 배경색 기능을 통해 섹션 전체에 배경색을 쉽게 적용할 수 있습니다. 하지만 디자인에 따라 섹션 전체가 아닌, 본문 안의 위젯에만 배경색을 적용하고 싶을 때가 있습니다. 예를 들어, 아래와 같은 경우입니다. * 좌우 여백은 그대로 두고, 본문에만 색을 입히고 싶은 경우 * 여러 개의 위젯(텍스트, 이미지,

아임웹 텍스트 위젯 마우스 오버 시 이미지 확대 (코드)

1. 시작하며 아임웹에서 홈페이지를 제작할 때 텍스트 위젯 안에 이미지를 삽입해 카드 형태로 구성하는 경우가 많습니다. 이때 단순한 정적인 이미지보다, 마우스 오버 시 이미지에 애니메이션 효과를 적용하면 사용자 경험이 더욱 향상됩니다! 이번 글에서는 텍스트 위젯 위에 마우스를 올렸을 때 이미지가 자연스럽게 확대되는 애니메이션 코드를 소개해 드리겠습니다. 0:00 /0:13

아임웹 이미지 위젯 마우스 오버 시 확대 배율 수정 (코드)

1. 시작하며 아임웹에서 가장 많이 사용하는 위젯 중 하나가 이미지 위젯입니다. 이미지 위젯을 활용하면 시각적으로 강조하고 싶은 요소를 부각할 수 있으며, 기본적으로 마우스 오버 시 확대 효과도 제공됩니다. 하지만 기본 설정에서는 확대 배율을 조정할 수 없다는 점이 아쉬운데요. 아임웹 기본 확대 효과는 110% (1.1배)로 설정되어 있으며, 더 크거나

아임웹 텍스트 위젯 마우스 오버 시 테두리 효과 (코드)

1. 시작하며 아임웹 홈페이지를 제작할 때 가장 많이 사용하는 위젯 중 하나가 텍스트 위젯입니다. 단순한 텍스트 위젯도 마우스 오버 효과를 추가하면 더욱 세련된 디자인을 연출할 수 있습니다. 이번 글에서는 마우스를 올리면 테두리 색상이 자연스럽게 변하는 애니메이션 효과를 적용하는 방법을 소개해 드리겠습니다. 과하지 않으면서도 사용자의 시선을 자연스럽게 유도할 수 있는 디자인

아임웹으로 만든 사이트인지 알 수 있는 방법

1. 시작하며 웹사이트를 분석하다 보면 이 사이트는 어떤 웹빌더로 제작되었을까? 하는 궁금증이 생길 때가 있습니다. 특히, 아임웹(Imweb), 웹플로우(Webflow), 윅스(Wix), 워드프레스(WordPress) 등 다양한 웹빌더가 존재하다 보니, 원하는 기능을 구현할 수 있는지 확인하는 것이 중요합니다. 이번 글에서는 특정 사이트가 아임웹으로 만든 홈페이지인지, 아니면 다른 웹빌더를 사용했는지 3초 만에

아임웹 버튼 마우스 오버 시 화살표 애니메이션 (코드)

1. 시작하며 웹사이트를 제작할 때 버튼은 중요한 인터페이스 요소 중 하나입니다. 특히, 텍스트와 화살표를 조합한 버튼을 많이 보셨을 겁니다. 💡참고 텍스트와 화살표를 조합한 버튼은 버튼 코드 생성기를 통해 쉽게 구현할 수 있습니다.아임웹 버튼 코드 생성기 | 맞춤형 버튼 무료 생성 툴아임웹 버튼 코드 생성기에서 맞춤형 버튼을 무료로 제작하세요. HTML·CSS

프리픽(Freepik) 구독 해지 및 환불 조건

1. 시작하며 홈페이지를 제작할 때 고해상도, 고퀄리티 이미지가 많이 필요합니다. 그래서 홈페이지 제작자분들께서는 한 개 이상의 유료 이미지 사이트를 이용해 필요한 이미지를 구매해 사용하시는 경우가 많으실 텐데요. 저는 다양한 유료 이미지 사이트 중에서 프리픽(Freepik)을 이용하고 있습니다. 작년 블랙프라이데이 기간에 1년 구독권을 결제해 프리미엄 요금제를 사용하고 있습니다. 하지만, 최근에

아임웹 홈페이지 회원가입 설정 - [3탄] 자동 메일 발송

1. 시작하며 아임웹을 통해 회원가입 기능을 설정했다면, 그다음으로 꼭 확인해야 할 것이 자동 메일 발송 기능입니다. 회원가입, 주문, 결제, 게시물 등록, 입력폼 수신 등 다양한 상황에서 사용자에게 자동으로 안내 메일을 발송할 수 있기 때문입니다. [이전 글] * 아임웹 홈페이지 회원가입 설정 - [1탄] 회원가입 및 로그인 아임웹 홈페이지 회원가입 설정 -

아임웹 칼럼

아임웹 홈페이지 회원가입 설정 - [2탄] 사용자 알림 발송

1. 시작하며 웹사이트 운영에서 회원과의 원활한 커뮤니케이션이 중요합니다. 특히, 신규 회원가입이 이루어진 후 관리자가 사용자에게 직접 알림을 보낼 수 있는 기능이 필요할 수 있습니다. 이를 통해 사용자에게 중요한 정보나 업데이트를 효과적으로 전달할 수 있기 때문입니다. 아임웹에서는 회원가입한 사용자에게 관리자가 알림 발송을 할 수 있는 기능을 제공하고 있습니다. 이전 글에서는 아임웹

아임웹 칼럼

아임웹 홈페이지 회원가입 설정 - [1탄] 회원가입 및 로그인

1. 시작하며 웹사이트에서 회원가입 및 로그인 기능은 자주 사용됩니다. 특히, 아임웹 홈페이지에서는 로그인 위젯을 추가하여 손쉽게 회원 시스템을 구현할 수 있습니다. 이번 글에서는 아임웹 홈페이지에서 회원가입 및 로그인 기능을 설정하는 방법을 단계별로 살펴보겠습니다. 이를 통해 방문자와 관리자의 입장에서 각각의 기능이 어떻게 동작하는지 확인할 수 있습니다. 2. 아임웹 회원가입 및 로그인

아임웹 버튼

아임웹 탑버튼 만들기 (코드)

1. 시작하며 웹사이트를 운영할 때, 페이지 내용이 길어지면 사용자가 상단으로 빠르게 이동할 수 있도록 탑버튼(Top Button)을 추가하는 것이 좋습니다. 특히, 우측 하단에 플로팅 버튼 형태로 구현하면 사용자의 눈에 잘 띄면서도 콘텐츠를 방해하지 않는 방식으로 활용할 수 있습니다. 이번 글에서는 아임웹에서 적용 가능한 깔끔한 탑버튼 코드를 소개해 드리겠습니다. 스크롤을

아임웹 코드 생성기 가이드

아임웹 애니메이션 코드 생성기 가이드

1. 시작하며 아임웹 애니메이션 코드 생성기는 아임웹 요소에 다양한 애니메이션 효과를 추가할 수 있도록 도와주는 도구입니다. 기본적으로 아임웹에서는 위젯 단위로 애니메이션을 설정할 수 있지만, 이 생성기를 활용하면 위젯 ID뿐만 아니라 특정 요소의 ID를 지정하여 보다 정밀한 애니메이션을 구현할 수 있습니다. 또한, 다양한 트리거 방식(자동 시작, 마우스 오버 트리거, 스크롤

아임웹 무료 코드 생성기

아임웹 애니메이션 코드 생성기 | 애니메이션 무료 생성 툴

💡참고 PC에서 확인 부탁드립니다. (모바일 기기에서는 사용이 어렵습니다.) 가이드 확인하기아임웹 코드 생성기 더보기 미리보기 미리보기 애니메이션 설정 애니메이션 설정 애니메이션 유형 지속시간 (Duration, 초) 지연시간 (Delay, 초) 반복 (Iteration, 횟수) 무한 반복 이징 (Easing) ease ease-in ease-out ease-in-out linear 트리거 설정 트리거 방식 자동 시작 마우스 오버 트리거 스크롤 트리거

아임웹 코드 생성기 가이드

아임웹 버튼 코드 생성기에 SVG 아이콘 넣는 방법

1. 시작하며 아임웹 버튼 코드 생성기에서는 아이콘을 SVG 형태로 삽입할 수 있습니다. 이번 가이드에서는 SVG 아이콘을 무료로 내려받고, 아임웹 버튼 코드 생성기에서 SVG 아이콘을 적용한 후 스타일을 변경하는 방법을 소개해 드리겠습니다. 2. SVG 아이콘 무료 다운로드 및 코드 확인 2-1. Google Fonts Material Symbols and Icons - Google FontsMaterial Symbols

아임웹 코드 생성기 가이드

아임웹 버튼 코드 생성기 가이드

1. 시작하며 아임웹 버튼 코드 생성기는 아임웹 비주얼 섹션, 텍스트 위젯, 코드 위젯 등에서 사용할 수 있는 버튼을 손쉽게 구현할 수 있도록 도와주는 도구입니다. 홈페이지를 제작할 때, 버튼은 방문자와의 상호작용을 극대화하고, 중요한 액션을 유도하는 필수 요소입니다. 특히, 버튼을 통해 프로모션, 견적 요청 등 다양한 기능을 구현할 수 있으며, 사용자가 클릭하기

아임웹 버튼

아임웹 버튼 코드 생성기 | 맞춤형 버튼 무료 생성 툴

💡참고 PC에서 확인 부탁드립니다. (모바일 기기에서는 사용이 어렵습니다.) 가이드 확인하기아임웹 코드 생성기 더보기 미리보기 버튼 설정 다중 버튼 설정 버튼 개수 버튼 위치 좌측 중앙 우측 버튼 배치 방향 가로 세로 버튼 사이 간격 (px) 버튼 스타일링 버튼 텍스트 배경색 100% 테두리 색상 100% 호버 배경색 100% 호버 테두리색 100%

아임웹 코드 모음

아임웹 말풍선 만들기 (코드)

1. 시작하며 웹사이트에서 말풍선은 시각적 강조 요소로, 중요한 메시지를 전달하거나 대화 형식을 연출할 때 효과적입니다. 아임웹에서는 코드 위젯을 활용해 다양한 형태의 말풍선을 손쉽게 구현할 수 있습니다. 이번 글에서는 3가지 말풍선 사례를 통해 말풍선 구현 방법을 소개해 드리겠습니다. * CASE 1: 꼬리가 하단 중앙에 위치한 말풍선 * CASE 2: 꼬리가 하단 우측에 위치한

아임웹 코드 생성기 가이드

아임웹 카드 코드 생성기 가이드

1. 시작하며 아임웹 카드 코드 생성기는 아임웹 텍스트 위젯과 코드 위젯을 사용하여 손쉽게 카드 디자인을 구현할 수 있도록 도와주는 도구입니다. 생성기를 활용하면, 이미지와 텍스트가 포함된 세로 또는 가로형 레이아웃의 카드 디자인을 자동으로 생성할 수 있으며, 원하는 대로 레이아웃, 간격, 글꼴 등 다양한 옵션을 커스터마이징할 수 있습니다. 아래는 아임웹 카드 코드

아임웹 무료 코드 생성기

아임웹 카드 코드 생성기 | 맞춤형 카드 무료 제작 툴

💡참고 PC에서 확인 부탁드립니다. (모바일 기기에서는 사용이 어렵습니다.) 가이드 확인하기아임웹 코드 생성기 더보기 미리보기 카드 설정 이미지-텍스트 순서 바꾸기 레이아웃 방향 세로 가로 카드 높이 px em rem 이미지 너비 % 이미지-텍스트 간격 px rem 이미지 높이 px em rem 이미지 모서리 둥글기 좌상단 우상단 좌하단 우하단 텍스트 설정 텍스트 내용

아임웹 칼럼

아임웹 이미지 마우스 오버 시 스티커 표시하기

1. 시작하며 웹사이트에서 시각적 인터랙션은 사용자의 관심을 끌고 참여도를 높이는 중요한 요소입니다. 아임웹의 ‘Grab it’ 템플릿은 레트로 감성과 트렌디함을 잘 보여주며, 특히 상품 이미지에 마우스 오버 시 스티커가 표시되는 효과가 인상 깊었습니다. 이번 글에서는 마우스 오버 시 이미지 위에 스티커 효과를 구현하는 방법을 소개해 드리겠습니다. 간단한 설정만으로도 상품 홍보 효과와