사이트에 들어갔는데 마우스 포인터가 동그란 원으로 바뀌고, 버튼 위에 올리면 원이 커지면서 글자가 나타나는 경우를 보신 적 있으실 겁니다. 웹사이트의 기본 화살표를 바꾸고 싶은 이유는 대개 브랜드 인상을 높이거나, 특정 요소를 눈에 띄게 하기 위해서입니다.
방법은 세 가지입니다. CSS로 기본 커서 모양만 바꾸는 방법, HTML, CSS, JavaScript로 마우스를 따라다니는 커서를 직접 구현하는 방법, 그리고 Framer에서 코드 없이 컴포넌트로 만드는 방법입니다. 원하는 효과에 맞는 방법을 아래 표에서 먼저 고르고, 해당 섹션만 읽으셔도 됩니다.
30초 요약
- •웹사이트 커서를 바꾸는 방법은 CSS, JavaScript, Framer 세 가지입니다.
- •이미지나 색만 바꾸면 CSS로 충분합니다. 마우스를 따라오거나 Hover 상태에 따라 변하려면 JavaScript나 Framer가 필요합니다.
- •Framer에서는 커서를 컴포넌트로 만들고, 배리언트로 상태를 나눠 요소마다 다르게 지정합니다.
- •모바일에는 마우스가 없으므로, 커서 효과는 데스크톱에서만 동작하도록 나눠야 합니다.
- •인상이 목적인 사이트에는 좋습니다. 전환이 목적인 사이트에서는 기본 커서를 없애지 않는 방식이 안전합니다.
원하는 효과에 맞는 방법 고르기
아래 표가 이 글의 결론입니다. 효과가 단순할수록 쉬운 방법을 고르세요.
| 원하는 효과 | 가장 쉬운 방법 | 구현 난이도 |
|---|---|---|
| 화살표 모양이나 색만 바꾸기 | CSS cursor 속성 | 낮음 |
| 마우스를 따라다니는 원 | JavaScript | 중간 |
| Hover 시 커서가 커지고 글자가 나타남 | JavaScript 또는 Framer | 중간 |
| 상태마다 다른 모양과 부드러운 전환 | Framer 컴포넌트와 배리언트 | Framer 사이트라면 낮음 |
| 직접 개발하는 React, Next.js 사이트 | JavaScript 컴포넌트 | 개발 필요 |
1. CSS로 기본 커서 모양만 바꾸기
CSS의 cursor 속성으로 포인터 모양을 바꿀 수 있습니다. pointer, grab, crosshair, not-allowed처럼 브라우저가 기본으로 제공하는 모양이 있고, 작은 이미지 파일을 지정해 직접 만든 커서를 쓸 수도 있습니다.
이 방법은 브랜드 색을 맞추거나 링크 위에서 손가락 모양을 유지하는 정도에 알맞습니다. 이미지 커서는 크기에 제한이 있어서 작은 아이콘이 적당합니다. 원하는 효과가 여기까지라면 가장 짧은 해법이므로 여기서 멈추셔도 됩니다.
한 가지 기억하실 점이 있습니다. CSS만으로는 마우스를 따라다니는 움직임이나 상태에 따른 확대 효과를 만들 수 없습니다. 그 기능이 필요하다면 다음 섹션으로 넘어가세요.
2. JavaScript로 마우스를 따라다니는 커서 만들기
원이 마우스를 따라다니는 효과는 원리가 단순합니다. 마우스가 움직일 때마다 좌표를 읽고, 원의 위치를 그 좌표로 옮기면 됩니다. 원이 살짝 늦게 따라오도록 보간을 주면 부드러운 느낌이 납니다. 구현 요소를 나누면 아래와 같습니다.
| 구현 요소 | 하는 일 |
|---|---|
| 마우스 좌표 읽기 | 마우스 움직임을 감지해 현재 위치를 얻습니다 |
| 원 위치 옮기기 | 얻은 좌표로 원의 위치를 계속 갱신합니다 |
| 상태 바꾸기 | 링크나 버튼 위에 올라가면 원을 확대 상태로 바꾸고, 벗어나면 되돌립니다 |
| 모바일 제외하기 | 터치 기기에서는 커서 기능을 끄고 기본 동작을 유지합니다 |
이 원리는 React나 Next.js로 직접 개발하는 웹사이트에서도 똑같이 적용됩니다. 더 복잡한 움직임이 필요하면 GSAP 같은 애니메이션 라이브러리를 더해 정밀하게 다듬을 수 있습니다.
직접 구현할 때 자주 빠뜨리는 부분은 두 가지입니다. 하나는 커서가 화면 밖으로 나갔을 때의 처리이고, 다른 하나는 입력란에서의 동작입니다. 입력란에서는 세로 막대 모양의 기본 커서가 있어야 글자를 쓸 수 있다는 것을 알 수 있으므로, 입력란 위에서는 커스텀 커서를 잠시 꺼 두는 처리가 필요합니다.
이런 인터랙션까지 직접 구현하는 웹사이트가 필요하신가요?
템플릿이나 빌더로는 구현하기 어려운 인터랙션부터 UI/UX, 프론트엔드, 백엔드, 결제까지 직접 개발합니다. 어떤 기능이 필요한지 아직 정리되지 않으셨다면 상담에서 함께 나눠 보세요.
3. Framer에서 코드 없이 만들기
Framer는 커서를 기능으로 지원하므로 JavaScript 없이 만들 수 있습니다. 디자인 작업을 하면서 바로 인터랙션까지 확인할 수 있어서, 실제 프로젝트에서도 이 방법을 가장 많이 씁니다. 아래 구조와 순서를 그대로 따라 하시면 됩니다.
완성하면 이런 구조입니다
아래 순서대로 따라 만드시면 이 구조가 그대로 나옵니다.
먼저 알아야 할 구조
프레이머의 커스텀 커서는 세 부분으로 나뉩니다. 이 구조를 이해하면 나머지는 쉽습니다.
- •커서가 될 컴포넌트 화면에서 마우스를 따라다닐 물체입니다
- •페이지에 지정하는 기본 커서 아무것도 안 올렸을 때 보이는 상태입니다
- •요소마다 바꾸는 커서 버튼이나 이미지 위에 올렸을 때 달라지는 상태입니다
여기서 중요한 게 있습니다. 커서로 쓰는 것이 이미지가 아니라 컴포넌트라는 점입니다. 컴포넌트니까 배리언트를 가질 수 있고, 배리언트가 있으니 상태에 따라 모양이 바뀝니다. 그리고 그 전환은 프레이머가 알아서 애니메이션으로 이어줍니다.
커서를 이미지로 생각하면 막히고, 컴포넌트로 생각하면 풀립니다.
배리언트 개념 자체가 아직 익숙하지 않으시다면 이 시리즈 2편을 먼저 읽고 오시는 편이 빠릅니다. 커서는 배리언트를 응용하는 기능이라, 상태를 나누는 감각이 있으면 이 글의 절반은 이미 아는 내용이 됩니다.
만드는 순서
1. 커서로 쓸 컴포넌트를 만듭니다
캔버스에 원을 하나 그립니다. 크기는 보통 지름 16에서 24 사이가 무난합니다. 이걸 선택하고 컴포넌트로 만듭니다. 맥이라면 옵션과 커맨드를 누른 채 K, 윈도우라면 컨트롤과 알트를 누른 채 K입니다.
컴포넌트 캔버스가 열리면 배리언트를 추가합니다. 최소 두 개를 권합니다. 기본 상태와 확대 상태입니다. 확대 상태는 원을 키우고, 필요하면 안에 글자를 넣습니다. View, Drag, Play 같은 단어가 자주 쓰입니다.
여기서 실무 팁이 하나 있습니다. 원의 중심이 마우스 위치가 됩니다. 그래서 원 안에 글자를 넣을 때는 가운데 정렬이 아니면 커서가 어긋나 보입니다. 오토 레이아웃으로 가운데 정렬을 걸어두시는 게 안전합니다.
2. 페이지에 커서를 지정합니다
페이지를 선택하고 속성 패널에서 커서 항목을 찾습니다. 여기서 만든 컴포넌트를 고르면 됩니다. 이때 동작을 두 가지 중에 고릅니다.
- •Replace 기본 화살표를 없애고 만든 컴포넌트가 그 자리를 대신합니다. 화면이 깔끔해지지만 클릭할 수 있는 곳인지 알기 어려워집니다
- •Follow 기본 화살표는 그대로 두고 컴포넌트가 따라다닙니다. 안전하지만 요소가 두 개라 산만해질 수 있습니다
저희는 브랜드 사이트에는 Replace, 문의나 결제가 있는 사이트에는 Follow를 권합니다. 이유는 단순합니다. 전환이 중요한 사이트에서 커서를 없애면 어디를 눌러야 할지 헷갈리는 순간이 생기고, 그 순간이 이탈로 이어집니다.
3. 요소마다 커서를 바꿉니다
이제 재미있는 부분입니다. 버튼이나 이미지처럼 특정 요소를 선택하고, 커서 속성에서 배리언트를 지정합니다. 마우스가 그 요소 위로 들어가면 커서가 그 배리언트로 바뀝니다.
전환 애니메이션은 따로 만들지 않아도 됩니다. 프레이머가 두 배리언트의 차이를 계산해서 알아서 이어줍니다. 원이 커지는 것도, 글자가 나타나는 것도 자동입니다.
속도가 마음에 안 들면 컴포넌트 안에서 트랜지션을 조정하시면 됩니다. 커서는 손보다 빨라야 하기 때문에 0.2초 안쪽이 자연스럽습니다. 0.5초를 넘기면 커서가 느리게 따라오는 것처럼 보여서 오히려 답답합니다.
실전 예제, 배리언트 네 개짜리 커서 하나
저희가 브랜드 사이트에서 실제로 쓰는 구성입니다. 이 하나면 사이트 전체를 덮습니다. 순서대로 따라 만드시면 됩니다.
배리언트 구성
- •default 지름 12의 단색 원. 아무 데도 안 올렸을 때
- •link 지름 48로 커지고 안쪽에 화살표. 링크와 버튼 위
- •media 지름 72에 View 글자. 이미지와 영상 위
- •drag 좌우 화살표 두 개. 슬라이더 위
만드는 순서
- 1.원 하나를 그리고 컴포넌트로 만듭니다. 이름은 Cursor로 둡니다
- 2.컴포넌트 안에서 배리언트를 세 개 더 추가하고 위 이름을 붙입니다
- 3.각 배리언트에서 크기와 안쪽 요소만 바꿉니다. 바깥 프레임 이름은 건드리지 않습니다
- 4.페이지를 선택하고 커서에 이 컴포넌트를 지정한 뒤 default를 기본으로 둡니다
- 5.버튼을 선택해 link, 이미지를 선택해 media, 슬라이더를 선택해 drag로 지정합니다
3번의 단서가 중요합니다. 배리언트끼리 레이어 이름이 다르면 프레이머가 무엇과 무엇을 이어야 할지 몰라 애니메이션 없이 툭 바뀝니다. 바깥 프레임과 안쪽 요소의 이름을 네 상태에서 똑같이 유지하세요.
이 규칙은 커서만의 이야기가 아닙니다. 배리언트 전환이 끊기는 대부분의 원인이라 2편에서 다시 다룹니다.
자주 쓰는 커서 패턴 다섯 가지
1. 점 하나
가장 안전합니다. 작은 원이 마우스를 따라다니고 링크 위에서만 살짝 커집니다. 브랜드 인상은 주면서 사용성은 거의 해치지 않습니다. 처음 넣으신다면 여기서 시작하세요.
2. 원 안의 글자
이미지 위에서 View, 영상 위에서 Play가 뜨는 방식입니다. 포트폴리오 사이트에서 가장 많이 씁니다. 글자가 들어가면 커서가 커지므로 뒤 내용을 가리지 않는지 확인해야 합니다.
3. 미리보기 커서
목록에서 항목 위에 올리면 커서 자리에 대표 이미지가 뜨는 방식입니다. 강렬하지만 무겁습니다. 이미지를 미리 불러두지 않으면 처음 한 번은 깜빡입니다. 목록이 길면 권하지 않습니다.
4. 드래그 안내
가로 슬라이더 위에서 좌우 화살표를 보여줍니다. 이건 장식이 아니라 기능입니다. 가로로 넘길 수 있다는 걸 모르는 방문자가 생각보다 많습니다.
5. 자석 효과
버튼 근처에서 커서가 버튼 쪽으로 끌려가는 방식입니다. 인상은 강하지만 클릭 지점이 어긋나 오히려 누르기 어려워지는 경우가 있습니다. 버튼이 크고 개수가 적을 때만 쓰세요.
실무에서 자주 놓치는 네 가지
모바일에는 마우스가 없습니다
가장 많이 하는 실수입니다. 데스크톱에서 열심히 만들고 모바일에서 확인을 안 합니다. 터치 기기에는 커서 자체가 없으니 아무 일도 일어나지 않습니다. 문제는 커서에 의존해서 정보를 담았을 때입니다.
예를 들어 이미지 위에 마우스를 올려야 View라는 글자가 뜨도록 만들었다면, 모바일 사용자는 그게 눌리는 요소인지 알 수 없습니다. 커서로만 전달되는 정보는 만들지 않는 것이 원칙입니다.
클릭할 수 있는지 알 수 없게 됩니다
기본 화살표는 링크 위에서 손가락 모양으로 바뀝니다. 사람들이 20년 넘게 익힌 신호입니다. Replace로 이걸 없애면 그 신호도 같이 사라집니다.
그래서 커서를 바꿀 때는 다른 신호를 반드시 남겨야 합니다. 버튼에 밑줄을 긋거나, 배경색을 바꾸거나, 커서 배리언트 자체를 확실히 다르게 만드는 식입니다.
텍스트 입력란에서 문제가 생깁니다
문의 폼이 있는 사이트라면 꼭 확인하셔야 합니다. 입력란 위에서는 커서가 세로 막대 모양이어야 글자를 쓸 수 있는 곳이라는 걸 압니다. 커서를 전면 교체하면 이 모양도 사라집니다.
입력란에는 커서를 따로 지정하지 않거나 기본값으로 되돌리는 배리언트를 두시는 게 좋습니다. 저희는 폼이 있는 페이지에서는 아예 Follow를 씁니다.
무거워질 수 있습니다
커서는 마우스가 움직일 때마다 위치를 다시 계산합니다. 컴포넌트 안에 그림자를 겹겹이 쌓거나 블러를 넣으면 눈에 띄게 끊깁니다.
커서 컴포넌트는 가볍게 만드세요. 단색 원과 글자 하나 정도가 적당합니다. 이미지나 영상을 커서로 쓰는 건 권하지 않습니다.
스크롤 효과와 겹치면 끊김이 가장 잘 드러납니다. 스크롤 효과 쪽 부하를 줄이는 방법은 이 시리즈 3편에, 사이트 전반의 속도 점검 기준은 Lighthouse 세팅 글에 정리했습니다.
어디에 쓰고 어디에 쓰지 말아야 할까
저희가 실제로 판단하는 기준입니다.
- •쓰기 좋은 곳 포트폴리오, 브랜드 소개, 전시나 캠페인 페이지처럼 인상이 목적인 사이트
- •조심할 곳 쇼핑몰, 예약 페이지, 상담 폼이 있는 사이트처럼 전환이 목적인 사이트
- •쓰지 말아야 할 곳 정보량이 많은 페이지, 표나 목록이 긴 페이지, 어르신이 주 사용자인 사이트
판단이 애매하면 이렇게 물어보세요. 이 사이트에서 방문자가 해야 하는 일이 무엇인가. 구경하는 것이면 커서를 바꿔도 됩니다. 무언가를 신청하거나 사는 것이면 방해가 되지 않는 선까지만 씁니다.
발행 전 체크리스트
성능, 접근성, 최종 점검을 하나로 모았습니다. 넣고 나면 발행 전에 이 표를 한 번 훑으세요.
| 점검 항목 | 확인 방법, 이유 |
|---|---|
| 발행한 뒤 실제 사이트에서 확인 | 편집 화면은 원래 무겁습니다 |
| 저사양 기기에서 확인 | 최신 노트북에서는 웬만하면 부드럽습니다 |
| 카드가 많은 목록 페이지에서 확인 | 요소가 많을 때가 기준입니다 |
| 스크롤하면서 확인 | 스크롤 효과와 겹칠 때 끊김이 가장 잘 드러납니다 |
| 모든 페이지를 돌아봤는가 | 페이지 단위 설정이라 빠뜨린 곳이 생깁니다 |
| 탭 키로 이동해도 초점 표시가 살아있는가 | 키보드로 다니는 사용자를 위한 확인입니다 |
| 입력란에서 기본 커서로 돌아오는가 | 글자를 쓸 수 있는 곳인지 알 수 있어야 합니다 |
| 링크 위에서 커서 말고 다른 신호가 남아있는가 | 밑줄, 배경색 변화 등 |
| 모바일에서 정보가 사라지지 않는가 | 터치 기기에는 커서가 없습니다 |
| 커서가 커진 상태에서 글자를 가리지 않는가 | 확대 배리언트에서 확인하세요 |
| 흰 배경, 검은 배경 모두에서 대비가 충분한가 | 배경색이 바뀌는 구간을 특히 확인하세요 |
| 움직임 줄이기 설정을 존중하는가 | 운영체제 설정을 켠 사용자를 배려합니다 |
| 다른 사람이 직접 써봤는가 | 만든 사람은 이미 적응되어 있습니다 |
병원이나 법률사무소처럼 방문자 연령대가 높은 사이트에서는 이 표를 더 엄격하게 적용합니다. 멋있다는 반응보다 불편하다는 반응이 먼저 오는 업종이 분명히 있습니다. 마지막 항목이 특히 중요합니다. 만든 사람에게는 자연스럽고 처음 보는 사람에게는 이상한 경우가 커서에서 특히 자주 생깁니다.
Framer로 구현하고 싶지만 직접 만들기는 어렵다면?
EasySpark는 Framer 기반으로 UI/UX 설계, 인터랙션, CMS, 코드 컴포넌트까지 구축합니다. 커서 하나를 넣는 것부터 사이트 전체의 움직임까지 범위를 정해 드릴 수 있습니다.
정리하면
웹사이트 커스텀 커서는 방법 하나로 정해지지 않습니다. 화살표 모양만 바꾸면 CSS로 충분하고, 마우스를 따라다니는 움직임이 필요하면 JavaScript를, Framer를 쓴다면 컴포넌트와 배리언트로 만드는 것이 가장 빠릅니다.
넣기 전에 한 번만 물어보세요. 이 사이트는 인상이 목적인가, 전환이 목적인가. 전환이 목적이라면 커서를 바꾸는 것보다 버튼을 더 분명하게 만드는 편이 성과에 낫습니다.
다음 편에서는 이 커서를 지탱하는 기능인 배리언트를 다룹니다. 상태를 어떤 기준으로 나눠야 파일이 나중에 무너지지 않는지에 대한 이야기입니다.
함께 읽으면 좋은 글
지금 사이트를 어디부터 손봐야 할지 정리해 드립니다. 상담 신청을 남겨주시면 화면을 먼저 보고 말씀드립니다. 범위와 비용은 요금제 페이지에서 확인하실 수 있습니다.
이 글은 EasySpark 허수진 대표의 실무 내용이며, 각 도구의 기능과 화면 구성은 업데이트에 따라 달라질 수 있어 진행 전 공식 문서를 함께 확인하시길 권합니다. 우리 사이트에 맞는 방향이 궁금하시다면 편하게 상담 신청해주세요.