내 포트폴리오를 VS Code처럼 만들었어요 👨‍💻

Source: Dev.to

포트폴리오

대부분의 개발자 포트폴리오는 같은 패턴을 따릅니다:

• 히어로 섹션
• 프로젝트 카드 몇 개
• 연락처 양식

깔끔한가요? 네.
기억에 남나요? 항상은 아닙니다.

그래서 뭔가 다르게 해보려고 했습니다. 제 포트폴리오를 VS Code처럼 보이고 느껴지게 만들었습니다.

왜 VS Code 스타일 포트폴리오인가?

개발자는 대부분의 시간을 Visual Studio Code 안에서 보냅니다. 아이디어가 코드로 바뀌는 곳이죠.

그렇다면 포트폴리오도 개발자가 자연스럽게 사용하는 환경처럼 만들면 어떨까요? 전통적인 웹사이트 레이아웃 대신, 포트폴리오가 VS Code 인터페이스를 모방하도록 했습니다. 포함된 요소는 다음과 같습니다:

• 파일 탐색기 네비게이션
• 코드 스타일의 콘텐츠 섹션
• 개발자 중심 UI 인터랙션
• 익숙한 코딩 환경

목표는 사이트를 방문하는 개발자에게 자연스럽게 느껴지는 무언가를 만드는 것이었습니다.

집중한 점

구현하면서 세 가지에 중점을 두었습니다:

1. 개발자 경험 – 인터페이스가 단순히 시각적인 복제본이 아니라 실제 코딩 환경처럼 느껴져야 합니다.
2. 깔끔한 UI – 에디터를 흉내 내지만, 여전히 명확하고 가독성이 좋으며 반응형이어야 합니다.
3. 개성 – 포트폴리오는 사용자가 어떤 도구를 쓰는지뿐 아니라 개발자로서 어떻게 생각하는지를 보여줘야 합니다.

배운 점

• UI 영감은 개발자가 이미 사용하는 도구에서 얻을 수 있습니다.
• 작은 인터랙션이 큰 차이를 만듭니다.
• 포트폴리오는 아이디어를 실험해볼 좋은 장입니다.

최종 생각

포트폴리오가 모두와 똑같은 템플릿을 따를 필요는 없습니다. 때때로 색다른 시도를 하면 더 기억에 남을 수 있습니다.

개발자라면 어떤 스타일의 포트폴리오를 선호하시나요?

• 최소한의 랜딩 페이지
• 인터랙티브 경험
• 개발 환경 같은 창의적인 무언가

여러분의 생각을 궁금해합니다 👇