실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 마케팅 꿀팁

카톡에 우리 회사 링크 보낼 때 뜨는 '회색 빈 박스' 없애는 필수 세팅

새로 단장한 우리 회사 홈페이지 주소를 지인이나 고객에게 카카오톡으로 공유해 보신 적 있으신가요?
혹시 매력적인 사진 대신 텅 빈 '회색 박스'가 뜨거나, 알 수 없는 영어 코드들이 제목으로 뜨고 있지는 않나요? 만약 그렇다면, 여러분은 지금 엄청난 양의 무료 홍보 트래픽(입소문)을 허공에 날리고 있는 것입니다.

💡 미리보기 카드(오픈그래프)가 클릭률을 지배합니다.

사람들은 텍스트만 덜렁 있는 URL 링크를 누르는 것을 꺼립니다 (스팸이나 해킹을 의심하기도 합니다). 사이트의 매력을 한눈에 보여주는 '오픈그래프(Open Graph, OG) 태그'가 세팅된 링크는 일반 링크보다 클릭률(CTR)이 최소 3배 이상 높습니다.

1. 마케터라면 반드시 챙겨야 할 3대 OG 태그

개발자에게 우리 사이트의 HTML 헤더(<head>) 영역에 아래 3가지 마케팅 태그가 완벽하게 세팅되어 있는지 꼭 확인을 요청하십시오. 이 3가지만 잘 들어가 있어도 페이스북, 카카오톡, 슬랙 어디서든 최고의 간판 역할을 합니다.

<!-- 웹사이트 <head> 안에 들어가는 마케팅 필수 코드 -->

<!-- 1. 썸네일 제목: 고객의 클릭을 유도하는 후킹(Hooking) 문구 -->
<meta property="og:title" content="나눔웹 | 매출을 200% 올려주는 하이엔드 웹사이트 제작">

<!-- 2. 썸네일 설명: 서비스의 핵심 가치를 요약한 1~2줄 -->
<meta property="og:description" content="단순한 디자인을 넘어 비즈니스 그로스(Growth)를 고민합니다. 지금 무료 컨설팅을 받아보세요.">

<!-- 3. 썸네일 이미지: 가장 중요한 시각적 간판 (가로 1200px, 세로 630px 권장) -->
<meta property="og:image" content="https://nanumweb.com/images/og_banner.jpg">

2. 썸네일 이미지 최적화 황금 비율 (1200 x 630)

아무 사진이나 넣으면 카카오톡에서 이미지가 위아래로 흉하게 잘려 나갑니다. 가로 1200px, 세로 630px 해상도로 이미지를 제작하세요. 이 비율이 카카오톡, 페이스북, 링크드인 등 전 세계 주요 플랫폼이 공통으로 권장하는 가장 완벽한 황금 비율입니다.

"공유되는 찰나의 순간이 마케팅의 성패를 가릅니다."

나눔웹은 사이트를 제작할 때 겉으로 보이는 디자인뿐만 아니라,
SNS상에서 어떻게 바이럴(Viral)되는지까지 치밀하게 계산하여 마케팅 최적화를 기본으로 탑재합니다.


List of Articles
번호 분류 제목 글쓴이
29 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
28 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
27 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
26 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
25 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
24 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
23 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
22 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
21 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
20 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
19 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
18 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
17 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
16 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
15 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
14 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
13 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
12 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
11 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
10 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 Next
/ 2
rhwlsghkcocndgus XE2.1.31 STAGE1.5.4