brunch

취업 포트폴리오, AI 웹 서비스로 만들기(2)

PPT, PDF 그만! AI 웹 서비스 형태로 만드는 포트폴리오 제작기

by CLASSY GOODY

본 글은 "취업 포트폴리오, AI 웹 서비스로 만들기(1)"에서 이어지는 글입니다.






1단계. 노션에 내 이력 끄적이고, Claude에 검사 받기


원티드, 사람인, 잡코리아 등으로 이력서를 열심히 끄적여보고, 자기소개서도 열심히 끄적여는 봤지만 그걸 PPT, PDF로 만들려니 제 똥손이 허락하지를 않더라구요. 그래서 '어떻게 이쁘고 정갈하고 가지런하게 만들 수 있을까' 하고 고민하다 보니 문득 생각이 났죠.

아, 노션!


저는 노션을 꽤 좋아하고 회사에서도 협업 도구로 잘 사용했던 편입니다. 그래서 노션으로 내 포트폴리오를 만들어보면 어떨까 싶었죠. 하지만, 처음 노션을 켜서 새 페이지를 열었을 땐 참 막막했습니다. 막상 뭘 어디서부터 써야할 지 감이 안오더라구요.

그래서, 그냥 원티드로 잘 쓴 이력서 내용을 그대로 붙여넣고, 거기에 살을 붙이기 시작했습니다. 커버나 메인아이콘 등 여기저기 내 얼굴이 들어간 사진도 넣고, 각종 코드블럭으로 텍스트를 강조해보기도 하고, 데이터베이스마다 제 경험들을 넣어 분류해보기도 했습니다. (좀 꿀팁이지만, Joey라는 서비스로 맨 하단에 방명록도 넣었답니다.)

감사하게도 요즘은 노션 포트폴리오를 템플릿화한 사람들도 많아서, 템플릿을 받아 넣는 것도 방법이 될 수 있습니다. 물론, 나만의 포트폴리오를 만들려면 적절한 커스터마이징이 필요하겠죠?

스크린샷 2025-06-13 오후 11.40.38.png
스크린샷 2025-06-14 오전 12.44.45.png
그렇게 어찌어찌 구색은 갖췄지만..

사실 제가 글을 썼지만 글의 구성부터 잘 된건지 확인을 받아보고 싶었습니다. 그래서 이력서를 가지고 주변 친구들에게 물어도 보고, 지인을 통해 컨설팅도 받아보기는 했지만.. 각자의 경험과 스타일이 워낙 다르기 때문에 이러한 피드백은 소용이 없었습니다. 그래서 저만을 위한 제 사실을 알고 있는 "무언가"가 필요했죠.

그게 바로 AI 모델인 Claude AI였습니다.


우리가 흔히 'AI'라고 부르는 LLM(Large Language Model) 에이전트(Agent) 서비스 중에는

ChatGPT, Claude, Google Gemini, Perplexity 등이 있습니다.

1*-X5UOYBY9Ewt4SFtcy9RRw.png 시중에 알려진 유명 LLM 에이전트. 사실 이보다 훨씬 많다.

그리고 각 LLM 에이전트마다 알려진 특징이 있습니다.

요즘 세상이 참 편해져서, 구글로 검색만 해도 그 특징을 잘 알려주죠.

스크린샷 2025-06-13 오후 11.58.54.png

위 내용을 간단히 요약하자면, 다음과 같습니다.

- ChatGPT: 다재다능한 AI 모델, 다양한 작업에 활용 가능.
- Claude: 글쓰기, 코딩에 특화된 AI 모델, 정형 문서 생성에 적합.
- Gemini: 다중 모드 AI 모델, 구글 생태계 연동 강점.
- Perplexity: 검색 엔진과 AI 결합, 정보 정확도 강조.

이 중에서 특히 Claude는 문서의 흐름, 문법 오류, 명확성 등을 검토하거나, 특정 직무에 맞춰 내용을 보완하는 데 더 특화되어 있는 AI 모델이라고 알려져 있습니다. 그래서 저는 노션에 제 이력서를 담고 내용을 검토해달라고 요청했습니다.

스크린샷 2025-06-14 오전 12.02.22.png 단순히 PDF를 넣고 한 줄의 명령어를 입력했을 뿐인데, 나름 상세하게 알려준다.

질문에 꼬리 질문을 달아가며 계속된 피드백을 요청했고, 내용적으로 검토는 완료하게 됩니다.






2단계. 우피(oopy.io)로 노션을 웹 페이지로 꾸미기


이렇게 내용을 검토하고 노션도 나름 꾸며보기도 했으니, 이제는 이걸 어떻게 뽑아야 할까 고민했습니다.

처음에는 노션을 단순히 PDF로 내보내기해서 가져갈까 했지만, 실제로 PDF로 뽑아보면 실망스럽습니다. 그래서 더 좋은 방법을 고민해보다가, 웹 페이지 형태로 전환하여 개발자스러운(?) 느낌을 더하면 어떨까 싶더라구요. 그러다 발견한 서비스가 바로 우피(oopy)입니다.

스크린샷 2025-06-14 오전 12.08.41.png 출처 : 우피 공식 웹사이트(oopy.io)

oopy는 노션을 빠르게 웹사이트로 만들어주는 국내 서비스로 유명하죠. 이와 같은 서비스를 활용하면, 코딩 지식 없이도 노션 페이지를 반응형 웹 사이트로 쉽게 변환하고, 자신만의 도메인을 연결하여 전문성을 높일 수 있습니다. 근데 이런 좋은 기능 심지어 무료로도 쓸 수 있습니다.

참고로 유료의 경우 월간 구독 형태로 결제되며 커스텀 도메인을 포함해 무료보다 훨씬 강력한 기능을 제공하기 때문에, 저는 매월 구독하고 있습니다. (가격은 공식 웹사이트에서 확인)


이미 oopy에 대한 사용법은 공식 문서를 포함해 다른 글을 찾아봐도 다 잘 알려주기 때문에, 여기서는 간단히 연결 방법만 요약해서 알려드릴게요.

1. 회원가입 및 로그인

2. (유료 결제를 할 경우) 카드 등록 후 결제

3. 만든 노션 페이지의 오른쪽 위 "공유" 클릭 ► "게시" 에서 "게시하기" 클릭 시 나오는 링크 복사

4. oopy 관리자 화면의 홈 ► "기본 정보" 탭에 "연결된 Notion 주소"에 넣고 "연결" 클릭

노션이 잘 연결되면 다음과 같이 뜬다.

여기서 물론 스타일 설정 등 다양한 세팅이 가능하지만, 저는 특히 "Clean URL" 기능이 참 좋았습니다.

Notion에서 만든 내 포트폴리오에는 또다른 페이지가 있을 수 있는데, 그 페이지 링크들도 내가 원하는 URL로 변경할 수 있어요.

예를 들어 내 홈 화면에서 하위 페이지인 "Goody-Wiki"로 가면, 호스트네임으로 등록된 내 도메인 뒤에 못생긴 링크를 깔끔하게 수정할 수 있죠.

- Clean URL 세팅 전 : classygoody.oopy.io/033ccd098feqklrjgafsdjfk
- Clean URL 세팅 후 : classygoody.oopy.io/introduce
스크린샷 2025-06-14 오전 2.38.38.png


물론, 우피와 유사한 타 호스팅 서비스도 많이 있습니다.

하지만 그럼에도 제가 oopy를 쓴 이유는 크게 3가지 정도가 되겠습니다.

- 세팅이 쉽고 간단한데, 국내 서비스라 한글, 원화결제 등의 메리트가 크다.
- 공식 웹에서 도메인 연결부터 스타일 설정, 꿀팁까지 모두 차근차근 쉽게 알려준다.
- Custom HTML 편집이 가능하다!!!! (매우중요 ⭐️⭐️⭐️⭐️⭐️)




이 중에서 특히 3번째 이유가 중요한데, 이는 다음 글에서 이어서 설명하겠습니다.


그래서, 다음 페이지로.
keyword
매거진의 이전글취업 포트폴리오, AI 웹 서비스로 만들기(1)