작업을 보여주는 일은, 셋이 함께 합니다.

“우리 작업 좀 멋지게 보여주세요.” 거의 모든 의뢰가 이 한 문장에서 시작합니다. 그런데 멋지게 보여주려고 큰 이미지를 잔뜩 깔면 사이트가 무거워지고, 무거우면 사람들은 갤러리에 닿기도 전에 떠납니다. 그래서 우리는 갤러리 섹션 하나를 만들 때도 셋이 같이 붙습니다. 보여주는 방식(인터랙션), 펼치는 방식(모션), 그리고 그걸 가볍게 지키는 방식(이미지). 아래에서 그 합작을 직접 만져보세요.

변화를 보여줘야 한다면? 끌어서 비교하세요

리뉴얼, 시공, 보정처럼 ‘전과 후’가 핵심인 작업은 두 사진을 나란히 두는 것보다 한 자리에서 겹쳐 비교하는 게 훨씬 강합니다. 아래 핸들을 좌우로 끌어보세요. 마우스도, 손가락도 됩니다.

// 슬라이더는 핸들을 끌면 ‘AFTER’ 면이 드러납니다. 카드는 클릭·Enter·스페이스로 뒤집힙니다.

상세는 어떻게 보여주나요? 숨겼다가 펼칩니다

작업마다 적용 기술, 기간, 성과처럼 적고 싶은 게 많습니다. 그렇다고 카드 앞면에 다 적으면 갤러리가 정보 더미가 됩니다. 그래서 앞면은 ‘무엇’만, 뒷면에 ‘어떻게’를 둡니다. 위 카드 세 장을 눌러보면 뒷면으로 뒤집힙니다. 중요한 건, 호버만으로 끝내지 않았다는 점입니다 — 키보드와 터치로도 똑같이 뒤집힙니다.

그런데 왜 이미지가 가장 어려울까요?

슬라이더도 플립도 결국 이미지를 보여주기 위한 그릇입니다. 진짜 승부는 그 이미지를 ‘얼마나 가볍게’ 내보내느냐에서 갈립니다. 우리는 갤러리 이미지를 이렇게 다룹니다.

• 포맷 — 같은 화질이면 JPG보다 WebP·AVIF가 훨씬 작습니다. 용량이 절반 이하로 떨어지는 경우가 흔합니다.
• 지연 로딩 — 화면 밖 이미지는 loading="lazy"로 미룹니다. 갤러리가 길어도 첫 화면은 빠르게 뜹니다.
• 치수 고정 — width·height를 지정해 이미지가 늦게 떠도 레이아웃이 튀지 않게(CLS 방지) 합니다.
• 반응형 소스 — srcset으로 화면 크기에 맞는 해상도만 내려보냅니다. 모바일에 4K를 보내지 않습니다.

효과가 검색·AI 노출을 가리지는 않나요?

슬라이더나 플립 안에 들어 있어도, 텍스트가 HTML로 ‘존재’하면 크롤러와 AI가 읽습니다. 문제는 자바스크립트로만 그려서 텍스트가 비어 있을 때입니다. 우리는 갤러리의 캡션·설명·alt를 마크업에 실제로 적습니다. 위 카드의 ‘GEO 풀스택 적용’ 같은 텍스트도 화면에 보이든 안 보이든 HTML 안에 있습니다.

접근성을 빼면, 절반만 만든 겁니다

슬라이더가 마우스로만 움직이고, 카드가 호버로만 뒤집히면, 키보드 사용자와 터치 사용자에게는 ‘없는 기능’입니다. 그래서 우리는 슬라이더에 터치 드래그를 붙이고, 카드에 포커스와 키 입력을 붙이고, prefers-reduced-motion을 켠 사용자에게는 과한 움직임을 줄입니다. 멋과 배려는 한 묶음입니다.

합작 분해 — 누가 무엇을 했나

저는 이 갤러리 한 섹션을 만들 때 ‘누가 어디까지 책임지는지’를 먼저 못 박습니다.

표를 보면 ‘예쁜 사진 모음’ 한 칸에도 네 손이 겹쳐 있다는 게 보일 겁니다.

그리고 저는 이 한 모듈에 들어간 기술을 칩으로 펼쳐 두는 걸 좋아합니다 — 외부 라이브러리 없이 이만큼이 들어갑니다.

이 칩 하나하나가 슬라이더·플립·이미지 세 파트의 합의로 고른 도구입니다.

이 작품에 들어간 기술

이 갤러리 한 섹션에는 세 파트의 노하우가 겹쳐 있습니다. 각 파트가 어떻게 일하는지는 따로 적어 두었습니다.

그래서, 어떤 갤러리가 필요하세요?

변화를 보여줘야 하는지, 정보를 펼쳐야 하는지, 장수가 많은지에 따라 갤러리의 모양은 달라집니다. 정답은 하나가 아닙니다. 다만 어떤 모양이든 ‘가볍고, 모두가 쓸 수 있게’라는 원칙은 같습니다. 당신의 작업에 맞는 갤러리, 같이 설계해 드릴게요.