🔓

Unlock Portfolio

subtitle

게임형 인터랙티브 포트폴리오

Unlock Portfolio

Interactive Cyberpunk Portfolio Showcase

경험하는 포트폴리오

취업 준비를 하면서, 우리는 보통 PDF로 정리하거나 깔끔한 텍스트 기반 포트폴리오를 만든다.

하지만 이게 과연 “나”를 잘 설명해주는 방식일까?

내 경력을 간결하게 설명해주는 것은 이미 이력서가 충분히 해주고 있다고 생각했다.

그래서 나는, 사람들이 하나하나 복구해가며 "탐험하는" 포트폴리오를 만들어 보기로 했다.

프론트 팀장님이 알려준 reactbits 라는 라이브러리를 보고 영감이 떠올랐다.

이 라이브러리를 사용해서 사용자가 ‘상호작용’ 가능한 포트폴리오를 만들면

사용자가 더 몰입할 수 있겠다는 생각이 들었다.

이력서를 보는 행위 자체가 "경험"이 되는 방식으로.

평소에 관심이 많은 3D 웹 인터랙티비티, 그리고 게임 형식의 포트폴리오로 내가 관심있어하는 것, 잘 할 수 있는 것을 ‘설명하는 게 아니라 보여주는 포트폴리오’를 만들고 싶었다.

콘셉트: 해킹당한 포트폴리오를 복구하라

사이트에 접속하면 보이는 건 멀쩡한 포트폴리오가 아니라, 해커가 퀴즈와 로그를 남기고 떠난 “파괴된 시스템”이다.

•

사용자는 ‘System Rose’라는 AI 안내자의 도움을 받아,

•

터미널 기반 명령어와 해커의 단서들을 따라, 

•

하나하나 프로젝트를 복구하고,

•

마지막엔 해커의 정체, 그리고 이 포트폴리오의 진짜 주인이 누구였는지를 밝혀낸다.

사용 기술 스택

•

프론트엔드: React, Vite, TypeScript, xstate v5, tailwind, react-spring

•

3D: reactbits, react-three-fiber, drei, three.js, glsl

•

인터랙션: terminal-style UI 구현 (커스텀 컴포넌트 + 상태머신), 업적 시스템(like 스팀)

•

i18n: Lingui (다국어 지원: 한국어/영어)

구현 포인트와 고민

1. 터미널 UI 설계

처음에는 진짜 쉘처럼 만들어볼까 했지만, 진입 장벽이 너무 높아질 것 같아 약간 ‘가짜 CLI’처럼 동작하는 구조를 택했다.

•

커맨드 입력은 단순 문자열 매칭

•

힌트나 질문은 해커가 남긴 텍스트로 출력

•

명령어에 따라 복구되는 정보들이 순차적으로 화면에 등장

→ 실제 터미널처럼 “무조건 타이핑해야만 진행되는 UX”가 아니라

“기억에 남는 경험을 제공하는 인터랙션”이 되도록 중간 난이도로 설계했다.

2. 해커의 말투, 캐릭터성

단순 텍스트 퀴즈가 지루하지 않게 하려고, 해커의 말투는 일부러 설정했다.

고양이 정체를 가진 장난스러운 해커.

발로 키보드를 친 듯한 오타, 터무니없는 질문, 그리고 아재개그까지.

What do you call a fake noodle?

...An impasta.

텍스트만으로도 캐릭터가 살아 있게 만들고, 이를 통해 해커의 정체가 더 궁금해지게 만들고 싶었다.

이것으로 문제를 푸는(더 많은 프로젝트에 대해 알아가게끔 만드는) 데 동기 부여하고자 했다.

reactbits의 glitch letters 효과를 커스텀하여 ascii art로 노트북 위에 올라간 고양이가 나타나도록 했다.

3. 프로필을 복구하면서 프로젝트 설명이 자연스럽게 드러나는 구조

모든 프로젝트 정보를 한 화면에 펼쳐놓는 대신,

“복구”라는 행위를 통해 점차 정보가 공개되도록 설계했다.

이건 장난이 아니라, 실제로 다음과 같은 효과를 줬다:

•

한 번에 너무 많은 정보를 전달하지 않게 된다

•

사용자는 프로젝트 하나하나에 집중하게 된다

•

복구 과정이 끝났을 때, 전체 맥락이 더 또렷하게 남는다

프로젝트를 복구할 수록 프로필 페이지에 내용이 추가된다. 오른쪽 디오라마에는 인터랙션이 가능한 메쉬들이 숨겨져 있다.

4. 다국어 지원과 인터랙티브한 3D 요소

한국어/영어 동시 지원은 글로벌한 피드백을 고려한 결정이었다.

또한 react-three-fiber를 통해 배경이나 주요 시각 요소를 3D로 표현해,

사이트 전체에 "깊이감"을 부여하려 했다.

상호작용 가능한 오브젝트들이 있다.

만들고 나서 느낀 점

인터랙션이 과하다고 느낄 수도 있다. 실제로 긱뉴스에 “포트폴리오는 보기 쉬워야 하지 않나요?” 같은 댓글도 달렸다.

•

그래서 show me the hj 라는 치트키를 추가해서 모든 프로젝트를 한번에 복구하는 기능을 추가했다.

•

터미널로 보는 것은 가독성이 떨어질 수 있어서 /career 페이지를 추가해 프로젝트에 대한 정보를 보기 쉽게 정리했다.

나는 이번 포트폴리오를 통해 단지 ‘내가 이런 프로젝트를 했다’를 넘어, “나는 이렇게 생각하고, 이렇게 표현할 수 있는 사람이다”라는 것을 보여주고 싶었다.