프레이머, 웹플로우 대신 광고 디자이너 포트폴리오, 이제 이렇게 만드세요 1 (구글 스티치 + 클로드 ai )

 

안녕하세요. 오늘은 광고소재·상세페이지 중심 디자이너를 위한 포트폴리오 사이트 제작 시리즈 1편을 시작해보겠습니다.

이번 시리즈는 단순히 웹사이트를 만드는 게 아니라,
👉"성과를 보여주는 포트폴리오를 스티치 + 클로드로 만드는 과정”입니다.

특히 저처럼

• 광고 배너
• 상세페이지
• 카드뉴스 / SNS 콘텐츠

이 많은 경우,
👉 “잘 만든 디자인”보다 “성과가 보이게 만드는 구조”가 훨씬 중요합니다.

---

✔ 왜 이걸 스티치 + 클로드로 만들까?

기존 방식으로 포트폴리오를 만들면:

• 웹플로우 / 프레이머 익혀야 하고
• 코드 수정은 어렵고
• 구조 바꾸는 것도 번거롭고

👉 결국 유지보수가 힘들어집니다.

그래서 이번에는 완전히 다르게 접근했습니다.

• 구글 스티치 → 사이트 구조를 빠르게 생성
• 클로드 → 코드 수정 + UI 디테일 + 구조 개선

즉,

👉 스티치는 “속도”
👉 클로드는 “완성도”

이 조합으로 갑니다.

---

✔ 이번 시리즈 핵심 방향 (중요)

이번 포트폴리오는 이렇게 만듭니다.

👉 단순 갤러리 ❌
👉 성과 중심 스토리형 포트폴리오 ⭕

 

그리고 이걸 AI로 빠르게 만들고, 디자이너 감각으로 다듬는 방식입니다.

---

✔ 우리가 만들 포트폴리오 구조

1. 메인 페이지

• “나는 어떤 성과를 만드는 디자이너인지” 한 줄 정의
• 대표 프로젝트 (성과 중심 카드)
• 신뢰 요소 (경력, 협업사)

---

2. 프로젝트 리스트

여기가 차별화 포인트입니다.

👉 일반적인 썸네일 나열이 아니라

• “전환율 2배 상승 상세페이지”
• “CTR 3.2% 광고 배너”
• “매출 상승 기여 프로젝트”

👉 숫자 + 결과 중심 카드 UI로 구성

이건 스티치로 기본 카드 구조 만들고,
클로드로 텍스트 구조 / UI 강조를 커스터마이징할 예정입니다.

---

3. 프로젝트 상세 페이지 (핵심)

이건 클로드 활용이 핵심입니다.

구성은 이렇게 갑니다:

1. 문제 상황
2. 기존 디자인 (Before)
3. 개선 전략
4. 결과 디자인 (After)
5. 성과 (숫자)

👉 이 흐름을 코드 레벨에서 구조화해야 합니다.

예:

• 섹션 반복 구조
• 이미지 + 텍스트 블록
• 강조 포인트 스타일

👉 이건 클로드로 빠르게 생성 + 수정합니다.

---

✔ 실제 작업 방식 (중요 포인트)

이번 시리즈는 이렇게 진행됩니다.

STEP 1

스티치로 전체 사이트 틀 생성

• 페이지 자동 생성
• 기본 레이아웃 구성
• 빠른 배포 환경 확보

---

STEP 2

클로드로 코드 구조 수정

• 불필요한 코드 제거
• 섹션 구조 재정리
• 컴포넌트화

---

STEP 3

광고 포트폴리오 구조 적용

• Before / After 구조 추가
• 성과 텍스트 강조
• 카드 UI 재설계

---

STEP 4

👉 UI 디테일 & 반응형 개선

• 모바일 최적화
• 마진 / 타이포 정리
• 인터랙션 추가

---

👉 이 흐름으로 가면
“속도 + 퀄리티 + 유지보수”를 동시에 잡을 수 있습니다.

---

✔ 이 방식의 진짜 장점

이 방식이 좋은 이유는 딱 하나입니다.

👉 “디자이너 기준으로 현실적인 방법”

• 코드를 완벽히 몰라도 됨
• 수정은 자연어로 가능
• 빠르게 결과물 확인 가능

그리고 가장 중요한 건

👉 “계속 업데이트할 수 있는 포트폴리오가 된다”

---

✔ 이번 시리즈 목표

이번 시리즈의 목표는 단순합니다.

👉 “광고 잘하는 디자이너로 보이는 포트폴리오 만들기”

• 예쁜 디자인 ❌
• 전략이 보이는 디자인 ⭕
• 성과가 느껴지는 구조 ⭕

이걸 스티치 + 클로드로 구현할 겁니다.

---

✔ 다음 글 예고

다음 글에서는

👉 “광고/상세페이지 포트폴리오 구조를 실제로 설계하는 방법”

을 다룹니다.

• 어떤 프로젝트를 넣어야 하는지
• 성과는 어떻게 표현해야 하는지
• 카드 구조는 어떻게 잡아야 하는지

바로 실전 설계부터 들어갑니다.

---

이번 시리즈는
👉 단순 제작기가 아니라 "내 포트폴리오의 단가를 올리는 구조를 만드는 과정”입니다.

다음 글에서 구조 설계부터 같이 만들어보겠습니다 🙂