소낙눈 0

소개 #0 : 시작하기

트게더 게시판 내에서 사용되는 마우스 커서를 변경하는 방법을 소개하겠습니다.
해당 가이드에서는 커서의 상태 구분 없이 동일한 모양으로 커서를 변경(=범용 커서를 설정)하는 방법에 대해서 다룹니다.

정보 #1 : 커서 가이드라인

커서는 상호작용을 위한 요소이므로 다른 요소보다 조금 신경 써야 합니다.

커서가 페이지의 어떠한 요소 상에 있더라도 잘 보일 수 있도록 디자인하는 것이 좋습니다.

#1-1 : 모양 가이드

화살표 모양 커서(키워드명 pointer)를 기준으로 실제 클릭 지점은 좌측 상단(촉의 끝 부분)이며 화살표 역시 살짝 틀어져 있습니다.

이러한 관습을 무시하고 일반적인 화살표나 삼각형 그리듯 생성할 경우 사용에 어색함을 느낄 수 있습니다.

물론 이러한 규칙이 적용되지 않는 커서 역시 존재하므로 확인 후 사용하시기 바랍니다.

#1-2 : 색상 가이드

커서는 어떠한 요소 위에서도 명확하게 구분될 수 있어야 합니다.

가시성을 고려해 너무 눈이 아픈 색상을 사용하거나 대비 정도가 현저하게 떨어지는 색상은 사용하지 않는 것이 좋습니다.

제작 #2 : 커서 생성하기

커서로 사용할 이미지를 생성하는 과정입니다.

후술할 커서의 X좌표 및 Y좌표 설정을 위해 제작에 유의해야 합니다.

#2-1 : 아트보드 생성

포토샵 등의 애플리케이션에서 최대 32x32px 사이즈의 아트보드를 생성합니다. (저는 Affinity Designer를 사용했습니다)

#2-2 : 커서 디자인

어떤 요소에서든 사용하기 적합한 가장 기본적인 화살표 모양을 바탕으로 하는 범용 커서를 생성해보겠습니다.

이전에 설명한 내용을 고려하며 생성된 아트보드 안에 자유롭게 커서를 제작하면 됩니다.

(이러한 경우 프리뷰와 달리 실제 이미지의 사이즈가 작기에 캐릭터가 선명하게 나타나지는 않습니다)

이후 해당 아트보드를 이미지로 내보냅니다.

투명한 배경을 사용하는 것이 일반적이므로 .JPEG와 같은 확장자로 내보내면 안 되겠죠.

적용 #3 : 트게더에 적용하기

커서를 생성했다면 이제 CSS를 통해 트게더 게시판에서 사용할 커서를 지정해 봅시다.

#3-1 : 구문 생성하기

범용 커서를 설정하기 위한 CSS 구문은 다음과 같습니다.

해당 구문의 경우 광고 영역(정확히는 광고 위)에서는 동작하지 않으므로 참조하시기 바랍니다.

* {

    cursor: url(···) X좌표 Y좌표, auto !important;

}

#3-2 : 구문 설정하기

#2-2에서 생성한 커서 이미지의 주소를 ···에 삽입합니다.

이후 커서에서 실제 클릭이 되는 지점의 특정 이미지 좌표를 설정합니다.

다음은 예시 구문입니다.

* {

    cursor: url(./cursor.png) 0 0, auto !important;

}

저는 일반적인 화살표 모양의 커서를 제작하였기 때문에 이러한 형태로 구문을 작성했습니다.

#3-3 : 구문 적용하기

완성된 구문을 커스텀 CSS로 적용하면 완성입니다.

순서는 상관 없지만 이러한 전역 설정에 해당하는 CSS는 앞부분에 넣으시는 것을 권장해 드립니다.