2026 삼성디자인멤버십 MEP 전시 〈every else〉
삼성디자인멤버십 2026 MEP Online Exhibition <every else> 웹사이트와 초대장
Overview
삼성디자인멤버십(SDM)은 삼성전자가 매년 디자인 전공자를 선발해 1년간 운영하는 멤버십 프로그램이며, MEP(Membership Emergence Project)는 그 결과물을 선보이는 전시입니다. 2026 MEP 〈every else〉의 온라인 전시 웹사이트와 초대장 페이지를 웹 개발로 참여하였습니다.
이번 전시에서는 디자인팀이 모션과 인터랙션을 바이브코딩으로 직접 구현해 전달했습니다. 전달받은 결과물은 동작은 하지만 범위와 감도가 의도와 정확히 맞지 않았기 때문에, 이를 뜯어보고 실제 의도에 맞는 구조로 다시 만드는 과정을 거쳤습니다.
Tilt
기기를 기울여 보는 초대장
초대장은 전시 안내를 담은 별도 페이지입니다. 배경은 이미지나 CSS 그라디언트가 아니라 Three.js로 그린 파티클 장면으로, 캡슐 형태의 파티클 300여 개가 서로 겹치며 색이 번지도록 만들었습니다.
기울기는 DeviceOrientationEvent의 beta와 gamma를 상하·좌우 입력으로 받습니다. 이 값을 화면 요소의 이동이 아니라 카메라의 회전에 연결했습니다. 카메라가 원점을 계속 바라보면서 공전하기 때문에, 기울일수록 같은 장면을 다른 각도에서 들여다보는 느낌이 납니다.
사람마다 기기를 드는 각도가 다릅니다. 그래서 권한을 허용한 직후의 자세를 기준점으로 잡고, 이후에는 그 차이만 사용했습니다. 화면을 가로로 돌리면 기준점을 다시 잡고 축의 역할도 바꿉니다. 기기마다 프레임 레이트가 달라도 같은 속도로 따라오도록 보간했습니다.
Gentle gaze for every else - 2026 MEP Samsung Design Membership Exhibition
https://invite.everyelse.comPermission
권한을 요청하기 전에 설명하기
iOS 13부터 DeviceOrientationEvent는 사용자 제스처 없이 권한을 요청할 수 없습니다. 버튼이 하나 필요한데, 그 버튼을 그냥 "허용"으로 두면 사용자는 왜 동작 센서를 요구하는지 모른 채 시스템 팝업을 마주하게 됩니다.
그래서 권한 요청 전에 안내 화면을 먼저 뒀습니다. 휴대폰 아이콘이 기울어지는 모션과 함께 "기기를 기울여, every else의 시선을 경험해보세요"를 보여주고, 활성화하기를 누르면 그때 시스템 팝업이 뜹니다. 허용 후에는 "이제 여러분의 기기를 기울여보세요"로 한 번 더 안내한 뒤 초대장으로 들어갑니다.
권한 요청 절차가 없는 안드로이드 브라우저에서는 바로 센서를 활성화하고, 센서가 없는 데스크톱에서는 마우스 위치를 같은 범위로 변환해 동일하게 동작하도록 했습니다. 모바일 판별은 화면 폭만 보지 않고 UA와 터치 지원, 포인터 종류를 함께 확인합니다.
Tuning
감도를 넘기는 대신 조절 도구를 넘기기
카메라가 얼마나 기울어야 하는지, 얼마나 빠르게 따라와야 하는지, 파티클이 몇 개여야 하는지는 말로 주고받기 어려운 값입니다. "조금만 더 부드럽게"라는 피드백을 숫자로 옮기는 과정에서 왕복이 계속 생깁니다.
조절 패널을 만들어 디자이너에게 전달했습니다. 카메라 회전량과 따라오는 속도, 파티클 개수와 크기, 색이 번지는 정도, 빠르게 흔들었을 때의 반응까지 19개 값을 브라우저에서 직접 만질 수 있게 했습니다. 웹과 모바일에서 성능에 무리가 가지 않는 범위를 상한과 하한으로 먼저 잡아두고 넘겼습니다.
디자이너가 값을 맞춘 뒤 복사 버튼을 누르면 현재 상태가 JSON으로 나옵니다. 그 JSON을 받아 설정 파일에 반영하는 방식으로 작업했습니다. 데스크톱과 모바일의 기본값을 따로 두고 있어서, 같은 감각이 두 환경에서 다르게 필요한 경우에도 대응할 수 있었습니다.
Playback
자동재생이 막히는 환경 대응
인트로와 페이지 전환에 영상이 필요했습니다. 3D 느낌이 강한 블러와 후처리 효과가 들어가 있어 SVG나 CSS 애니메이션으로는 대체할 수 없었습니다. 문제는 저전력 모드처럼 영상 자동재생이 막히는 환경이 있다는 점이었습니다.
브라우저에는 저전력 모드를 직접 확인하는 API가 없습니다. 그래서 상태를 추측하는 대신 작은 인라인 영상을 이용해 자동재생 가능 여부를 직접 검사했습니다. play()의 성공 여부뿐 아니라 실제 paused 상태까지 확인했습니다.
async function detectAutoplaySupport() {
const video = document.createElement('video')
video.src = PROBE_VIDEO
video.muted = true
video.playsInline = true
video.loop = true
try {
await video.play()
// Promise가 resolve돼도 실제 재생이 시작되지 않는 환경 대응
await new Promise((resolve) => setTimeout(resolve, 300))
return !video.paused
} catch {
return false
}
}검사는 세션당 한 번만 수행하고 결과를 공유합니다.
const autoplay = useAutoplaySupport()
return autoplay === 'blocked'
? <img src={transitionGif} alt="" />
: <video src={transitionMp4} autoPlay muted playsInline />자동재생이 막힌 환경에서는 오프닝 영상에 썸네일과 탭 재생 버튼을 두고, 페이지 전환 모션은 GIF로 교체했습니다. GIF는 같은 모션 기준 MP4보다 약 7배 큽니다. About 전환은 592KB가 4.0MB가 됩니다. 정상 환경에서는 MP4를 유지하고, 재생이 불가능한 환경에서만 GIF로 내려갑니다.
GIF는 오래된 방식이라 처음에는 피하려 했습니다. 다만 이 영상들은 브랜딩을 위한 짧은 전환일 뿐 오래 응시할 화면이 아니었습니다. 엣지 케이스에서 아예 재생되지 않는 것보다, 화질이 조금 떨어져도 동작하고 의도한 느낌이 전달되는 쪽이 낫다고 판단했습니다.
Components
상세페이지를 조립하는 블록
9개 팀의 프로젝트 상세페이지를 전시 직전에 전달받아야 하는 일정이었습니다. 한국어와 영어 양쪽이 필요했고, 팀마다 콘텐츠가 다릅니다. 팀별로 디자인을 따로 받아 각각 퍼블리싱하면 일정 안에 끝나지 않을 상황이었습니다.
9개 프로젝트의 콘텐츠는 서로 달랐지만 레이아웃의 문법은 반복되고 있었습니다. 이미지, 영상, 섹션 구분, 제목과 본문의 배치, 갤러리, 크레딧. 이를 14종의 블록으로 분해하고, 각 블록을 Figma 컴포넌트와 실제 컴포넌트로 동시에 만들었습니다.
디자이너들은 그 Figma 블록 안에서 상세페이지를 구성했습니다. 저희는 같은 블록을 반응형과 테스트까지 끝내두고, 전달받은 뒤에는 Dev Mode에서 어떤 블록인지 확인하고 순서대로 배치한 다음 텍스트와 이미지, 영상 링크만 채웠습니다. 사실상 CMS에 글을 쓰듯 퍼블리싱했습니다.
모든 요구가 블록으로 해결되지는 않았습니다. 무음 배경 영상과 오디오가 있는 영상은 제어 방식이 달라야 했고, 프로젝트마다 비율이나 재진입 시 재생 여부도 달랐습니다. 이때 페이지에 예외를 추가하는 대신, 반복될 가능성이 있는 차이는 블록의 옵션으로 올리고 특정 프로젝트에만 필요한 배치는 별도 블록으로 남겼습니다. 공용 블록이 지나치게 복잡해지는 것을 막기 위해서입니다.
Outcome
전시는 2026년 8월 11일부터 15일까지 삼성전자 서울 R&D 캠퍼스에서 열렸고, 온라인 전시와 초대장도 일정에 맞춰 공개됐습니다.
9개 프로젝트의 한국어와 영어 상세페이지를 모두 완성했고, QA에서도 Figma에서 본 디자인과 다르게 나온 부분없이 순조롭게 진행되었습니다.
Gentle gaze for every else - 2026 MEP Samsung Design Membership Exhibition
https://www.everyelse.com/
