나눔웹 꿀팁/자료실 - 홈페이지·쇼핑몰 운영과 웹 제작 실무 노하우 2026-10-23T08:37:42+09:00 https://nanumweb.co.kr/web/board2/atom Rhymix https://nanumweb.co.kr/web/board2/35121 2026-10-22T19:09:54+09:00 2026-10-22T19:09:54+09:00 나눔웹

나눔웹 UI/UX 꿀팁 버튼 클릭 테두리(outline), 지우지 말고 :focus-visible로 정리하는 법 버튼이나 링크를 클릭하면 생기는 파란 테두리(outline)가 거슬려서 outline: none으로 지워 두셨다면, 키보드로 사이트를 쓰는 사람에게는 지금 어디에 있는지 알려 주는 유일한 표시가 사라진 상태입니다. 테두리를 통째로 지우는 대신 :focus-visible을 쓰면 마우스 클릭 때는 깔끔하게, 키보드 이동 때는 또렷하게 보이도록 나눌 수 있...

https://nanumweb.co.kr/web/board2/35109 2026-10-22T09:07:38+09:00 2026-10-22T09:07:38+09:00 나눔웹

나눔웹 퍼블리싱 꿀팁 flex 레이아웃이 모바일에서 옆으로 삐져나올 때, min-width: 0이 필요한 이유 flex로 잡은 카드나 목록이 모바일에서만 화면 밖으로 밀려나고 가로 스크롤이 생긴다면, flex 아이템의 기본값인 min-width: auto를 먼저 의심해 보세요. 긴 URL, 줄바꿈 없는 말줄임 텍스트, 코드 블록이 들어간 자식에 min-width: 0을 주면 대부분 바로 정리됩니다. 💡 width: 100%도 줬는데 왜 줄어들지 않나요? flex 아이템...

https://nanumweb.co.kr/web/board2/35099 2026-10-22T00:46:55+09:00 2026-10-22T00:46:55+09:00 나눔웹

나눔웹 웹 성능 꿀팁 메인 배너 LCP가 느리다면? 첫 화면 이미지는 lazy 대신 fetchpriority로 PageSpeed Insights에서 LCP(최대 콘텐츠 렌더링) 점수가 유독 나쁘다면, 메인 배너 이미지에 loading="lazy"가 붙어 있지 않은지부터 확인해 보세요. 첫 화면에 보이는 이미지는 지연 로딩을 빼고 fetchpriority="high"를 주는 것만으로 체감 속도가 눈에 띄게 달라집니다. 💡 lazy를 붙이면 빨라진다고 하지 않았나요? 지연 로딩(load...

https://nanumweb.co.kr/web/board2/35089 2026-10-22T00:44:29+09:00 2026-10-22T00:44:29+09:00 나눔웹

나눔웹 마케팅 꿀팁 네이버 서치어드바이저 등록 순서, 새 홈페이지가 검색에 안 나올 때 점검할 4가지 새로 만든 홈페이지가 한 달이 지나도 네이버 검색에 안 나온다면, 네이버 서치어드바이저(웹마스터도구)에 사이트를 등록하고 사이트맵을 제출했는지부터 확인해 보세요. 리뉴얼 후 고객사에서 가장 자주 받는 질문인데, 대부분 아래 4단계 중 하나가 빠져 있었습니다. 💡 등록을 안 해도 수집은 된다는데, 꼭 해야 하나요? 네...

https://nanumweb.co.kr/web/board2/34474 2026-03-16T06:21:58+09:00 2026-03-16T06:21:58+09:00 나눔웹

나눔웹 웹 성능 꿀팁 글씨가 안 보이다가 갑자기 뜬다면? '웹 폰트 로딩' 1초 단축하는 마법 인터넷 속도가 조금 느린 환경(지하철, 달리는 차 안)에서 스마트폰으로 웹사이트에 접속했을 때, 사진이나 틀은 다 떴는데 '글씨'만 투명하게 안 보이다가 1~2초 뒤에 팍! 하고 나타나는 현상을 겪어보셨나요? 이 텅 빈 1초의 순간은 고객에게 "이 사이트 로딩이 너무 느리네"라는 깊은 불쾌감을 심어주어 치명적인 이탈(Bounce)을 유발...

https://nanumweb.co.kr/web/board2/34464 2026-03-16T06:20:20+09:00 2026-03-16T06:20:20+09:00 나눔웹

나눔웹 웹 성능 꿀팁 구글 SEO 점수 폭발! 이미지 로딩 속도 3배 높이는 '단 1줄'의 마법 쇼핑몰 상세페이지나 회사소개서를 보면 고화질 이미지가 수십 장씩 들어갑니다. 그런데 고객이 사이트에 접속하자마자, 저 맨 밑에 있어서 보이지도 않는 이미지 50장까지 한꺼번에 다운로드를 받고 있다는 사실을 알고 계셨나요? 이로 인해 사이트 초기 접속 속도는 심각하게 느려지고, 모바일 사용자의 데이터 요금은 낭비되며, 구글 검색...

https://nanumweb.co.kr/web/board2/34463 2026-03-16T06:17:10+09:00 2026-03-16T06:17:10+09:00 나눔웹

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

https://nanumweb.co.kr/web/board2/34462 2026-03-16T06:16:31+09:00 2026-03-16T06:16:31+09:00 나눔웹

나눔웹 마케팅 꿀팁 '제출하기' 버튼은 그만! 클릭률 200% 높이는 마법의 단어 (CTA) 인스타그램과 네이버 광고에 수백만 원을 써서 고객을 홈페이지로 데려왔는데, 정작 문의나 결제로 이어지지 않아 고민이신가요? 그렇다면 지금 당장 홈페이지 맨 아래에 있는 버튼(CTA : Call To Action)에 뭐라고 적혀 있는지 확인해 보십시오. 혹시 '제출하기', '확인', '등록' 이라고 적혀 있지는 않나요? 💡 고객은 '숙제'를 하러 온 것이 ...

https://nanumweb.co.kr/web/board2/34461 2026-03-16T06:15:33+09:00 2026-03-16T06:15:33+09:00 나눔웹

나눔웹 마케팅 꿀팁 어디서 클릭했는지 다 안다? 마케팅 필수품 'UTM 링크' 활용법 인스타그램 광고, 네이버 블로그, 고객에게 보내는 카카오톡 홍보 메시지까지... 여러 곳에서 마케팅을 하고 계신가요? 그렇다면 어떤 곳에서 들어온 고객이 우리 제품을 가장 많이 샀고, 문의를 남겼는지 정확히 알고 계셔야 합니다. 그렇지 않다면 소중한 광고비가 줄줄 새고 있는 것과 같습니다. 💡 일반 홈페이지 주소만 올리면 안 되나요? 네...

https://nanumweb.co.kr/web/board2/34460 2026-03-16T06:13:48+09:00 2026-03-16T06:13:48+09:00 나눔웹

나눔웹 퍼블리싱 꿀팁 촌스러운 '파일 선택' 버튼, 복잡한 꼼수 없이 예쁘게 디자인하기 문의 게시판이나 이력서 제출 폼(Form)을 만들 때, 가장 디자인하기 까다롭고 눈에 거슬리는 요소가 바로 [파일 선택] 버튼입니다. 브라우저가 억지로 집어넣은 투박한 회색 3D 버튼을 숨기기 위해, 과거에는 진짜 입력창을 숨기고 가짜 버튼(Label)을 만들어 덮어씌우는 복잡하고 무거운 꼼수를 썼습니다. 💡 가짜 버튼(꼼수)을 쓰면 안 되는...

https://nanumweb.co.kr/web/board2/34459 2026-03-16T06:13:14+09:00 2026-03-16T06:13:14+09:00 나눔웹

나눔웹 UI/UX 꿀팁 팝업 띄울 때마다 화면이 덜컹! '스크롤바 밀림 현상' 1줄 해결법 쇼핑몰에서 상품 이미지를 클릭해 확대 창(팝업)을 띄우거나 닫을 때, 뒤에 깔린 배경 화면 전체가 오른쪽으로 덜컹거리며 밀렸다가 다시 돌아오는 현상을 겪어보셨나요? 별것 아닌 것 같지만, 이 미세한 흔들림은 웹사이트의 첫인상을 매우 엉성하고 '싼 티 나게' 만드는 치명적인 UX 버그입니다. 💡 팝업을 띄우면 왜 화면이 밀릴까요? 팝업창...

https://nanumweb.co.kr/web/board2/34458 2026-03-16T06:12:48+09:00 2026-03-16T06:12:48+09:00 나눔웹

나눔웹 퍼블리싱 꿀팁 수십 줄의 모바일 반응형 코드, 단 '1줄'로 끝내는 마법 (clamp) PC에서는 예쁘게 1줄로 나오던 제목이 스마트폰으로 보면 화면을 뚫고 나가거나 3줄로 지저분하게 줄바꿈된 경험 있으신가요? 보통 이를 해결하기 위해 태블릿용, 모바일용 미디어 쿼리(@media) 코드를 수십 줄씩 추가하며 글자 크기를 강제로 줄여왔습니다. 하지만 이 방식은 코드를 무겁게 만들고 유지보수를 지옥으로 이끕니다. 💡 화면에 ...

https://nanumweb.co.kr/web/board2/34457 2026-03-16T06:12:32+09:00 2026-03-16T06:12:32+09:00 나눔웹

나눔웹 UI/UX 꿀팁 쇼핑몰 결제 금액이 덜덜 떨린다면? '숫자 폭 고정' 타이포그래피 꿀팁 쇼핑몰에서 상품 갯수를 올리거나 내릴 때 하단의 '총 결제 금액' 텍스트가 좌우로 덜덜 떨리며 밀리는 현상을 본 적 있으신가요? 또는 이벤트 마감 시간을 알려주는 카운트다운 타이머(00:59:12...)의 초침이 줄어들 때마다 전체 박스가 덜컹거려서 불안해 보였던 경험이 있으실 겁니다. 💡 왜 숫자만 유독 덜컹거릴까요? 우리가 쓰는 대부...

https://nanumweb.co.kr/web/board2/34456 2026-03-16T06:11:49+09:00 2026-03-16T06:11:49+09:00 나눔웹

나눔웹 모바일 꿀팁 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 스마트폰에서 열심히 회원가입 폼을 작성하거나 지도를 이리저리 움직이고 있는데, 손가락을 위로 잘못 쓸어내리는 바람에 화면 상단에 '새로고침(동그란 화살표)'이 뜨면서 화면이 초기화된 끔찍한 경험, 다들 있으실 겁니다. 혹은 스크롤이 맨 위나 맨 아래 끝에 닿았을 때 화면이 고무줄처럼 '튕기는(Rubber-banding)' 현상 때문에 사이트가 엉성해 보이...

https://nanumweb.co.kr/web/board2/34455 2026-03-16T06:11:27+09:00 2026-03-16T06:11:27+09:00 나눔웹

나눔웹 모바일 꿀팁 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 모바일 쇼핑몰 화면 맨 아래에 항상 따라다니는 [구매하기] 버튼이나 하단 탭 메뉴를 만들었는데, 아이폰으로 볼 때 화면 맨 밑에 있는 가로로 긴 '검은색 선(홈 바)'과 겹쳐서 글씨가 안 보이거나 터치가 안 되는 현상을 겪어보셨나요? 결제를 누르려다 아이폰 앱이 꺼져버리는 치명적인 이탈을 막기 위해, 최신 스마트폰의 '안전 영역(Safe...