개요
핵심 요약
- 서울에서 활동하는 그래픽 디자이너 김승혁의 개인 포트폴리오 사이트다.
- 첫 화면은 중앙의 작은 검은 카드에서 선이 뻗어 PRESENTATION·AI·GRAPHIC DESIGN·PLANNING·STRATEGY·PROPOSAL·DIRECTION 등의 역량 라벨로 이어지는 방사형 도식이다.
- 상단 메뉴는 ABOUT ME·PORTFOLIO 두 개, 우측에 CONTACT과 KO/EN 전환, SOUND ON/OFF 토글이 배치된다.
- 소개 문구는 ‘Graphic Designer — Seoul’이며, 메타 설명에는 B2B 제안서·프레젠테이션·3D 제품 콘셉트가 전문 분야로 명시된다.
- Person 구조화 데이터와 canonical·Open Graph는 갖췄으나, 화면 전체가 스크립트로 렌더링돼 문서 텍스트는 34자에 그친다.
KIM SEUNGHYUK PORTFOLIO는 서울에서 활동하는 그래픽 디자이너의 개인 포트폴리오 사이트다. 첫 화면에 작업 이미지가 없다. 옅은 회색 배경 한가운데에 작은 검은 카드가 놓이고, 그 카드에서 가는 선이 사방으로 뻗어 나간다. 선 끝에는 PRESENTATION, AI, GRAPHIC DESIGN, PLANNING, STRATEGY, PROPOSAL, DIRECTION 같은 단어가 붙는다. 자신이 다루는 영역을 목록이 아니라 관계도로 보여주는 방식이다.
상단에는 ABOUT ME와 PORTFOLIO 두 개의 메뉴, 우측에는 CONTACT과 언어 전환, 그리고 SOUND 토글이 있다. 하단 왼쪽에 ‘Graphic Designer — Seoul’, 가운데에 다음 구획으로 유도하는 안내가 작게 놓인다. 화면에 있는 요소가 이게 전부다. 이번 리뷰에서는 이 극단적인 절제가 포트폴리오라는 목적에 어떻게 작용하는지, 그리고 검색에서는 어떤 대가를 치르고 있는지를 살펴본다.
브랜드 & 메시지
이 사이트의 브랜드는 ‘정리하는 사람’이다. 메타 설명이 밝히는 전문 분야가 B2B 제안서와 프레젠테이션, 3D 제품 콘셉트인데, 이는 모두 복잡한 내용을 시각적으로 구조화하는 일이다. 첫 화면의 방사형 다이어그램은 그 능력을 자기 사이트에서 직접 시연하는 셈이다. ‘저는 정보를 정리해 도식으로 만드는 사람입니다’라고 쓰는 대신, 그 도식 자체를 첫 화면에 놓았다.
시각 언어는 거의 무채색이다. 옅은 회색 배경, 얇은 실선, 작은 대문자 산세리프. 색이라고는 중앙 카드의 검정뿐이다. 개인 포트폴리오에서 흔한 대형 작업 이미지나 화려한 인터랙션을 배제한 이 선택은, 역설적으로 이후 페이지에서 등장할 작업물이 더 선명하게 보이도록 만드는 배경 역할을 한다. SOUND 토글이 상단에 있는 것으로 보아 사운드 요소가 준비돼 있는데, 기본값을 OFF로 두고 사용자가 켜도록 한 판단은 적절하다.
UX/UI 관점
강점은 다섯 가지 이상이다. 첫째, 역량을 도식으로 제시해 읽는 시간을 없앴다. 텍스트 목록이었다면 훑고 지나갔을 정보가, 관계도로 그려지자 한눈에 파악된다. 둘째, 메뉴를 ABOUT ME와 PORTFOLIO 둘로 줄였다. 포트폴리오 사이트 방문자의 목적은 사실상 ‘누구인가’와 ‘무엇을 했는가’ 두 가지뿐이므로, 그 이상의 메뉴는 방해가 된다. 셋째, CONTACT을 메뉴가 아니라 우측 상단 유틸 영역에 배치해, 항상 보이되 탐색을 방해하지 않게 했다.
넷째, 언어 전환(KO/EN)을 첫 화면에 노출했다. 해외 클라이언트나 글로벌 프로젝트를 염두에 둔 디자이너에게 이 위치는 적절하다. 다섯째, SOUND 토글을 사용자 제어로 남긴 점이다. 자동 재생되는 사운드는 포트폴리오 사이트에서 가장 흔한 실수 중 하나인데, 이를 피했다. 여섯째, 하단에 다음 구획으로 유도하는 안내를 작게 배치해, 첫 화면이 전부라고 오해하지 않게 했다. 도식만 있는 화면에서 스크롤 여부를 알려주는 이 작은 신호는 생각보다 중요하다.
IA·SEO 전략
메타 요소는 잘 갖춰져 있다. 제목은 ‘Seunghyuk Kim — Graphic Designer’, 설명에는 활동 지역과 전문 분야가 담겨 있고, canonical과 Open Graph 태그가 있으며 Person 구조화 데이터까지 적용돼 있다. 개인 사이트에서 이 정도를 챙긴 경우는 흔치 않다.
문제는 본문이다. 화면 전체가 스크립트로 렌더링되어, 서버가 내려주는 문서에서 추출되는 텍스트는 34자에 불과하고 이미지 요소도 문서에는 존재하지 않는다. 메타 태그가 아무리 정확해도, 작업물의 내용과 프로젝트 설명이 문서에 없으면 ‘제안서 디자인’, ‘IR 자료 디자인’, ‘프레젠테이션 디자인 외주’ 같은 검색어로는 도달할 수 없다. 개인 디자이너에게 이런 검색어는 실제 일감으로 직결되는 경로다. 해결은 두 가지다. 사전 렌더링으로 프로젝트 제목과 설명을 문서에 담거나, 프로젝트별 페이지를 정적 문서로 별도 생성하는 것이다. 국문·영문 페이지를 함께 운영한다면 hreflang을 추가하는 것도 필요하다.
성능·접근성
첫 화면이 실선과 텍스트로만 구성돼 있어 초기 렌더링 자체는 가벼운 편이다. 다만 스크립트로 화면 전체를 그리는 구조에서는 스크립트 로드와 실행이 끝날 때까지 아무것도 보이지 않는 구간이 생긴다. 최소한 로고와 ‘Graphic Designer — Seoul’ 정도는 서버에서 렌더링해 두면 첫인상 공백을 없앨 수 있다. 포트폴리오 이미지는 뒤쪽 구획에 몰려 있을 것이므로 지연 로딩과 차세대 포맷 적용이 효과적이다.
접근성에서는 두 가지가 눈에 띈다. 문서에 h1이 없어 주제를 선언하는 요소가 비어 있고, 방사형 다이어그램의 선과 라벨이 그래픽으로만 구성돼 있다면 보조기기 사용자에게 관계 정보가 전달되지 않는다. 도식의 내용을 텍스트 목록으로도 함께 제공하면 접근성과 검색이 동시에 개선된다. 얇은 회색 선과 옅은 라벨 텍스트는 대비가 낮아지기 쉬우므로, 최소 대비 기준을 확인할 필요가 있다. 사운드 토글은 상태가 색이 아닌 텍스트(ON/OFF)로도 표시되고 있어 이 부분은 잘 처리돼 있다.
자주 묻는 질문
디자이너 포트폴리오 사이트의 첫 화면에는 무엇을 두는 것이 좋은가요?
정답은 하나가 아니지만, 자신의 강점을 직접 시연하는 화면이 가장 강력합니다. 김승혁의 사이트처럼 정보 구조화가 전문 분야라면 그 능력을 도식으로 보여주는 방식이 어떤 소개 문장보다 설득력이 있습니다.
포트폴리오 사이트도 검색 최적화가 필요한가요?
필요합니다. ‘제안서 디자인 외주’, ‘IR 자료 디자인’ 같은 검색어는 실제 의뢰로 직결됩니다. 프로젝트별 페이지에 작업 배경과 역할을 텍스트로 남기면, 이름을 모르는 담당자에게 도달할 경로가 생깁니다.
화면을 스크립트로만 그리는 사이트는 어떤 점을 보완해야 하나요?
최소한의 본문을 서버에서 렌더링하거나 사전 렌더링을 적용해야 합니다. 메타 태그가 정확해도 문서에 본문이 없으면 검색엔진과 AI가 인용할 내용이 없습니다. 프로젝트 제목과 설명만이라도 문서에 담는 것이 최소 조치입니다.
포트폴리오에 사운드를 넣어도 되나요?
넣되 기본값은 꺼짐이어야 하고, 켜고 끄는 컨트롤이 첫 화면에서 보여야 합니다. 자동 재생되는 사운드는 방문자가 즉시 이탈하는 대표적인 원인입니다.
디지털 파트너 더블루캔버스
개인 디자이너나 소규모 스튜디오의 사이트는 대개 감각이 뛰어나다. 부족한 것은 그 사이트가 검색에서 발견되는 경로다. 이름을 아는 사람은 검색으로 찾아오지만, 새 클라이언트는 이름이 아니라 필요한 작업으로 검색한다. 이 간극을 메우지 못하면 좋은 포트폴리오가 지인 네트워크 안에서만 순환한다.
The Blue Canvas(더블루캔버스)는 포트폴리오형 사이트에서 표현과 검색이 충돌하지 않는 구조를 설계한다. 화면의 감각은 유지하면서 프로젝트를 문서 단위로 열고, 작업 설명을 검색 가능한 텍스트로 남기고, 문의까지의 경로를 짧게 만든다. 홈페이지 제작과 SEO 검색엔진 최적화를 한 흐름으로 다루는 이유가 여기에 있다.
마무리와 다음 스텝
김승혁의 포트폴리오 사이트는 절제가 곧 메시지가 되는 사례다. 역량을 도식 한 장으로 시연하고, 메뉴를 둘로 줄이고, 사운드는 사용자에게 맡겼다. 개인 사이트에서 Person 구조화 데이터와 canonical, OG 태그까지 챙긴 성실함도 눈에 띈다.
실행 제안은 셋이다. 첫째, 프로젝트 제목과 설명이 문서에 남도록 사전 렌더링을 적용하거나 프로젝트별 정적 페이지를 만든다. 지금 구조에서 가장 큰 기회 손실이 여기 있다. 둘째, h1을 추가하고 방사형 도식의 내용을 텍스트로도 제공해 접근성과 검색을 함께 개선한다. 셋째, 국문·영문 페이지에 hreflang을 적용해 언어별 검색에 대응한다. 화면의 완성도가 높은 만큼, 문서에 실체를 남기는 것만으로 유입 경로가 새로 열린다.