이번 글에서는 지난 글에 이어서 본격적으로 포트폴리오 웹 페이지를 어떤 과정을 거쳐서 만들게 되었는지 설명하겠습니다.

1. 시작: 험난한 여정

딱 어느 시점을 기준으로 이제부터 만들자 라고 한 것은 아니고 FE 기술 스택을 조금씩 학습해나가면서 이제부터 조금씩 만들면 되겠다 하는 생각이 들었습니다.

다만 처음부터 전체 웹 페이지의 디자인을 제가 직접 구성하는 것은 되도록 피하고 싶었습니다. 이 부분은 제가 아예 경험이 없었기 때문에 사실 이런 상태였습니다.

내가 어떤걸 모르는지도 모르는 상태...

웹 페이지의 기획이나 디자인 작업은 지금까지 전혀 해보지 않았기 때문입니다. 메뉴를 상단에 배치 할지 아니면 좌측 사이드 메뉴를 할지에 대해서도 감을 잡기 힘들었습니다. 최근 디자인 트렌드가 무엇이고 사용자들의 요즘 디바이스 크기에 따라서 디자인 컴포넌트 배치를 어떻게 하는 것이 좋을지 이제부터 공부하는 것도 쉽지 않은 일이었습니다.

당초 이 프로젝트를 시작한 이유 중의 하나인 처음부터 내가 직접 만들어보고 싶다가 꽤 도전적인 과제라는 생각이 들었습니다.

그리고 아마도 이 글을 읽는 분들 중에 본인만의 웹 서비스를 만들어 보고 싶은 분들이 계시고 전에 해본적이 없다면 저와 유사한 고민을 하게 될 것이라 조심스럽게 추측합니다. 그리고 이것은 개발자 경력의 짧고 김의 문제가 아니라는 생각도 동시에 듭니다.

개발자로 취업해서 회사일에 치여 정신없이 살다보면 어쩔 수 없는 측면일 수도 있겠습니다. 특히나 저와 같은 백엔드 개발자라면 더더욱 이러한 고민을 할 수밖에 없을 것입니다.

이 글의 나머지 부분은 이런 고민을 어떻게 해소하게 되었는지 그리고 이것을 오히려 즐거움으로 뒤바꾼 과정을 소개합니다.

2. 간단한 것 먼저 만들기

지난 글에서 소개했던 것 중에 하나가 FE 기술을 습득할 때, 유튜브의 클론 코딩 영상을 시청했다는 것인데요. TypeScript와 React(Next.js)에 대해 어느 정도 감을 잡고 나서 클론 코딩 영상 시청을 시작했습니다.

가장 먼저 만들기로 한 것이 포트폴리오 웹 페이지였기 때문에 유튜브에서 Portfolio, React portfolio 등의 키워드로 검색해서 대략 10개가 넘는 영상을 찾았습니다. 이 10개의 영상을 고를때는 썸네일 이미지와 조회수를 기준으로 골랐습니다.

이 10개의 영상 중에 하나만 골라서 그대로 만들어서 배포하고 도메인 구입까지 해보기로 마음먹었습니다. 일단 눈에 보이는 결과물이 있어야 저 스스로 동기부여가 더 될 것 같았습니다.

유튜브의 클론 코딩 영상들은 대동소이 하지만 일정한 패턴이 있습니다. 영상의 앞부분은 거의 대부분 데모 시연으로 시작합니다. 어떤 기능, 서비스를 만들 것인지 소개하는 것입니다.

그래서 앞서 선정한 10개의 영상 모두 앞부분 데모 시연 부분을 보고 제가 제일 만들고 싶은 데모를 시연하는 영상 하나를 골랐습니다.

바로 이 5시간 20분짜리 영상입니다.

영상 소개글에 무료 포트폴리오 리소스 링크까지 걸려 있고 댓글을 보면 수 많은 사람들이 이 영상대로 만들어서 자기 포트폴리오 웹 페이지로 배포했다 고맙다 라고 밝히고 있어서 이대로 만들어도 되겠다 싶었습니다.

클론 코딩 시작 전에 기본기는 어느 정도 다져놨기 때문에 영상 시청을 따라가는데 크게 지장은 없었습니다. 그리고 이 포트폴리오 코드는 화면을 그리는 부분에 집중되어 있고 딱히 논리적인 로직을 포함하고 있지 않습니다. 그래서 시작하는데 부담이 없었던 것 같습니다.

5시간 영상을 처음부터 끝까지 모두 정주행하는데 대략 7시간 내외 걸린 것으로 기억합니다. 중간중간 영상을 멈추고 제가 직접 구현해보거나 TypeScript, CSS 관련해서 궁금한 부분이 있어서 공부하면서 봤기 때문입니다. 그리고 이 영상의 후반부는 CSS를 활용하여 애니메이션을 구현하는데 이 부분은 스킵했습니다.

그래서 결국에 포트폴리오 페이지 제작을 어느 정도 완성할 수 있었습니다. 영상에서는 포트폴리오 콘텐츠로서 일종의 Mock data를 활용합니다. 가상의 인물과 프로젝트에 대한 데이터로 포트폴리오를 만드는건데요, 코드가 어느 정도 완성되었을 때 이 Mock data를 걷어내고 저의 실제 데이터를 입력했습니다.

아래에 저에 대한 소개문과 경력, 어떤 프로젝트들을 했었는지에 대해 추가한 결과물을 소개합니다.

Hero section

• 뭔가 임팩트 있는 문구를 넣고 싶었는데 도저히 떠오르지 않아서 ChatGPT의 힘을 빌렸습니다.

Projects

• 지금까지 참여했던 프로젝트들을 소개하는 곳입니다. 왼쪽에 설명문과 오른쪽에 이미지가 배치되어 있습니다.

Career & Tech stacks

• 제가 재직했던 회사 3곳에 대한 카드 소개가 가로 스크롤 됩니다.
• 제게 익숙한 언어와 프레임워크 그리고 어떤 툴들을 사용하는지 소개합니다.

Contact

• 저의 Social links 입니다.
• Contact는 추후에 아마도 독립적인 상위 메뉴가 될 것 같습니다.

그 다음은?

저만의 포트폴리오가 완성되니 왠지 감회가 새로웠습니다. 특히 제 경력 사항과 지금까지 참여한 프로젝트에 대해 시간을 좀 할애해서 작성을 하고 나니 꽤 그럴듯해졌습니다.

그래서 바로 원격 호스팅 서버에 배포하기로 결정했습니다.

Vercel

Vercel은 Next.js를 만들고 관리하는 회사입니다. 그렇기 때문에 Next.js 애플리케이션을 정말 손쉽게 배포할 수 있습니다. 저는 프로젝트 코드를 깃헙에 올려두고 이 리포지토리를 Vercel에 연결하는 방식으로 배포했습니다. 자세한 배포 방식은 이 문서를 참조하시면 됩니다.

또한 Vercel은 도메인을 구입하고 해당 도메인을 배포한 코드에 연결하는 서비스도 제공합니다. 따로 가이드 문서를 읽지 않아도 할 수 있었는데 이것은 Vercel의 상당히 명확한 UI/UX 때문으로 생각합니다. 도메인 구매 금액은 연 기준으로 14달러입니다. 도메인 구입과 프로젝트 연결에 소비한 금액입니다.

포트폴리오 마무리

서버에 배포하고 나서도 포트폴리오 콘텐츠(ex: 경력 사항, 프로젝트 상세 내용)를 주로 많이 수정했고 약간의 디자인 수정도 계속 진행했습니다. 영상에서도 화면 비율에 맞게 반응형 디자인을 적용하는 부분을 설명해주긴 하지만 저 나름대로도 여러가지 화면 비율을 띄워놓고 어색한 부분이 있는지 점검하면서 조금씩 수정을 해나갔습니다.

3. 조금 더 난이도를 올려보자

포트폴리오 기능을 완성하니 약간의 자신감이 붙었습니다.

뒤이어 곧바로 블로그 기능 구현 개발을 시작했습니다. 애초에 블로그는 이 프로젝트를 시작할 때부터 어느 정도는 염두에 두고 있었습니다. 그렇기 때문에 심리적인 부담감 없이 시작할 수 있었습니다. 오히려 이것을 어떻게 개발하면 좋을지 고민하는 것이 즐겁게 느껴지기도 했습니다.

블로그 기능 구현 시 고려해야 할 것들

블로그를 본격적으로 구현하기 전에 고민했던 것은 블로그 글을 어떻게 관리할 것인가 였습니다. 제가 만드는 서비스는 제가 블로그 글을 작성하고 여기에 게시하는 것이 목표이기 때문입니다. 다른 사람들이 이곳에 로그인 해서 글을 작성하는 것이 아니기 때문에 WYSIWYG 기반의 글 작성 기능이 필요하지는 않았습니다.

하지만 블로그 글은 텍스트를 단순하게 화면에 표시하기만 하면 안 됩니다. 가독성을 위해 여러가지 표현 수단들이 필요합니다. 대제목/중제목/소제목을 명확하게 표시할 수 있어야 했고 그 외에도 이미지와 영상 삽입 뿐만 아니라 다양한 프로그래밍 언어 코드도 삽입할 수 있어야 한다고 생각했습니다. 이를 테면 아래와 같은 효과들입니다.

def greet(name):
    return f"안녕하세요, {name}님!"

print(greet("박진영"))

• 특정 언어 문법 강조
• line number + 특정 라인 강조 표시 + 특정 키워드 강조 표시

그래서 여러가지 기술 문서들을 찾아보기 시작했습니다. Claude, ChatGPT에 관련된 질문을 하면서 주로 어떤 방식으로 이러한 요구사항을 구현할 수 있는지 감을 잡아가기 시작했습니다. Next.js + Blog, Blog CMS 등등의 키워드로 검색했습니다.

블로그 구현 시작!

그렇게 대략적으로 어떤 방식으로 구현하면 되겠다라고 생각하면서 역시 이번에도 유튜브 영상을 검색했습니다. 영상 중에는 일반적으로 Next.js로 블로그 시스템을 구성하는 방법만 알려주는 강의 형식의 영상도 있었고 클론코딩 형식의 영상도 있습니다.

아래에 소개하는 영상은 Next.js 기반으로 블로그 서비스를 구현하는 내용을 아주 충실하게 담고 있어서 많은 도움이 되었습니다. 앞서 얘기했듯이 최초 서비스 개발을 고려할 때부터 블로그를 염두에 두고 있었기 때문에 유튜브에서 수 많은 Next.js 강의 영상 중에 이 블로그 개발 영상을 선택하게 되었습니다.

이 영상은 7시간이 조금 넘는 분량입니다. 앞부분 5시간 분량은 블로그 시스템을 개발 하고 뒷부분 2시간은 이미지 최적화, SEO 등등의 추가적인 기능 구현을 소개합니다.

시간 분량이 꽤 되는 이유는 이 영상 역시 처음부터 마지막 단계까지 전부 구현하는 것을 담고 있기 때문입니다. 그래서 저는 이 영상을 전부 다 보기보다는 블로그 구현과 상관 없는 내용은 조금씩 스킵하면서 시청했습니다.

블로그 완성!

제가 원래 작업하던 포트폴리오 모듈에 바로 이어서 작업하기 보다는 새로 모듈을 만들고 거기를 기반으로 영상 시청을 하며 코드를 작성했습니다. 그런데 이것은 약간의 삽질을 야기했는데요. 이 영상에서 소개하는 블로그 관리 라이브러리(Contentlayer)가 최신 Next.js 버전에서는 구동하지 않기 때문입니다. 저의 포트폴리오 모듈은 v14의 Next.js를 사용중인데 Contentlayer는 현재 maintain 중이 아니라 비교적 최신의 Next.js를 지원하지 않습니다.

7시간짜리 영상을 거의 다 보고 블로그 코드를 저의 원래 포트폴리오 모듈로 이식하려는 순간 이것을 알게 되어서 살짝 멘붕이 왔습니다.
하지만 포트폴리오 모듈에 다른 블로그 라이브러리를 붙여서 결국에 어찌저찌 완성을 하게 되었습니다. 대략 반나절 정도 추가로 시간을 더 썼던 것으로 기억합니다.(이 부분과 관련해서 상세한 내용은 아마도 다음 글에서 소개할 예정입니다)

블로그 기능을 원래의 포트폴리오 모듈에 추가하면서 화면 개편 작업도 같이 진행했습니다.
기존에 만들었던 포트폴리오의 최상단 메뉴에 Blog 라는 메뉴를 추가하고 따로 Home 페이지도 만들었습니다.

• Home (route: /)
  • Blog 글 중에 가장 최신 글 소개
• Blog (route: /blog)
  • 전체 Blog 글을 볼 수 있는 화면. Blog title, tag 기준으로 검색 가능
• Blog article (route: /blog/{slug})
  • 해당 Blog 글 본문 내용.
• About (route: /about)
  • 기존 포트폴리오 내용이 담김

이렇게 해서 기본적인 포트폴리오 + 블로그 기능 구현이 마무리되었습니다.

4. 오 할만한데?

천 리도 한 걸음부터

세상의 모든 작업물들이 그러하겠지만 이 프로젝트 역시 아주 간단한 것부터 시작해서 차근차근 살을 붙이는 방식으로 진행하고 있습니다. 처음에는 아주 간단한 자기소개 페이지를 만들었고 그리고 나서 내가 원하는 방향으로 디자인을 조금씩 손봤습니다. 여기에 블로그 기능을 구현했고 다국어 지원 기능도 추가했습니다.

개발자 경험

예전에 비해 개발 환경이 더 좋아졌다는 것을 확실히 체감합니다.

• React(Next.js) + Tailwind 이 2가지 조합만으로 복잡하지 않은 간단한 기능은 반나절이면 구현할 수가 있습니다.
• VS code에 Github Copilot과 CLINE을 설치하여 사용중입니다. 개발하면서 막힐 때, 이 2가지 툴을 사용하여 손쉽게 문제를 해결할 수 있었습니다. 물론 이것은 회사에서 백엔드 개발자로서 일 할 때도 마찬가지 경험이긴 합니다.
• Vercel 서비스 하나만 사용해서 코드 배포 및 도메인 연결이 가능합니다. Vercel에 깃헙 리포지토리 연결하는 건 거의 2~3분이면 할 수가 있습니다. 그 이후에는 main 브랜치에 코드를 푸시하면 자동으로 배포됩니다.

재미가 최고의 재료

프로젝트 모듈에 TODO.md 파일을 따로 만들어서 할 일 목록을 관리하고 있습니다. 즉흥적으로 생각나는 것들을 여기에 적어놓고 하나씩 구현해보는 재미가 아주 쏠쏠합니다. 아무래도 회사에서 돈을 벌기 위해 하는 일 보다는 내가 하고 싶고 내가 만들고 싶은 것을 직접 만들기 때문일 것입니다.

이 글을 적고 있는 현재도 TODO.md 파일에는 10개가 넘는 할 일 목록이 적혀 있습니다. 매일 아침 컴퓨터 책상에 앉아 VS code를 열고 이 프로젝트 모듈을 열면 오늘은 어떤 걸 구현해볼까 하는 두근거림이 있습니다.

이 글을 보시는 여러분들 중에 저처럼 한 번도 본인만의 웹 서비스를 만들어본 적이 없는 분이 계시다면 본인만의 웹 서비스 제작을 한 번 해보시길 권해드립니다.

이 글은 여기서 마칩니다.

이 시리즈의 다음 편에서는 좀 더 기술적인 내용을 다룰 예정입니다. 특히 블로그 제작 관련해서 어떤 라이브러리를 사용하고 있는지 그 이유는 무엇인지 등등에 대해 다루겠습니다.

그럼 이 글을 읽어주셔서 감사합니다. 좋은 하루 되세요 👋