웹사이트 제작

로그인 주소 찾기부터 글자·사진·메뉴 수정까지, 사고 없이 직접 고치는 순서

관리자 화면, 주소 하나면 열립니다

워드프레스로 만든 홈페이지는 대부분 주소 뒤에 /wp-admin을 붙이면 로그인 화면이 나옵니다. 예를 들어 '우리회사.com/wp-admin'입니다. 같은 화면은 '/wp-login.php'로도 열 수 있습니다.

두 주소가 모두 열리지 않는다면 제작 업체가 보안 플러그인으로 로그인 주소를 바꿔 둔 경우가 많습니다. 이때는 업체나 호스팅 회사에 바뀐 주소를 물어보세요. 찾은 주소는 브라우저 즐겨찾기에 저장해 둡니다.

로그인하면 왼쪽에 세로 메뉴가 보입니다. 한국어로 설정된 사이트라면 알림판, 글, 미디어, 페이지, 댓글, 외모, 플러그인, 사용자, 도구, 설정 순서입니다. 테마나 플러그인이 메뉴를 더하기도 하고, 번역 버전에 따라 이름이 조금 다를 수 있습니다.

이 지도를 저장해 두면 "이건 어디서 고치지?"를 매번 찾지 않아도 됩니다.

비밀번호를 모를 때

로그인 화면 아래 '비밀번호를 잊으셨나요?'를 누르고 아이디나 이메일을 넣으면, 계정에 등록된 이메일로 재설정 링크가 갑니다. 링크를 눌러 새 비밀번호를 정하면 됩니다.

문제는 그 이메일이 내 것이 아닐 때입니다. 퇴사한 직원이나 제작 업체 담당자의 메일로 관리자 계정이 만들어진 경우가 흔합니다. 이럴 때는 업체에 새 관리자 계정을 요청하거나, 호스팅 회사에 계약자 본인임을 확인받은 뒤 계정 복구를 문의하세요.

업체와 연락이 끊겼다면 비밀번호보다 먼저 도메인과 호스팅이 누구 명의로 계약되어 있는지 확인해야 합니다. 둘 다 회사 명의라면 호스팅 회사를 통해 관리자 계정을 되찾을 길이 열립니다. 명의가 업체로 되어 있다면 계정보다 소유권 문제부터 풀어야 합니다.

고치기 전에 지킬 세 가지

백업부터. 호스팅 관리 화면에서 자동 백업이 언제 마지막으로 되었는지 확인하거나, 백업 플러그인으로 한 번 받아 둡니다. 되돌릴 수 있으면 실수가 사고로 번지지 않습니다.

업데이트는 한꺼번에 누르지 않기. 알림판 → 업데이트에 숫자가 떠 있어도 전체 업데이트를 바로 누르지 마세요. 테마나 페이지 빌더처럼 디자인을 맡은 항목은 업데이트 뒤 화면이 깨지는 경우가 있어, 백업 뒤 하나씩 하거나 업체와 일정을 잡는 편이 안전합니다.

업데이트를 미루라는 뜻은 아닙니다. 워드프레스는 2026년 10월 6일에도 보안 수정이 담긴 7.1.3 버전을 냈습니다. 보안 업데이트는 꼭 하되, 순서를 지키자는 뜻입니다.

한 번에 한 가지만. 문구 수정, 사진 교체, 메뉴 변경을 한꺼번에 하면 문제가 생겼을 때 원인을 찾기 어렵습니다.

글자 고치기: 편집 방식부터 확인하세요

같은 워드프레스라도 페이지를 고치는 화면은 사이트마다 다릅니다. 먼저 페이지 메뉴에서 고칠 페이지에 마우스를 올리고 '편집'을 눌러 어떤 화면이 나오는지 봅니다.

블록 편집기. 2018년 워드프레스 5.0부터 기본으로 쓰이는 방식입니다. 문단, 사진, 버튼이 각각 '블록'으로 나뉘어 있어 고칠 블록을 누르고 바로 글자를 바꾸면 됩니다.

클래식 편집기. 워드 프로그램처럼 위에 도구 모음이 한 줄 있고 아래에 큰 글 상자가 있는 예전 방식입니다. 'Classic Editor' 플러그인을 쓰는 사이트에서 보입니다.

페이지 빌더. WPBakery, Elementor 같은 도구로 만든 사이트는 편집 화면에 빌더 전용 버튼이 있고, 화면이 칸(행·열)과 요소로 나뉩니다. 글자 하나도 요소를 열어서 고쳐야 하고, 요소를 잘못 끌면 배치가 흐트러집니다. 이런 사이트는 칸을 옮기지 말고 글자와 사진만 바꾸는 데서 멈추는 편이 좋습니다.

고친 뒤에는 '미리보기'로 PC와 휴대폰 화면을 모두 확인하고 나서 저장합니다.

사진·새 글·메뉴·사이트 이름 바꾸기

사진 교체. 미디어 → 라이브러리에 새 사진을 올리고, 페이지 편집 화면에서 기존 사진을 새 사진으로 바꿉니다. 올릴 때 '대체 텍스트' 칸에 사진 내용을 한 줄로 적어 주세요. 화면 읽기 프로그램과 검색엔진이 이 문장으로 사진을 이해합니다. 카메라 원본은 무거우니 줄여서 올립니다. 사진 용량이 속도에 미치는 영향은 홈페이지 속도 3초의 법칙에서 다뤘습니다.

새 글 올리기. 글 메뉴에서 새 글을 추가해 제목과 본문을 쓰고, 카테고리를 고른 뒤 공개합니다. 바로 올리기 부담스럽다면 임시 저장해 두고 미리보기로 먼저 확인하세요.

메뉴 바꾸기. 대부분의 테마는 외모 → 메뉴에서 항목을 끌어 순서를 바꾸거나 페이지를 추가합니다. '블록 테마'를 쓰는 사이트는 외모 → 편집기에 들어가 내비게이션 부분에서 고칩니다.

사이트 이름과 파비콘. 브라우저 탭에 뜨는 사이트 이름은 설정 → 일반의 '사이트 제목'에서 바꿉니다. 탭 옆 작은 아이콘(파비콘)은 워드프레스 6.5부터 같은 화면의 '사이트 아이콘'에서 바꿀 수 있고, 그 전 버전은 외모 → 사용자 정의의 사이트 아이덴티티에 있습니다. 일부 테마는 자체 옵션 메뉴에서 로고와 함께 관리합니다.

직원 계정은 '편집자', 그리고 2단계 인증

직원에게 홈페이지 수정을 맡길 때 관리자 계정을 함께 쓰거나 '관리자' 역할을 주는 경우가 많습니다. 관리자는 플러그인 설치, 사용자 추가, 사이트 설정까지 모두 바꿀 수 있어서, 계정 하나가 털리면 사이트 전체가 위험해집니다.

워드프레스 기본 역할은 다섯 가지입니다. 편집자는 모든 글과 페이지를 쓰고 고치고 발행할 수 있지만 플러그인, 테마, 설정, 사용자는 건드리지 못합니다. 홈페이지 문구와 소식을 맡은 직원에게 알맞습니다. 자기 글만 쓰면 되는 사람은 글쓴이, 글을 써도 발행은 검토 뒤에 해야 하는 사람은 기여자로 둡니다.

계정은 사용자 메뉴에서 직원 본인 이메일로 새로 만들고 역할을 고릅니다. 퇴사자가 생기면 그날 계정을 지우거나 구독자로 낮추세요.

비밀번호만으로는 부족합니다. 2단계 인증(로그인할 때 휴대폰 앱 코드 등을 한 번 더 확인하는 방식)은 워드프레스에 기본으로 들어 있지 않아 플러그인으로 켭니다. 워드프레스 커뮤니티가 개발하는 'Two Factor' 플러그인은 2026년 10월 기준 10만 곳 이상에서 쓰이며, 인증 앱·이메일 코드·백업 코드를 지원합니다. 설치 뒤 각 사용자가 사용자 → 프로필에서 직접 켭니다. 계정이 이미 털린 것 같다면 홈페이지 해킹당했을 때 24시간 안에 할 일의 순서를 따르세요.

직접 고치는 데 필요한 건 기술보다 순서입니다.

고치기 전후 5단계 안전 체크리스트

이 체크리스트를 저장해 두고, 관리자 화면에 들어갈 때마다 위에서부터 하나씩 확인하세요.

지금 할 수 있는 세 가지

1. 로그인 주소와 계정 이메일 확인
   /wp-admin으로 접속되는지, 관리자 계정 이메일이 회사가 관리하는 주소인지 확인합니다. 아니라면 사용자 → 프로필에서 회사 이메일로 바꿉니다.
2. 계정 목록 정리
   사용자 메뉴에서 퇴사자와 모르는 계정을 찾아 정리하고, 직원 계정은 편집자 역할로 낮춥니다.
3. 2단계 인증 켜기
   백업을 받은 뒤 2단계 인증 플러그인을 설치하고, 관리자 계정부터 켭니다. 업데이트가 쌓여 있다면 이때 하나씩 처리합니다.

참고 자료: WordPress.org 문서 'Roles and Capabilities'(2026.10 확인), WordPress Core Trac #54370 일반 설정에 사이트 아이콘 추가(WordPress 6.5), WordPress.org 뉴스 'WordPress 7.1.3 Maintenance and Security Release'(2026.10.6), WordPress.org 플러그인 디렉터리 'Two Factor'(2026.10 확인), Learn WordPress 기본 설정 강좌

국내 웹 접속 절반 가까이가 모바일 — 1분이면 끝나는 모바일 점검 체크리스트

사장님은 PC로, 고객은 폰으로 봅니다

홈페이지를 만들거나 수정할 때 우리는 대개 사무실 모니터로 확인합니다. 넓은 화면에서는 모든 게 반듯해 보입니다. 하지만 고객이 우리 회사를 처음 만나는 화면은 손바닥만 한 스마트폰인 경우가 많습니다.

웹 통계 서비스 StatCounter에 따르면 2026년 9월 국내 웹 접속의 47.8%가 모바일이었습니다. 돈이 오가는 순간은 더 기웁니다. 국가데이터처의 2026년 6월 온라인쇼핑 동향을 보면 거래액 24.6조 원 중 18.9조 원, 76.9%가 모바일에서 결제됐습니다.

즉 고객은 PC로 둘러보기도 하지만, 결정하고 연락하고 결제하는 순간에는 폰을 들고 있을 가능성이 큽니다. 그 순간 화면이 불편하면 고객은 불평 없이 뒤로 가기를 누릅니다.

구글도 모바일 화면으로 평가합니다

구글은 '모바일 우선 색인(mobile-first indexing)'을 2016년부터 단계적으로 도입했고, 2024년 7월 5일부로 사실상 모든 사이트를 스마트폰용 검색 로봇으로 수집하고 있습니다. 구글이 검색 결과에 반영하는 것은 PC 화면이 아니라 모바일 화면이라는 뜻입니다.

구글은 당시 "모바일 기기로 아예 접근할 수 없는 콘텐츠는 더 이상 색인되지 않는다"고 밝혔습니다. 또 화면 전체를 덮는 팝업은 검색엔진이 내용을 이해하기 어렵게 만들어 검색 성과에 불리할 수 있다고 안내합니다. 모바일 화면은 이제 '보조 화면'이 아니라 검색 순위가 매겨지는 '본 화면'입니다.

고객이 조용히 나가는 6가지 순간

버튼이 작다. 메뉴나 버튼이 촘촘하면 손가락으로 엉뚱한 것을 누르게 됩니다. 구글 크롬의 점검 도구(Lighthouse)는 누르는 영역을 최소 48×48픽셀로 잡도록 권장합니다.

글자가 작다. 두 손가락으로 화면을 벌려야 읽힌다면 PC 화면을 그대로 줄여 보여 주고 있다는 신호입니다.

팝업이 가린다. 들어오자마자 이벤트 팝업이 화면을 덮으면 고객은 닫기 버튼부터 찾아야 합니다. 알림이 꼭 필요하다면 화면 아래쪽 작은 띠 배너가 낫습니다.

옆으로 밀린다. 넓은 표나 이미지가 화면 밖으로 삐져나오면 가로 스크롤이 생기고 화면이 흔들립니다.

사진이 늦다. 원본 사진을 그대로 올리면 모바일 데이터 환경에서 첫 화면이 한참 비어 있습니다.

전화번호가 안 눌린다. 번호가 이미지이거나 그냥 글자라면, 고객은 번호를 외워 다시 입력해야 합니다. 누르면 바로 전화가 걸리게 하는 건 작은 작업이지만 효과는 큽니다.

점검할 때 꼭 지킬 세 가지

내 폰 하나로 끝내지 마세요. 아이폰과 안드로이드, 큰 폰과 작은 폰에서 화면이 다르게 보일 수 있습니다. 직원이나 가족의 폰을 빌려 한 번 더 열어 보세요.

와이파이를 끄고 보세요. 사무실 와이파이에서는 빠르던 사이트도 이동 중 데이터 환경에서는 느릴 수 있습니다. 고객은 대개 이동 중에 봅니다.

처음 온 고객처럼 보세요. 이미 사이트 구조를 아는 사람은 불편을 잘 느끼지 못합니다. "이 회사에 전화하려면?"처럼 목표 하나를 정하고 몇 번 만에 도착하는지 세어 보세요.

고객의 첫인상은 사무실 모니터가 아니라 손바닥 위에서 만들어집니다.

1분 모바일 자가 점검

지금 바로 휴대폰으로 우리 홈페이지를 열고, 해당하는 항목을 눌러 보세요.

이 체크리스트는 저장해 두고, 사이트를 수정하거나 새 팝업·배너를 올릴 때마다 다시 확인해 보세요.

지금 할 수 있는 세 가지

1. 오늘 폰으로 체크리스트를 돌려 보세요
   위 8가지를 확인하고 해당 항목을 메모해 둡니다. 캡처 화면을 함께 남기면 제작 업체에 설명하기도 쉽습니다.
2. 연락 동선부터 고치세요
   전화 버튼, 문의 폼, 카카오톡 상담처럼 매출로 바로 이어지는 부분이 먼저입니다. 첫 화면을 가리는 팝업 정리도 비용이 거의 들지 않습니다.
3. PC 화면을 줄인 사이트라면 개편을 검토하세요
   화면 크기에 맞춰 배치가 바뀌는 '반응형'이 아니라면 부분 수정으로는 한계가 있습니다. 수정 비용과 개편 비용을 나란히 놓고 비교해 보세요.

참고 자료: StatCounter 한국 플랫폼 점유율(2026년 9월), 국가데이터처 '2026년 6월 온라인쇼핑동향'(뉴시스 보도, 2026), Google Search Central 모바일 우선 색인 완료 공지(2024)·Search Engine Land 보도, Google Search Central 팝업·대화상자 가이드, Chrome Lighthouse 탭 영역 가이드, web.dev Core Web Vitals

느린 사이트가 잃는 매출, 그리고 3분이면 끝나는 속도 자가 측정법

'3초의 법칙'은 어디서 나왔을까

"홈페이지는 3초 안에 떠야 한다"는 말은 구글이 2017년에 소개한 자료에서 널리 퍼졌습니다. 당시 구글은 모바일 방문자의 53%가 3초 넘게 걸리는 페이지를 떠난다고 밝혔습니다.

같은 시기 구글 분석에 따르면, 로딩 시간이 1초에서 3초로 늘면 방문자가 바로 나갈 확률이 32% 높아지고, 5초가 되면 90%, 10초가 되면 123%까지 높아졌습니다. 10년 가까이 된 숫자지만, 최근 자료도 같은 방향을 가리킵니다.

최신 데이터도 같은 말을 합니다

웹 성능 기업 Yottaa가 이커머스 사이트 1,300여 곳의 방문 5억 건 이상을 분석한 2025년 보고서를 보면, 4초를 넘긴 페이지의 이탈률은 63%였습니다. 4초 이하 페이지는 45%였습니다. 전환(구매·문의 같은 목표 행동)도 4초를 넘기면 22% 줄었습니다.

반대로 빨라지면 돌아오는 것도 분명합니다. 구글 의뢰로 딜로이트가 2020년 발표한 연구에서는 모바일 속도가 0.1초만 빨라져도 리테일 사이트의 전환율이 8.4%, 고객 1인당 지출이 9.2% 늘었습니다.

구글이 보는 속도 성적표, Core Web Vitals

구글은 '빠르다'를 감으로 판단하지 않습니다. Core Web Vitals(코어 웹 바이탈)라는 세 가지 수치로, 실제 방문자가 느낀 속도와 사용감을 잽니다.

LCP(첫 화면 로딩). 화면에서 가장 큰 이미지나 글 덩어리가 다 보이기까지 걸린 시간입니다. 2.5초 이하면 좋음입니다.

INP(클릭 반응 속도). 버튼이나 메뉴를 눌렀을 때 화면이 반응하기까지의 시간입니다. 200ms(0.2초) 이하면 좋음입니다. 2024년부터 예전 지표(FID)를 대신해 쓰이고 있습니다.

CLS(화면 밀림). 글을 읽는데 뒤늦게 뜬 이미지나 광고 때문에 내용이 아래로 밀려나는 정도입니다. 0.1 이하면 좋음입니다.

세 가지 모두 방문자의 75%가 기준을 충족해야 '통과'로 봅니다. 쉽지 않습니다. HTTP Archive의 2025년 분석에서 모바일 워드프레스 사이트 중 통과한 곳은 45%에 그쳤습니다.

우리 사이트 속도, 3분 만에 재는 법

구글이 무료로 제공하는 PageSpeed Insights를 쓰면 됩니다. 검색창에 'PageSpeed Insights'를 검색해 접속한 뒤 홈페이지 주소를 넣고 '분석'을 누르세요. 결과가 나오면 모바일 탭부터 봅니다. 구글은 검색 순위를 매길 때 모바일 화면을 기준으로 삼기 때문입니다.

위쪽 'Core Web Vitals 평가'는 지난 28일간 실제 방문자 데이터입니다. 방문자가 적은 사이트는 이 부분이 비어 있을 수 있는데, 그럴 땐 아래쪽 성능 점수(실험실 측정)를 참고하면 됩니다. 90점 이상이 초록, 50~89점이 주황, 49점 이하가 빨강입니다.

이 표를 저장해 두고, 사이트를 고치거나 플러그인을 추가할 때마다 다시 측정해 비교해 보세요.

사이트를 느리게 만드는 흔한 원인 4가지

너무 큰 이미지. HTTP Archive 2025년 분석에서 모바일 홈페이지 한 장의 무게는 중간값 약 2.56MB였고, 그중 가장 큰 몫(약 911KB)이 이미지였습니다. 카메라 원본을 그대로 올리면 사진 한 장이 이 전체보다 무거울 수도 있습니다.

쌓여 가는 플러그인. 채팅 위젯, 팝업, 슬라이더, 분석 도구를 하나씩 붙일 때마다 실행할 코드가 늘어납니다. 클릭 반응(INP)이 나빠지는 대표적인 이유입니다.

저렴한 호스팅. 서버가 느리면 이미지를 아무리 줄여도 첫 응답부터 늦습니다. 방문자가 몰리는 시간에만 느려진다면 서버 사양을 의심해 볼 만합니다.

메인 화면 배경 영상. 첫 화면에 큰 영상을 자동 재생하면 LCP가 크게 늦어지기 쉽습니다. 영상이 꼭 필요하다면 압축하고, 모바일에서는 정지 이미지로 바꾸는 방법도 있습니다.

예쁜 사이트보다 먼저, 열리는 사이트여야 합니다.

지금 할 수 있는 세 가지

1. 오늘 한 번 측정하세요
   메인 페이지와 가장 중요한 페이지(상품, 문의) 두 곳을 PageSpeed Insights 모바일 탭으로 측정하고 점수를 적어 둡니다. 이것이 출발점입니다.
2. 가장 빨간 항목 하나부터 고치세요
   결과 아래쪽 '진단' 항목에 무엇이 느린지 나옵니다. 이미지 용량 줄이기와 안 쓰는 플러그인 정리처럼 비용이 적게 드는 것부터 시작하세요.
3. 한 달에 한 번 다시 재세요
   사이트는 쓰는 동안 조금씩 무거워집니다. 배너를 바꾸거나 기능을 더한 뒤에는 꼭 다시 측정해 처음 점수와 비교하세요.

참고 자료: Yottaa 2025 Web Performance Index(2025), Deloitte·Google 'Milliseconds Make Millions'(2020), Google/SOASTA 모바일 페이지 속도 연구(2017), web.dev Web Vitals 기준, Google PageSpeed Insights 문서, HTTP Archive Web Almanac 2025 페이지 무게·CMS 장

Lottie가 바꾼 것 — 가볍고 선명한 홈페이지 애니메이션

홈페이지에 '움직임'을 넣기가 왜 어려웠을까

움직이는 요소는 시선을 붙잡습니다. 서비스 과정을 설명하는 짧은 애니메이션 하나가 긴 문단보다 빨리 이해되기도 합니다. 그래서 많은 회사가 메인 화면에 배경 영상이나 GIF(움짤)를 넣습니다.

문제는 무게입니다. 영상과 GIF는 화면의 모든 점(픽셀)을 프레임마다 저장하기 때문에, 길이가 몇 초만 늘어도 용량이 커집니다. 특히 GIF는 몇 초짜리도 수 MB에 이르기 쉽고, 크게 띄우면 흐릿해집니다. 예쁜 움직임을 넣었는데 사이트가 느려지는 이유가 여기에 있습니다.

Lottie란? 움직임을 '데이터'로 저장한 파일

Lottie(로티)는 애니메이션을 JSON이라는 텍스트 형식으로 저장한 파일입니다. JSON은 프로그램이 주고받는 데이터를 글자로 적어 둔 형식인데, Lottie는 여기에 "이 도형이 0초에 여기 있다가 2초에 저기로 간다" 같은 정보를 담습니다. 브라우저는 이 설명을 읽어 그 자리에서 그림을 그려 냅니다.

2015년 디자인 툴용 플러그인(Bodymovin)에서 출발했고, 2017년 에어비앤비 개발자들이 앱에서 재생하는 라이브러리를 만들며 'Lottie'라는 이름을 붙였습니다. 지금은 웹, iOS, 안드로이드에서 두루 쓰입니다.

LottieFiles가 단순한 도형 하나가 4초간 움직이는 장면으로 실험한 결과, GIF는 142KB, Lottie는 약 1.2KB였습니다. 아주 단순한 장면이라 실제 차이는 디자인마다 다르지만, LottieFiles는 수 MB짜리 GIF가 Lottie로는 수 KB에 그치는 경우가 많다고 설명합니다.

무엇이 다른가 — 용량, 선명도, 수정

용량. 픽셀을 저장하지 않으니 재생 시간이 길어져도 용량이 크게 늘지 않습니다. 압축 포맷인 dotLottie(.lottie)를 쓰면 일반 Lottie JSON보다 흔히 50~80% 더 줄어든다고 LottieFiles는 설명합니다.

선명도. 선과 좌표로 그리기 때문에 스마트폰부터 대형 모니터까지 어떤 크기에서도 깨지지 않습니다. 배경을 완전히 투명하게 만들 수 있어 어떤 색 위에 올려도 테두리가 지저분해지지 않습니다.

수정. 브랜드 색을 바꾸거나 문구를 고칠 때 영상처럼 처음부터 다시 렌더링할 필요가 없습니다. 파일 안의 색상 값이나 텍스트를 바꾸면 되는 경우가 많습니다.

참고로 같은 움직임이라면 GIF보다 동영상이 오히려 가볍습니다. 구글의 웹 개발 가이드(web.dev)는 3.7MB GIF를 MP4로 바꾸면 551KB가 된 예를 소개합니다(2018). '움짤은 가볍다'는 생각은 사실과 다릅니다.

우리 회사 사이트, 어디에 쓰면 좋을까

메인 화면(히어로). 무거운 배경 영상 대신, 서비스를 상징하는 그래픽이 천천히 움직이는 장면을 넣으면 첫 화면이 빨리 뜨면서도 밋밋하지 않습니다.

과정 설명. "상담 → 설계 → 제작 → 오픈" 같은 단계를 순서대로 나타나게 하면, 고객이 글을 다 읽지 않아도 흐름을 이해합니다.

아이콘과 버튼. 체크 표시, 장바구니, 문의 버튼에 짧은 반응 애니메이션을 주면 눌렀다는 느낌이 분명해집니다. 스크롤이나 클릭에 반응하도록 만들 수도 있습니다.

숫자와 도표. 누적 고객 수, 만족도 같은 수치를 막대가 자라나는 모습으로 보여 주면 같은 숫자도 훨씬 강하게 기억됩니다.

만능은 아닙니다 — 쓰기 전에 알아 둘 점

Lottie는 그래픽 전용입니다. 카메라로 찍은 제품·매장·인물 영상은 표현할 수 없으니, 실사가 필요한 자리는 여전히 동영상이 맞습니다. 또 Gmail, Outlook 같은 대부분의 이메일과 일부 메신저에서는 재생되지 않아, 뉴스레터에는 GIF가 현실적입니다.

한 페이지에 애니메이션을 너무 많이 넣으면 기기가 그림을 그리는 부담이 쌓입니다. 화면에 보일 때만 불러오고, 화면 밖으로 나가면 멈추게 설정하는 것이 기본입니다. 그리고 애니메이션 속 글자는 검색엔진이 읽기 어려우니, 핵심 문구는 반드시 일반 텍스트로도 적어 두세요.

움직임은 거들 뿐, 메시지는 텍스트로 남겨야 합니다.

저장 포인트 — 영상 vs GIF vs Lottie 한눈에

홈페이지 리뉴얼이나 상세페이지 제작 전에 이 표를 저장해 두고, 움직이는 요소마다 어떤 포맷이 맞는지 확인해 보세요.

지금 할 수 있는 세 가지

1. 움직이는 요소부터 목록으로 만드세요
   메인 화면 배경 영상, GIF 배너, 움직이는 아이콘 등 우리 사이트에서 움직이는 것을 모두 적어 봅니다. 의외로 오래된 GIF가 여러 개 숨어 있는 경우가 많습니다.
2. '그래픽'인지 '실사'인지 나누세요
   도형, 아이콘, 도표처럼 그린 것이라면 Lottie 후보입니다. 사람·제품·공간을 찍은 것이라면 압축한 동영상(MP4·WebM)으로 두는 편이 맞습니다.
3. 한 곳만 바꾸고 속도를 비교하세요
   가장 무거운 요소 하나를 먼저 바꾼 뒤, 구글 PageSpeed Insights로 전후 점수를 비교해 보세요. 효과를 숫자로 확인하면 다음 결정이 쉬워집니다.

참고 자료: LottieFiles 'What is Lottie' 소개 및 Lottie vs GIF 비교(2026 업데이트), LottieFiles 엔지니어링 블로그 Lottie vs 래스터 애니메이션 테스트(2020), LottieFiles dotLottie 최적화 가이드(2022), LottieFiles 런타임 성능 문서, web.dev 'GIF를 동영상으로 교체하기'(2018)