디자이너가 1인 개발로 포트폴리오 사이트 만든 후기 — React, GitHub, Netlify까지

개인 포트폴리오를 만드는 건 귀찮은 과정이다.

정해진 기한도 없고, 업무도 아니라서 자꾸 뒤로 밀리기 쉽다.

그럼에도 시간을 내서 직접 만들기로 한 건, 개인 역량을 키우고 싶었고 꾸준히 업데이트할 수 있는 내 공간이 필요했기 때문이다.

PPT로 만들거나 템플릿을 쓸 수도 있었다. 하지만 직접 코딩해서 만들어두면 앞으로 유지관리도 쉽고, 작업물이 늘어날 때마다 내가 원하는 대로 바꿀 수 있다. 어차피 내 작업물을 담는 공간인데, 그 공간마저 내가 만든 것이면 더 의미 있을 것 같았다.

결론부터 말하면 — 완성했다.

그리고 만드는 과정에서 예상하지 못한 것들을 많이 배웠다. 기술적인 것만이 아니라, 디자인을 바라보는 시각 자체가 바뀌었다.

시작은 개발 환경 셋팅부터 — 코드 한 줄 쓰기 전에 막혔다

React로 만들기로 결정하고 가장 먼저 한 일은 VS Code 설치였다.

Node.js, pnpm, 프로젝트 생성까지 — 코드 한 줄 쓰기도 전에 환경 셋팅에서 한참 헤맸다.

"이게 다 세팅이 돼야 시작이 되는구나" 싶었다.

이 과정을 블로그 4편에 정리해뒀는데, 지금 생각하면 처음 맞닥뜨렸을 때 가장 낯선 단계였다.

디자인 툴은 설치하면 바로 쓸 수 있는데, 개발 환경은 그 자체가 하나의 작업이었다.

React 문법이 낯설었다 — 그래도 AI가 옆에 있었다

컴포넌트, props, 상태관리 — 처음 보는 개념들이 쏟아졌다. 문법 자체가 낯설어서 내가 원하는 걸 어떻게 코드로 표현해야 할지 몰랐다.

그때 가장 많이 쓴 방법이 AI에게 물어보는 것이었다. "이 레이아웃을 React로 어떻게 짜면 돼?" 하고 물어보면 코드를 던져줬고, 그걸 보면서 구조를 파악해나갔다. 코드를 다 이해하지 못해도 동작하는 결과물이 나왔고, 그걸 반복하면서 조금씩 감이 생겼다.

💡 디자이너가 React를 배우는 현실적인 방법 문법을 처음부터 다 공부하고 시작하려면 시작이 안 된다. 만들고 싶은 것을 먼저 정하고, AI나 검색으로 필요한 코드를 찾아 적용하면서 배우는 것이 훨씬 빠르다. 이해는 하다 보면 따라온다.

완성하고 나서 달라진 것 — 코딩을 알면 디자인이 달라진다

배포까지 마치고 실제 URL로 내 포트폴리오가 뜨는 걸 봤을 때, 단순히 "해냈다"는 느낌만 있었던 게 아니었다. 코딩을 직접 해보고 나니 디자인을 바라보는 시각이 달라졌다.

예전엔 디자인할 때 "예쁘게" 만드는 것만 생각했다면, 이제는 "이게 코드로 구현 가능한가", "컴포넌트를 어떻게 나눠야 효율적인가"를 함께 생각하게 됐다. 개발자와 협업할 때도 훨씬 구체적으로 이야기할 수 있게 됐다.

기획부터 배포까지 혼자 만든 포트폴리오 사이트

이 블로그를 쓰게 된 이유

포트폴리오를 만들면서 겪은 것들을 기록해두고 싶었다. 개발 환경 셋팅, GitHub 사용법, Netlify 배포, 크리에이터링크 CSS 커스텀까지 — 디자이너 입장에서 처음 부딪혔던 것들이 누군가에게도 도움이 될 것 같았다.

코딩을 잘 몰라도, AI와 검색의 도움을 받아도, 직접 만들어보는 경험은 디자이너한테 분명히 달라지는 무언가를 남긴다. 이 블로그는 그 과정의 기록이다.

디자이너가 React로 포트폴리오를 직접 만드는 것은 생각보다 가능한 일이다.
개발 환경 셋팅과 낯선 문법이 가장 큰 장벽이지만, AI와 검색을 적극적으로 활용하면 충분히 넘을 수 있다.
코딩을 해보고 나면 디자인이 달라진다 — 구현 가능성을 생각하는 디자이너가 된다.