사이트에 들어갔는데 마우스 포인터가 동그란 원으로 바뀌고, 버튼 위로 가면 그 원이 커지면서 글자가 나타나는 사이트를 보신 적 있으실 겁니다. 해외 에이전시 사이트에서 특히 자주 보입니다.
이걸 만들려면 개발이 필요하다고 생각하시는 분이 많습니다. 프레이머에서는 기능으로 지원합니다. 코드 한 줄 없이 컴포넌트만 만들면 됩니다.
프레이머 전문 에이전시가 알려주는 꿀팁 시리즈입니다. 저희가 실제 프로젝트에서 쓰는 방법을 그대로 공개합니다. 검색해도 한글 자료가 잘 안 나오는 것들 위주로 매주 한 편씩 올립니다.
- •1편. 커스텀 마우스 커서 만들기 (지금 보는 글)
- •2편. 배리언트로 상태 나누기
- •3편. 스크롤을 천천히 따라오게 만들기
- •4편. 웹플로우 스크롤 인터랙션 두 가지
30초 요약
- •프레이머는 커스텀 커서를 정식 기능으로 지원합니다. 플러그인이나 코드가 필요 없습니다.
- •커서로 쓰는 대상은 컴포넌트입니다. 그래서 배리언트를 쓰면 상황마다 모양이 바뀝니다.
- •동작은 두 가지입니다. 기본 커서를 없애는 Replace, 기본 커서에 얹는 Follow.
- •커서는 페이지에 지정하고, 요소마다 다른 배리언트로 바꿉니다.
- •모바일에는 마우스가 없습니다. 데스크톱만 보고 만들면 안 되는 이유입니다.
- •인상이 목적인 사이트에는 좋고, 전환이 목적인 사이트에는 신중해야 합니다.
먼저 알아야 할 구조
프레이머의 커스텀 커서는 세 부분으로 나뉩니다. 이 구조를 이해하면 나머지는 쉽습니다.
- 1.커서가 될 컴포넌트 화면에서 마우스를 따라다닐 물체입니다
- 2.페이지에 지정하는 기본 커서 아무것도 안 올렸을 때 보이는 상태입니다
- 3.요소마다 바꾸는 커서 버튼이나 이미지 위에 올렸을 때 달라지는 상태입니다
여기서 중요한 게 있습니다. 커서로 쓰는 것이 이미지가 아니라 컴포넌트라는 점입니다. 컴포넌트니까 배리언트를 가질 수 있고, 배리언트가 있으니 상태에 따라 모양이 바뀝니다. 그리고 그 전환은 프레이머가 알아서 애니메이션으로 이어줍니다.
커서를 이미지로 생각하면 막히고, 컴포넌트로 생각하면 풀립니다.
배리언트 개념 자체가 아직 익숙하지 않으시다면 이 시리즈 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를 씁니다.
무거워질 수 있습니다
커서는 마우스가 움직일 때마다 위치를 다시 계산합니다. 컴포넌트 안에 그림자를 겹겹이 쌓거나 블러를 넣으면 눈에 띄게 끊깁니다.
커서 컴포넌트는 가볍게 만드세요. 단색 원과 글자 하나 정도가 적당합니다. 이미지나 영상을 커서로 쓰는 건 권하지 않습니다.
성능을 직접 확인하는 방법
느껴지는 것과 측정되는 것은 다릅니다. 넣고 나면 확인하세요.
- 1.발행한 뒤 확인 편집 화면은 원래 무겁습니다. 실제 사이트에서 봐야 합니다
- 2.저사양 기기에서 확인 최신 노트북에서는 웬만하면 부드럽습니다
- 3.요소가 많은 페이지에서 확인 목록 페이지처럼 카드가 많은 곳이 기준입니다
- 4.스크롤하면서 확인 스크롤 효과와 겹칠 때 끊김이 가장 잘 드러납니다
특히 네 번째가 중요합니다. 커서와 스크롤 효과는 둘 다 위치를 계속 계산합니다. 따로 보면 괜찮은데 같이 쓰면 끊기는 일이 흔합니다. 스크롤 효과 쪽 부하를 줄이는 방법은 이 시리즈 3편에 정리했습니다.
사이트 전반의 속도 점검 기준은 Lighthouse 세팅 글에서 따로 다뤘습니다.
접근성 체크리스트
커스텀 커서는 접근성에서 손해를 보기 쉬운 기능입니다. 넣기 전에 다섯 가지만 확인하세요.
- •키보드로도 이동할 수 있는가 탭 키로 버튼을 옮겨 다닐 때 초점 표시가 살아 있어야 합니다
- •입력란에서 기본 커서가 돌아오는가
- •움직임 줄이기 설정을 존중하는가 운영체제 설정을 켠 사용자에게는 효과를 줄이는 편이 좋습니다
- •커서가 내용을 가리지 않는가 커진 상태에서 글자를 덮는 경우가 있습니다
- •대비가 충분한가 흰 배경에 흰 커서를 두면 보이지 않습니다
병원이나 법률사무소처럼 방문자 연령대가 높은 사이트에서는 이 목록을 더 엄격하게 적용합니다. 멋있다는 반응보다 불편하다는 반응이 먼저 오는 업종이 분명히 있습니다.
어디에 쓰고 어디에 쓰지 말아야 할까
저희가 실제로 판단하는 기준입니다.
- •쓰기 좋은 곳 포트폴리오, 브랜드 소개, 전시나 캠페인 페이지처럼 인상이 목적인 사이트
- •조심할 곳 쇼핑몰, 예약 페이지, 상담 폼이 있는 사이트처럼 전환이 목적인 사이트
- •쓰지 말아야 할 곳 정보량이 많은 페이지, 표나 목록이 긴 페이지, 어르신이 주 사용자인 사이트
판단이 애매하면 이렇게 물어보세요. 이 사이트에서 방문자가 해야 하는 일이 무엇인가. 구경하는 것이면 커서를 바꿔도 됩니다. 무언가를 신청하거나 사는 것이면 방해가 되지 않는 선까지만 씁니다.
자주 묻는 질문
커스텀 커서를 쓰면 SEO에 영향이 있나요?
직접적인 영향은 없습니다. 다만 커서 컴포넌트를 무겁게 만들어 페이지 반응이 느려지면 사용자 경험 지표가 나빠질 수 있습니다. 가볍게 만드는 게 핵심입니다.
이미지나 GIF를 커서로 쓸 수 있나요?
컴포넌트 안에 넣으면 표시는 됩니다. 다만 권하지 않습니다. 마우스를 따라 움직일 때마다 다시 그려야 해서 무거워지고, 크기가 크면 뒤에 있는 내용을 가립니다.
모바일에서는 어떻게 처리하나요?
따로 처리할 게 없습니다. 터치 기기에서는 커서가 나타나지 않습니다. 대신 커서로만 보여주던 정보가 모바일에서 사라지지 않는지 확인하셔야 합니다.
페이지마다 다른 커서를 쓸 수 있나요?
가능합니다. 커서는 페이지 단위로 지정하기 때문에 페이지별로 다르게 두면 됩니다. 다만 사이트 안에서 커서가 자주 바뀌면 일관성이 깨져 보입니다.
커서가 화면 밖으로 나가면 어떻게 되나요?
마우스가 브라우저 영역을 벗어나면 커서 컴포넌트도 함께 사라집니다. 별도 처리가 필요 없습니다.
전환이 애니메이션 없이 툭 바뀝니다
배리언트끼리 레이어 이름이나 구조가 다를 때 생깁니다. 이름이 같은 레이어끼리 이어지기 때문에, 네 상태의 레이어 이름을 통일하면 대부분 해결됩니다. 자세한 원인은 배리언트 편에서 다룹니다.
CMS로 만든 목록에도 커서를 다르게 줄 수 있나요?
가능합니다. 반복되는 항목 하나에 지정하면 나머지에도 함께 적용됩니다. 항목마다 다른 커서를 주려면 컴포넌트 속성으로 상태를 넘기는 구조가 필요합니다.
커서 때문에 스크롤이 끊기는 것 같습니다
커서와 스크롤 효과가 겹치면 자주 생깁니다. 커서 컴포넌트에서 그림자와 블러를 먼저 빼보시고, 그래도 남으면 스크롤 효과의 개수를 줄이는 쪽으로 접근하세요.
정리하면
프레이머의 커스텀 커서는 컴포넌트와 배리언트로 만드는 기능입니다. 페이지에 기본 커서를 지정하고, 요소마다 배리언트를 바꾸면 끝입니다. 전환 애니메이션은 자동으로 붙습니다.
다만 넣기 전에 한 번만 물어보세요. 이 사이트는 인상이 목적인가, 전환이 목적인가. 전환이 목적이라면 커서를 바꾸는 것보다 버튼을 크게 만드는 편이 성과에 낫습니다.
다음 편에서는 이 커서를 지탱하는 기능인 배리언트를 다룹니다. 상태를 어떤 기준으로 나눠야 파일이 나중에 무너지지 않는지에 대한 이야기입니다.
인터랙션 예산을 어디에 쓸 것인가
프로젝트에는 인터랙션에 쓸 수 있는 시간이 정해져 있습니다. 저희는 이걸 예산이라고 부릅니다. 커서에 이틀을 쓰면 다른 곳에 쓸 이틀이 사라집니다.
같은 이틀로 할 수 있는 다른 일들을 나열해보면 판단이 쉬워집니다.
- •모바일 화면 다듬기 방문자의 절반 이상이 보는 화면입니다
- •첫 화면 문장 다시 쓰기 이탈률에 가장 크게 작용합니다
- •이미지 최적화 체감 속도가 눈에 띄게 달라집니다
- •폼 단순화 문의 완료율이 바로 움직입니다
커서는 이 목록을 다 끝낸 뒤에 손대는 항목입니다. 순서를 바꾸면 예뻐 보이지만 성과는 그대로인 사이트가 됩니다.
다만 예외가 있습니다. 포트폴리오와 브랜드 사이트에서는 인상 자체가 성과입니다. 이 경우 커서는 장식이 아니라 본론입니다.
발행 전 마지막 점검 여덟 가지
커서를 넣고 발행하기 전에 이 목록을 한 번 훑으시면 사고를 막을 수 있습니다.
- 1.모든 페이지를 돌아봤는가 페이지 단위 설정이라 빠뜨린 곳이 생깁니다
- 2.폼과 입력란에서 확인했는가 글자를 쓸 수 있는 곳인지 알 수 있어야 합니다
- 3.링크 위에서 신호가 남아 있는가 커서 말고 다른 표시가 있어야 합니다
- 4.모바일에서 정보가 사라지지 않는가
- 5.커서가 글자를 가리지 않는가 커진 상태에서 확인합니다
- 6.배경색이 바뀌는 구간에서도 보이는가 흰 배경과 검은 배경 모두
- 7.스크롤하면서 끊기지 않는가
- 8.다른 사람이 써봤는가 만든 사람은 이미 적응되어 있습니다
마지막 항목이 가장 중요합니다. 만든 사람에게는 자연스럽고 처음 보는 사람에게는 이상한 경우가 커서에서 특히 자주 생깁니다.
함께 읽으면 좋은 글
지금 사이트를 어디부터 손봐야 할지 정리해 드립니다. 상담 신청을 남겨주시면 화면을 먼저 보고 말씀드립니다. 범위와 비용은 요금제 페이지에서 확인하실 수 있습니다.
이 글은 EasySpark 허수진 대표의 실무 내용이며, 각 도구의 기능과 화면 구성은 업데이트에 따라 달라질 수 있어 진행 전 공식 문서를 함께 확인하시길 권합니다. 우리 사이트에 맞는 방향이 궁금하시다면 편하게 상담 신청해주세요.
