프로젝트 이후 UX 추가 개선 - 키보드 네비게이션과 썸네일(meta tag = open graph, twitter)

Dustin Jung·2025년 3월 1일

프로젝트 CLAYN

목록 보기

9/10

키보드 네비게이션이란?

키보드만 사용해서 웹사이트를 탐색할 수 있도록 보장하는 기능
일반적으로 Tab, Enter, Space, Arrow(←↑→↓), ESC 키 등을 사용해서 웹사이트의 요소를 이동하고 조작할 수 있어야 함.
웹 접근성을 높이기 위해, 마우스를 사용하지 못하는 사람들도 키보드만으로 사이트를 문제없이 이용할 수 있도록 보장하는 게 중요함.

키보드 네비게이션 적용의 효과?

키보드만으로 사이트를 원활하게 탐색할 수 있음
시각장애인, 신체적 제한이 있는 사용자들도 접근 가능
웹 접근성 (Lighthouse 점수) 향상

그럼 어떻게 해야 하는가?

키보드로 모든 인터랙션이 가능해야 한다!
Tab, Enter, ESC 키를 활용한 네비게이션 적용
:focus 스타일을 추가해서 초점이 보이도록 설정
tabindex를 활용해 초점 이동을 조절
불필요한 요소는 aria-hidden="true" 적용해서 스크린 리더에서 제외

적용 계획

1. 가독성을 위해 ::focus 속성 활용

- input이나, button에 focus 추가

2. tabindex 활용하여 초점 제어

- 특정 요소를 키보드 탐색이 가능하도록 초점(Tab 이동 순서)을 부여하거나 제외할 수 있음

3. aria-hidden="true"로 불필요한 요소 제외

- 스크린 리더가 읽지 않아야 하는 불필요한 요소들은 aria-hidden="true"를 적용해 탐색에서 제외함

4. Escape 키로 닫기 기능 추가

- 모달 창 같은 요소는 ESC 키를 누르면 닫히도록 구현하는 게 UX적으로 중요

프로젝트 CLAYN에 키보드 네비게이션을 통한 UX 추가 개선을 도입하자!

1. input과 버튼 요소에 focus 활용

기존에 footer 섹션에 이메일 부분에만 focus로 outline을 적용하였는데, button에도 추가함.

이를 통해 구독하기, 바로 보러가기 같은 버튼에 focus가 가 있으면 바로 확인 가능.

그냥 focus는 모든 경우의 focus에 해당하지만,

focus-visible 속성은 키보드로 이동한 focus에만 적용이 됨. 그 차이를 둔 것.

2. tabindex를 실 적용해서 이동 경로를 설계하자! -> 다시 0으로 바꿈

주의사항 tabindex를 주면 안 되는 곳이 있음

<a>, <button>, <input> 같은 원래 포커스 가능한 요소들

각 섹션마다 순서대로 tab으로 유도하고, 중간에 스크롤 리더기에서 무시하면서, 탭으로 인식할 필요가 없는 스크롤 트리거를 위한 요소에는 tabindex= -1 적용,

tabindex0~8 오름차순 설계 -> 0으로 통일

이렇게 유도하는 것이 사용자의 자유로운 탐방을 방해한다는 lighthouse 메세지를 확인하고, tabindex="0"으로 통일

3. aria-hidden="true" 추가하기

이렇게 스크롤 트리거를 위한 요소들에는 aria-hidden="true"를 확실하게 적용시켜 준다.

4. esc키를 누르면 모달창들은 닫히게 만들기

각각 메뉴 모달과 장바구니 모달이 떠 있으면 그 것들을 esc를 통해 닫을 수 있도록 추가.

CLAYN 프로젝트에 썸네일을 도입하자!

썸네일이란?

Open Graph (OG) 이미지

SNS(Facebook, Twitter, LinkedIn 등)에서 링크를 공유할 때 나오는 미리보기 이미지
<meta property="og:image"> 태그로 설정

SEO(Search Engine Optimization) 최적화

Google 검색에서 웹페이지 대표 이미지로 표시됨
<meta name="twitter:image"> 같은 메타 태그를 활용

웹사이트 내부에서 대표 이미지로 사용

블로그 글 리스트, 제품 목록, 포트폴리오 등에서 각 페이지를 대표하는 이미지
예를 들어, CLAYN 프로젝트에서는 제품(도자기) 리스트에서 각 아이템의 썸네일을 보여줄 수도 있음

유튜브, 쇼핑몰 같은 플랫폼에서 미리보기 기능

유튜브 영상의 대표 이미지처럼, 사용자가 클릭하기 전에 내용을 미리 보여주는 역할

더 자세한 설명

Open Graph 태그

property="og:title" → 공유될 때 표시될 제목
property="og:description" → 설명 텍스트 (요약)
property="og:image" → 대표 이미지(썸네일)
property="og:url" → 클릭했을 때 이동할 페이지 URL
property="image:width / og:image:height" → 이미지 크기 명시, 추천 크기: 1200x630px
property="og:type" → 페이지 유형 지정 (website, article 등)

트위터 카드 (Twitter 전용 메타 태그)

name="twitter:card" → 트위터에서 미리보기 카드 스타일 지정
name="summary" → 작은 이미지 + 텍스트
name="summary_large_image" → 큰 이미지(추천)
name="twitter:title" → 트위터에서 표시될 제목
name="twitter:description" → 설명
name="twitter:image" → 대표 이미지
-> 트위터는 og:image를 자동으로 읽지만, Twitter 전용 태그를 넣어주면 더 정확하게 표시함

썸네일 적용

1. open graph PNG,AVIF 로 제작

일러스트로 뚝딱 만들고 PNG 추출 > squoosh로 avif로 손실 압축하여 용량 최대 확보

2. html 내부에 meta태그들 삽입


<script>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, follow"> <!--noindex로 검색엔진 허용 x 그러나 follow로 링크는 인식-->
    <!-- Open Graph (OG) Meta Tags -->
    <meta property="og:title" content="CLAYN - 감성적인 미니멀 도자기 브랜드">
    <meta property="og:description" content="CLAYN은 미니멀 감성의 도자기 브랜드 랜딩 페이지입니다. 자연에서 영감을 받은 컬러와 실용적인 디자인을 통해 특별한 공간을 완성하세요.">
    <meta property="og:image" content="https://gangordie.github.io/CLAYN/public/icons/open-graph.png"> <!-- 절대 경로 사용해야함 -->
    <meta property="og:url" content="https://gangordie.github.io/CLAYN/">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:type" content="website">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="CLAYN - 감성적인 미니멀 도자기 브랜드">
    <meta name="twitter:description" content="CLAYN은 미니멀 감성의 도자기 브랜드 랜딩 페이지입니다. 자연에서 영감을 받은 컬러와 실용적인 디자인을 통해 특별한 공간을 완성하세요.">
    <meta name="twitter:image" content="https://gangordie.github.io/CLAYN/public/icons/open-graph.avif">
    <meta name="twitter:image:alt" content="CLAYN 브랜드 썸네일 - 감성적인 미니멀 도자기 브랜드">
    <title>404 | 도자기가 부서지듯, 이 페이지도 사라졌습니다.</title>
</script>

중요한 점

트위터는 alt 메타 태그 지원, og는 지원 x
이미지는 상대 경로가 아닌 url 절대 경로로 사용할 것
width와 height은 1200 X 630이 추천 사항
트위터는 avif 지원, og는 PNG가 안전함.

결과

요렇게 카톡같은데에 링크 줄 때, 썸네일이 적용됨!!

이로 인해 SNS 공유 할 때의 UX도 개선함.

Dustin Jung

더스틴 정입니다

이전 포스트

25-02-28 lighthouse 검색엔진 최적화 검사 개선

다음 포스트

프로젝트 이후 UX 추가 개선 - 키보드 네비게이션과 썸네일(meta tag = open graph, twitter)

프로젝트 CLAYN

키보드 네비게이션이란?

키보드 네비게이션 적용의 효과?

그럼 어떻게 해야 하는가?

적용 계획

1. 가독성을 위해 ::focus 속성 활용

2. tabindex 활용하여 초점 제어

3. aria-hidden="true"로 불필요한 요소 제외

4. Escape 키로 닫기 기능 추가

프로젝트 CLAYN에 키보드 네비게이션을 통한 UX 추가 개선을 도입하자!

1. input과 버튼 요소에 focus 활용

2. tabindex를 실 적용해서 이동 경로를 설계하자! -> 다시 0으로 바꿈

주의사항 tabindex를 주면 안 되는 곳이 있음

tabindex0~8 오름차순 설계 -> 0으로 통일

3. aria-hidden="true" 추가하기

4. esc키를 누르면 모달창들은 닫히게 만들기

CLAYN 프로젝트에 썸네일을 도입하자!

썸네일이란?

Open Graph (OG) 이미지

SEO(Search Engine Optimization) 최적화

웹사이트 내부에서 대표 이미지로 사용

유튜브, 쇼핑몰 같은 플랫폼에서 미리보기 기능

더 자세한 설명

Open Graph 태그

트위터 카드 (Twitter 전용 메타 태그)

썸네일 적용

1. open graph PNG,AVIF 로 제작

2. html 내부에 meta태그들 삽입

중요한 점

결과

25-02-28 lighthouse 검색엔진 최적화 검사 개선

25-03-17 웹표준에 근거한 추가 수정

0개의 댓글

프로젝트 이후 UX 추가 개선 - 키보드 네비게이션과 썸네일(meta tag = open graph, twitter)

프로젝트 CLAYN

키보드 네비게이션이란?

키보드 네비게이션 적용의 효과?

그럼 어떻게 해야 하는가?

적용 계획

1. 가독성을 위해 ::focus 속성 활용

2. tabindex 활용하여 초점 제어

3. aria-hidden="true"로 불필요한 요소 제외

4. Escape 키로 닫기 기능 추가

프로젝트 CLAYN에 키보드 네비게이션을 통한 UX 추가 개선을 도입하자!

1. input과 버튼 요소에 focus 활용

input type=email인 #newsletter-email은 focus고, button에는 focus-visible을 준 이유?

2. tabindex를 실 적용해서 이동 경로를 설계하자! -> 다시 0으로 바꿈

주의사항 tabindex를 주면 안 되는 곳이 있음

tabindex0~8 오름차순 설계 -> 0으로 통일

3. aria-hidden="true" 추가하기

4. esc키를 누르면 모달창들은 닫히게 만들기

CLAYN 프로젝트에 썸네일을 도입하자!

썸네일이란?

Open Graph (OG) 이미지

SEO(Search Engine Optimization) 최적화

웹사이트 내부에서 대표 이미지로 사용

유튜브, 쇼핑몰 같은 플랫폼에서 미리보기 기능

더 자세한 설명

Open Graph 태그

트위터 카드 (Twitter 전용 메타 태그)

썸네일 적용

1. open graph PNG,AVIF 로 제작

2. html 내부에 meta태그들 삽입

중요한 점

결과

25-02-28 lighthouse 검색엔진 최적화 검사 개선

25-03-17 웹표준에 근거한 추가 수정

0개의 댓글