VS코드st 포트폴리오 페이지 만들기

잔나비·2025년 8월 3일

jannabee로그

목록 보기
2/14
post-thumbnail

재미있는? 그저그렇지 않은?

신입 웹퍼블리셔의 포트폴리오 제작기

프론트엔드 개발자 혹은 웹퍼블리셔 신입으로서의 포트폴리오일지,
혹은 7년간 쌓아온 홍보마케팅 경력을 앞세운 웹기획자로서의 포트폴리오일지,
그 방향성을 잡는 것부터가 꽤나 험난했다.

하지만 어쨌든!
하루 한 뼘씩이라도,
코드 한 줄씩이라도,
진행하고 있다는 사실 자체에 성취감을 느끼고자 노력 중이다.


기억에 남는 포트폴리오란?

포트폴리오를 제작하면서 가장 고민한 지점은 이것이었다.

  • '흔하지 않은'
  • '나를 드러낼 수 있는'
  • '수많은 포트폴리오 중에서 기억에 남을'

...페이지를 어떻게 하면 만들 수 있을까?

특히 나는 홍보마케팅 7년 경력이라는 나름의 무기를 가지고 있다.
그런데 실제로 만들고 있는 포트폴리오는 웹퍼블리셔 신입, 아니 신생아 수준의 결과물이다. 😅

그럼에도 불구하고 인사담당자 혹은 함께 일할 개발자 입장에서
조금이라도 눈길이 가고,
스크롤을 한 번이라도 더 내리게 하고,
클릭이라도 한 번 더 하게 만드는 포트폴리오를 만들고 싶었다.


그래서 선택한 콘셉트

VS코드st 포트폴리오 페이지 만들기

프론트엔드 개발자들이 매일같이 켜두는 그 푸른 화면,
'VS Code'를 오마주한 포트폴리오 페이지를 만들기로 했다.

이런 결정을 내릴 수 있었던 이유는 간단하다.

내 포트폴리오 페이지를 보는 사람은 VS코드를 '잘 아는 사람'일 가능성이 높다.

프론트엔드 직무 특성상,
코드를 다루는 사람이라면 VS코드를 한 번도 안 써봤을 가능성은 낮다.
그렇다면 VS코드 화면을 떠올리게 하는 포트폴리오는 단순한 디자인 요소를 넘어서,
그들에게 ‘재미’, ‘흥미’, ‘친숙함’, 그리고 약간의 동질감까지 줄 수 있지 않을까?

GIF: 실제 구현 중인 메인 히어로 페이지 (VS코드st)


물론 단점도 있다

VS코드를 모르는 일반 유저 입장에서 본다면,
이 페이지는 가독성이 낮은 불친절한 페이지일 수도 있다.

하지만 나는 지금
개발자에게, 혹은 개발자를 채용하고 싶은 사람에게
'기억에 남는 포트폴리오'를 만드는 중이다.

그렇기에 '누군가에게는 불편할 수도 있음'을 감수하고서라도,
나만의 색을 가진 포트폴리오를 만들고자 했다.


마무리하며

아직 갈 길이 멀다.
하지만 이 글을 쓰는 지금도 VS코드를 열어두고,
html과 css, js 코드와 씨름하며
그때그때의 고민을 기록하고 있다.

이 기록이 언젠가,
내가 어떤 고민을 하며 어떤 선택을 했는지를
보여줄 수 있는 자산이 되길 바라며.

👉 다음 포스트에서는 [사이드바 구조 설계 & 인터랙션 구현기]를 기록해볼 예정!

profile
“브랜드를 잇고, 감성을 설계하며, 기능을 실현하는 연결자”로 성장하고픈^.^

0개의 댓글