AI 로 정의하는 나는 어떤 디자이너인가! — 디자이너의 포트폴리오 사이트 만들기 편

* 온어닷 스터디장님의 포폴 스킬을 공유 받아서 작업한 결과물입니다, 스터디장님 감사합니다~

🎯 바쁘시면 이것만 읽어도 돼요

• 포트폴리오 사이트를 만들면서 제 작업물을 클로드한테 분석시켰는데, 표본이 2편에서 5편, 13편으로 늘 때마다 결론이 두 번 갈렸어요

• 2편일 때 나온 "채도 있는 색을 안 쓰는 사람"이라는 판단으로 사이트 배경색이랑 헤드라인 서체까지 정해버렸다가 나중에 다 되돌렸어요

• 13편을 다 보고도 못 잡은 게 하나 있었는데, 그건 결국 제 입에서 나왔어요

👀 이런 분들께 도움돼요

• 포트폴리오나 자기소개서처럼 "나를 한 줄로 정리하는 일"을 AI한테 맡겨보려는 분

• AI가 자신 있는 말투로 내놓은 결론을 어디까지 믿어야 하나 애매했던 분

• 작업물은 쌓였는데 정작 뭘 잘하는 사람인지 스스로도 설명이 안 되는 분

• 개인 작업 화면을 커뮤니티에 올릴 때 뭘 가려야 하나 고민인 분

😮 Before: 제 스타일을 제 입으로 설명 못 했어요

먼저 제 소개를 하면, 저는 콘텐츠 마케팅 디자이너이면서 요즘은 클로드랑 같이 웹앱을 만들어서 굴리는 바이브코딩 개발자이기도 해요. 그래서 포트폴리오도 남이 만든 플랫폼에 올리는 대신 사이트를 직접 만들기로 했어요. 영상이랑 그래픽을 어떻게 전시할지를 제가 정할 수 있고, 무엇보다 사이트 자체가 제 작업물 한 건이 되니까요. 이 글이 번거로워 보이는 이유가 여기에 있어요.

취업용 포트폴리오 사이트를 만들기로 했는데 첫 화면 태그라인 한 줄에서 막혔어요. 작업물은 개인 사이트에 흩어져 있었고, 저도 "저는 이런 걸 잘해요"를 한 문장으로 못 썼어요. 그래서 작업물을 클로드한테 넘기고 "여기서 내 손버릇 좀 찾아줘"라고 시켜봤어요.

✨ After: 표본이 늘 때마다 제 스타일이 바뀌는 걸 봤어요

2편으로 시작해서 5편, 13편까지 늘렸는데 그때마다 결론 문장이 통째로 교체됐어요. 사이트 배경색이랑 헤드라인 서체, 카드 비율까지 그 결론을 따라 같이 바뀌었고요. 지금은 작업물 18건이 올라간 사이트가 돌아가고, 결론이 왜 바뀌었는지가 파일로 남아 있어요.

ALT

한국 비디오 웹사이트의 홈페이지

▲ 블러 처리한 포트폴리오 첫 화면

🛠️ 이번에 한 것 (배경 30초)

절차를 제가 처음부터 짠 건 아니에요. 스터디장님이 공유해주신 사이트 리런치 스킬이 원본이에요. 다만 그대로 설치해서 쓰지는 않았어요. 기존 사이트를 새 주소로 옮기는 게 핵심인 스킬이라 옮길 사이트도 지킬 도메인도 없는 저한테는 안 맞는 단계가 있었거든요. 그래서 필요한 다섯 가지만 골라서 제 방식으로 고쳐 넣었어요. 그중 하나가 "비공개 작업물은 화면에서 숨기는 게 아니라 페이지 소스에 아예 안 실리게 해야 한다"였는데, 제 계획에 딱 그 구멍이 있었어요.

1. 흩어져 있던 작업 영상이랑 이미지를 스크립트로 받아와요

2. 영상은 프레임을 12장씩 뽑아서 색·타이포·구성을 클로드가 읽어요

3. 읽은 결과를 "내 작업 스타일" 문서로 정리해요

4. 그 문서를 근거로 사이트 팔레트·서체·구조를 정해요

5. 작업물이 늘면 문서를 다시 쓰고, 결론이 바뀌면 사이트도 같이 고쳐요

🔨 과정: 2편에서 13편까지, 결론이 두 번 갈아엎힌 기록

1️⃣ 분석보다 작업물 모으는 데서 더 막혔어요

작업 영상이 로그인해야 보이는 사이트에 올라가 있어서 거기부터 뚫어야 했어요. 로그인해서 쿠키를 저장해뒀는데 다음 실행에서 계속 풀렸어요. 로그인 창의 '로그인 상태 유지'를 체크하지 않으면 세션 쿠키라 파일로 저장이 안 된다는 걸 세 번째 시도에서 알았어요.

들어가서도 한 번 더 걸렸어요. 브라우저로 영상을 재생시켜서 받으려고 했는데 화면이 까맣게만 나왔어요. 자동화용 크로미움에는 H.264 코덱이 안 들어 있어서 애초에 재생이 안 되는 거였어요. 그래서 재생은 포기하고 재생 API 응답에서 영상 주소만 뽑아 ffmpeg로 받는 쪽으로 바꿨어요.

프레임 뽑을 때도 한 번 헛돌았어요. 페이지에서 이미지를 다 긁으니 사이트 껍데기 이미지가 본문보다 많이 나왔어요. 본문 주소 패턴이 들어간 것만 남기는 규칙을 넣고서야 본문 프레임만 걸러졌어요.

2️⃣ 2편으로 내린 결론이 사이트 배경색까지 정했어요

처음 받은 게 럭셔리 광고 2편이었어요. 이걸 읽고 나온 결론이 이랬어요.

웜 뉴트럴과 딥 블랙을 오간다. 채도 있는 색은 0.

말투가 하도 단호해서 저도 의심을 안 했어요. 그 자리에서 사이트 방향까지 그걸 근거로 정했어요. 배경은 크림색(#f2ece3), 헤드라인은 명조체, 태그라인은 제품보다 분위기를 먼저 세웁니다로요. 럭셔리 두 편이랑 잘 어울렸으니까 맞다고 봤어요.

3️⃣ 😲 하이라이트: 3편 더 넣었더니 같은 사람이 다른 사람으로 나왔어요

로그인이 저장된 뒤로는 영상 받는 게 빨라져서 모션그래픽 3편을 더 넣었어요. 제 예상은 소박했어요. 이미 나온 결론에 근거가 몇 줄 붙겠거니 했어요. 채도 없는 사람이라는 큰 줄기는 안 흔들릴 거라고 봤고요.

실제로 나온 건 정반대였어요. 3편의 색이 이렇게 나왔어요.

채도 0이라던 사람이 핫핑크를 쓰고 있었어요. 표본이 2편일 때 제가 우연히 비슷한 두 편을 먼저 골라 넣은 거였어요.

결론 문장은 보강이 아니라 교체됐어요. "팔레트가 고정돼 있지 않다. 브랜드마다 완전히 갈아탄다"로요. 그리고 그 한 줄 때문에 이미 만들어둔 사이트가 네 군데나 연달아 바뀌었어요.

• 배경 크림(#f2ece3) → 중립 오프화이트(#f4f3f0). 크림은 따뜻해서 시안·핫핑크 작업이랑 부딪혔어요

• 헤드라인 명조 → 굵은 고딕. 명조는 럭셔리 작업에만 어울렸어요

• 작업물마다 상세 페이지가 밝은 테마·어두운 테마로 갈리게 만들었어요

• 카드 비율을 원본 방향에 맞췄어요. 세로 4:5로 통일해뒀더니 가로 영상의 로고타입이 잘려 있었어요

ALT

한국어 텍스트가 적힌 분홍색 페이지

▲ 밝은 테마로 열리는 상세 페이지

▲ 같은 사이트인데 어두운 테마로 열리는 상세 페이지

2편 표본으로 정했던 것 중에 그대로 살아남은 게 거의 없었어요. 제일 뜨끔했던 건 결론이 틀렸다는 것보다도, 그게 몇 편을 보고 내린 판단인지가 문서 어디에도 안 적혀 있었다는 점이었어요. 그러니까 저는 2편짜리 판단이랑 13편짜리 판단을 똑같은 무게로 읽고 있었던 거예요.

그래서 13편을 전부 넣고 다시 돌렸어요. 이번엔 결론이 안 뒤집히고 대신 이렇게 정리됐어요. 배경은 13편 전부 오프화이트 아니면 순수 검정이었고, 색은 항상 1~2개만 쓰고 나머지는 눌러뒀어요. 브랜드마다 문법을 갈아입는 게 내 실력이라는 게 여기서 결론이 됐어요. AI로 만든 영상만 있는 줄 알았는데 직접 찍은 실사 촬영도 2편 있다는 것도 이때 나왔어요.

ALT

많은 사진이 있는 검은 화면

▲ 블러 처리한 작업물 목록. 장르 라벨만 보여요

4️⃣ 13편을 다 봐도 못 잡은 건 '주어'였어요

13편 기준으로 태그라인도 새로 나왔어요. 브랜드의 말투로 만듭니다였어요. 근거도 붙어 있었고 저도 그럴듯하다고 봤어요.

그런데 홈 화면을 갈아엎으면서 다시 보니까 계속 걸렸어요. 클로드가 문장을 네 개 더 지어왔는데 네 개 다 마음에 안 들었어요. 기획부터 배포까지 혼자 끝냅니다, 모른다고 멈춘 적은 없습니다 같은 것들이었어요. 이유를 짚어보니 제 말투가 아니었어요.

포트폴리오 제작기를 읽고 거기 나온 인터뷰 방식대로 제 말을 먼저 뽑아봤는데, 그러고 나서야 뭐가 문제였는지 보였어요.¹

확정된 문장은 브랜드를 내 언어로 번역해 대중에게 설명합니다예요. 재밌는 건 근거가 이미 13편 안에 다 있었다는 거예요. 향을 역광 골목으로, 캐리어의 흠집을 여행의 기록으로, 매장을 머무르고 싶은 공간으로. 전부 A를 B로 바꾸는 구조였어요. AI는 그 근거를 다 읽고도 문장의 주어를 반대로 세웠고, 그건 표본을 더 넣는다고 잡히는 게 아니었어요.

📊 결과

💡 효과적이었던 것

결론을 채팅으로 받지 않고 파일로 남기게 한 게 제일 컸어요. 표본이 늘 때도 기존 파일을 고치는 대신 새 파일을 만들고 "앞선 판단을 대체한다"를 첫 줄에 적게 했더니, 뭐가 왜 바뀌었는지가 그대로 남았어요.

결론이 바뀌면 이미 만든 것 중에 뭘 되돌려야 하는지 목록으로 뽑게 한 것도 도움이 됐어요. 배경색 하나 바꾸는 줄 알았는데 네 군데였거든요.

영상은 프레임을 뽑아서 넣는 게 훨씬 정확했어요. 영상 파일을 그대로 주면 요약만 나오는데, 프레임 12장을 주니까 색 코드까지 짚어줬어요.

⚠️ 이런 건 아쉬웠어요

2편으로 내린 결론에 "표본이 적어요"라는 표시가 없었어요. 저는 그걸 근거로 배경색까지 정했다가 되돌렸고요. 지금은 분석을 시킬 때 몇 편 기준인지를 문서 맨 위에 적게 하고 있어요.

그리고 클로드는 제가 준 것만 봐요. 파일로 안 넘긴 작업은 없는 셈이 됐고, 초반에 제가 럭셔리 두 편을 먼저 넣은 것 자체가 표본을 기울인 거였어요. 뭘 먼저 주느냐가 결론을 만든다는 걸 이번에 제일 크게 느꼈어요.

📋 따라하려면

1. 작업물을 한 폴더에 모아요. 영상은 프레임을 뽑아두면 분석 정확도가 확 올라가요

2. "내 손버릇 찾아줘"에 "몇 편 기준으로 내린 판단인지 문서 맨 위에 적어줘"를 같이 넣어요

3. 결론은 파일로 받아요. 표본이 늘면 덮어쓰지 말고 새 파일로 대체하게 해요

4. 결론이 바뀌면 이미 만든 것 중 되돌릴 목록을 먼저 뽑아요

5. 나를 한 줄로 정리하는 문장은 마지막에 제 입으로 말해봐요. 근거는 AI가 잘 찾아주는데, 문장의 주어까지 맡기면 제가 지워지더라고요.

내 다음 목표

• 사이트를 공개 배포하고, 폰에서도 작업물을 추가할 수 있는 관리자 화면을 붙일 거예요

• 지금은 작업물을 넣을 때마다 제가 클로드한테 부탁해야 하는데, 그 구조를 없애려고요

¹ 참고한 글 — 최유나, 「합격한 포트폴리오 제작기」 1~3탄

• https://brunch.co.kr/@new-una/22

• https://brunch.co.kr/@new-una/23

• https://brunch.co.kr/@new-una/24