개요
핵심 요약
- medium.hot은 서울을 기반으로 활동하는 그래픽 디자이너 신현성(@medium.hot)의 개인 포트폴리오 사이트다.
- Person 타입 JSON-LD로 이름·직함·활동 분야·SNS 계정을 구조화 데이터에 명시하고 있다.
- 히어로 영역에 procedural 3D 렌더링 기반 불꽃 다섯 개와 SVG goo 필터로 만든 방울 애니메이션을 배치했다.
- 30개 이상의 프로젝트를 이미지·영상 혼합 그리드로 나열하고, 각 카드에 작업 유형과 연도를 한글·영문 병기로 표기한다.
- 배경은 전면 다크 테마이며, 텍스트에 마우스를 올리면 관련 작업 썸네일이 팝업으로 뜨는 인라인 인터랙션이 본문 소개 문단에 적용돼 있다.
medium.hot은 그래픽 디자이너 신현성이 운영하는 개인 포트폴리오 사이트다. 첫 화면은 짙은 배경 위에 작가 소개 문단이 먼저 뜨고, 그 문단 속 Sen3ai·Dandel·Bonnae 같은 클라이언트명 위에 마우스를 올리면 해당 작업 이미지가 말풍선처럼 팝업된다. 문단 아래에는 procedural(절차적) 3D 렌더링으로 만든 불꽃 다섯 개가 줄지어 있고, 그 사이로 보라색 방울이 위로 올라가며 합쳐지고 갈라지는 SVG goo 필터 애니메이션이 흐른다.
그 아래로는 30개 이상의 프로젝트가 3열 그리드로 이어진다. 포스터·브랜딩·오브제·영상 등 작업 유형이 섞여 있고, 각 카드는 이미지 또는 자동 재생 영상 중 하나를 썸네일로 쓴다. 이번 리뷰에서는 개인 포트폴리오 사이트에서 흔치 않은 커스텀 인터랙션 설계와, 다국어·다매체 작업을 하나의 그리드에서 관리하는 방식을 살펴본다.
브랜드 & 메시지
브랜드 화법은 절제돼 있다. 자기소개 문단 자체가 곧 ‘About’ 페이지 역할을 하며, 별도의 소개 페이지로 분리하지 않고 히어로에 전부 녹였다. K-pop 뮤직비디오 VFX 디자인부터 서울 기반 패션 브랜드의 브랜딩·오브제 디자인, 더현대 팝업 아트 디렉션까지 경력을 나열형 문장 하나로 압축한 점이 특징이다.
시각 언어는 다크 배경과 화이트 타이포를 기본으로 하고, 불꽃과 방울처럼 물리 시뮬레이션에 가까운 장식 요소로 개성을 더한다. 코드 주석에는 이 불꽃이 ‘models/build_fire.py’라는 별도 스크립트로 만든 절차적 3D 렌더 결과라고 명시돼 있어, 스톡 이미지가 아니라 직접 제작한 에셋임을 알 수 있다. 개인 디자이너의 포트폴리오가 기술적 실험 공간을 겸하고 있는 셈이다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 히어로 소개 문단의 클라이언트명에 호버 팝업을 달아, 텍스트를 읽는 흐름을 끊지 않으면서도 관련 작업을 바로 확인할 수 있게 했다. 둘째, 헤더 캐릭터의 호버 스프라이트 이미지를 ‘preload’로 미리 받아두는 코드가 적용돼 있어, 첫 호버 시 캐릭터가 잠깐 사라지는 문제를 방지한다.
셋째, 프로젝트 카드에서 영상은 autoplay·muted·loop·playsinline과 함께 preload=“metadata”를 적용해, 그리드 전체를 한 번에 로드하지 않고도 움직이는 미리보기를 제공한다. 넷째, 각 카드의 작업 유형과 연도를 한글·영문으로 병기해, 국내외 방문자 모두가 같은 정보를 읽을 수 있게 했다. 다섯째, 이메일 주소를 Cloudflare의 이메일 난독화 스크립트로 감춰 스팸 수집 봇으로부터 보호하면서도 클릭하면 복사되는 사용성은 유지했다.
IA·SEO 전략
구조화 데이터는 Person 타입 JSON-LD 하나로, 이름과 별칭(신현성, medium.hot), 직함(Graphic Designer), 활동 분야 6개, 인스타그램 링크, 서울 소재지를 명시한다. 개인 포트폴리오에서 Person 스키마를 정확히 채운 사례는 흔치 않은 편이며, 이는 검색엔진이 ‘신현성 그래픽 디자이너’ 같은 인물 검색에서 이 사이트를 엔티티로 인식하는 데 도움이 된다.
다만 프로젝트 목록 페이지 자체에는 각 작업을 설명하는 구조화 데이터나 캡션 텍스트가 많지 않다. 이미지 alt 텍스트는 작업명 위주로 채워져 있지만, 작업 설명이나 사용 기법 같은 본문 텍스트는 개별 프로젝트 페이지로 들어가야 확인할 수 있는 구조다. 목록 페이지에도 대표 프로젝트 몇 개의 짧은 설명을 노출하면, 목록 페이지 자체의 검색 노출 기회가 늘어난다.
성능·접근성
영상 썸네일이 많은 그리드 구조라 초기 로딩 부담이 상대적으로 클 수 있는 구성이지만, preload=“metadata”와 lazy loading 속성을 함께 사용해 실제 전송량을 관리하고 있다. 불꽃과 goo 필터 애니메이션은 SVG 필터와 CSS 애니메이션으로 구현돼 있어, 별도의 무거운 라이브러리 없이도 움직임을 만들어낸다는 점이 인상적이다.
접근성 면에서는 다크 배경 위 텍스트 대비는 대체로 안정적이지만, 반짝이는 이모지 장식 요소와 마우스 오버 팝업이 스크린리더 사용자에게는 어떻게 읽히는지 점검할 필요가 있다. 자동 재생 영상이 많으므로, 모션에 민감한 사용자를 위한 ‘prefers-reduced-motion’ 대응 여부도 함께 확인할 만하다.
자주 묻는 질문
medium.hot은 어떤 사이트인가요?
서울에서 활동하는 그래픽 디자이너 신현성(@medium.hot)의 개인 포트폴리오입니다. 브랜드 아이덴티티, 오브제 디자인, 포스터, 영상 등 다양한 매체의 작업을 한 그리드에서 소개합니다.
개인 포트폴리오 사이트에 인터랙션 요소를 넣으면 어떤 효과가 있나요?
방문자의 체류 시간을 늘리고 작업 스타일을 시각적으로 각인시키는 효과가 있습니다. medium.hot처럼 직접 제작한 절차적 애니메이션을 쓰면 스톡 템플릿과 차별화되는 인상을 줄 수 있습니다.
개인 디자이너 포트폴리오에도 구조화 데이터가 필요한가요?
필요합니다. Person 타입 JSON-LD로 이름, 직함, 활동 분야, SNS 링크를 명시하면 검색엔진이 인물 검색에서 해당 사이트를 정확한 엔티티로 인식하는 데 도움이 됩니다.
포트폴리오 사이트 제작·리뉴얼은 얼마나 걸리나요?
프로젝트 수, 인터랙션 복잡도, 다국어 지원 여부에 따라 범위가 달라져 정확한 기간은 상담을 통해 확인하는 편이 정확합니다.
디지털 파트너 더블루캔버스
크리에이티브 스튜디오나 개인 디자이너의 포트폴리오는 작업물 자체가 실력을 증명하지만, 그 작업물을 보여주는 사이트의 완성도가 첫인상을 먼저 결정한다. 이미지를 그리드에 나열하는 수준을 넘어, 로딩 전략과 인터랙션까지 설계돼 있는 포트폴리오는 그 자체로 제작 역량의 증거가 된다.
The Blue Canvas(더블루캔버스)는 포트폴리오형 홈페이지 제작에서 영상·이미지 혼합 그리드의 로딩 우선순위를 설계하고, 개인·스튜디오 엔티티를 검색엔진이 정확히 인식하도록 구조화 데이터를 함께 구성한다.
마무리와 다음 스텝
medium.hot은 자기소개 문단에 인라인 팝업을 심고, 절차적 3D 불꽃과 goo 필터 애니메이션으로 히어로를 채운 사이트다. 영상 썸네일의 로딩 전략과 이메일 난독화처럼 세부 구현에서도 신경 쓴 흔적이 보인다.
실행 제안은 셋이다. 첫째, 프로젝트 목록 페이지에 대표 작업 몇 개의 짧은 설명 텍스트를 추가해 검색 노출 기회를 넓힌다. 둘째, 자동 재생 애니메이션에 ‘prefers-reduced-motion’ 대응을 점검한다. 셋째, 호버 팝업과 이모지 장식 요소가 스크린리더에서 어떻게 읽히는지 확인한다.
