클로드로 포트폴리오에 넣을 프로젝트 배경 페이지 제작하기

배경 및 목적

지난 OT 때 "클로드 아티팩트로 할 수 있는 모든 것을 낱낱이 파헤쳐보려 합니다!" 라고 했으나

현실은 그저 포폴 만드는 노인이었던 Ming 🥹

나름 스피드가 붙어 파바박 진도를 뽑아내는 것...과는 별개로
페이지에 무언가가 작성된 상태에서 수정하자니 머리가 간헐적 파업에 들어갑니다.

머리도 식힐 겸, 클로드 아티팩트로 포트폴리오 페이지를 만들 수 있을지 시도해보기로 했습니다.

참고 자료

클로드 아티팩트 디자이너급 슬라이드 만들기 스터디장 김승우님의 OT 발표 자료 ദ്ദി

활용 툴

ChatGPT 죅금
Claude
이미지 생성 ai 사이트: Ideogram & Flux

실행 과정

1. 인포그래픽(?) 생성 프롬프트 만들기 (feat. chatGPT 4o)

지난주 OT 때 스터디장님께서 공유해주셨던, 인포그래픽 제작 프롬프트를 사용!
하기에 앞서 제 상황에 더 적합하도록 쬐~끔 가공을 합니다. (잘 했는지는 모르겠구요 흠흠;)

시간이 없었기에 간단히 제 상황, 역할 부여, 요청을 추가하고 공유받은 프롬프트 그대로 이어붙인 다음 chatGPT에게 json 코드로 변경해달라고 했습니다. 아래가 결과입니다.

Q: 왜 json 코드인가요?
A: '라마인덱스로 나만의 LLM 서비스 구현하기' 방에서 줏어들은 바
생성 AI에게 json으로 입력하면 더 잘 알아 듣는다~ 라고 하길래요. ( ̧⸝⸝⍢⸝⸝)ི 헤헤

{
  "context": {
    "description": "저는 PM 직군에 취업하기 위해 포트폴리오를 제작하고 있습니다."
  },
  "role": {
    "description": "당신은 10년 이상의 노련한 PM입니다. 저와 함께 '누가 봐도 내용을 이해할 수 있는' 포트폴리오 작성을 돕습니다."
  },
  "request": {
    "description": "제가 제공하는 프로젝트 정보와 제작해야하는 페이지의 정보를 제공하면, 아티팩트를 활용해서 인포그래픽으로 만드세요.",
    "procedure": [
      "1. 각 내용을 성격이 비슷한 것 끼리 묶으세요.",
      "2. 묶인 내용을 어떤 디자인, 기능의 '컴포넌트'로 표현하면 좋을지 생각하세요.",
      "3. 생각한 컴포넌트의 디자인 5개를 생각하세요 (디자인, 배치, 색상이 각각 다르게).",
      "4. 가장 적절한 컴포넌트 1개를 선택하세요.",
      "5. 컴포넌트의 디자인, 배치에 맞게 컨텐츠 텍스트를 수정하고 적용하세요.",
      "6. 내용이 한눈에 보기 좋게 보이려면 어떤 구조여야 할지 생각하세요.",
      "7. 위와 같은 과정을 거쳐 여러 컴포넌트를 사용하여 인포그래픽을 완성하세요. 위 생각 과정을 사용자에게 모두 보여준 후 react 코드를 생성하세요."
    ]
  }
}

2. 시각화 할 정보 입력

포폴 장표로 만들어야 할 정보를 입력합니다.

배경 정보 (Overview로 입력한 부분): 프로젝트 이해도를 향상시키고자 프로젝트 표지에 작성한 개요 문장을 추가했습니다.
페이지 정보: 포폴 작성을 위해 구성을 분석한 것 중, 제작하려는 파트의 내용을 입력합니다.
- 뭐 좀 있어보이네요. 저도 그냥 남들 한거 따라한 것 뿐입니다. (;´・`)>
프로젝트 정보: 실제로 시각화 될 정보를 입력합니다. 저는 기존에 만든 포폴 ver1,2,3... 에서 내용들을 죽죽 긁어 왔습니다.
추가 질문 요청: 문득 이정도로 충분할 것 같지 않아, 마지막에 추가 정보를 입력하며 부족한 부분을 이실직고(?)하며 이를 위한 질문을 달라고 했습니다.

어떤 정보를 더 추가해야할지 고민하는 시간을 줄일 수 있어 정말 좋았습니다.

성실히 답변을 하고 엔터를 치면, 최초 입력한 프롬프트에 맞춰 실행됩니다.

3. 결과물 확인

스터디장 승우님의 프롬프트에 맞춰 차근차근 분석한 내용을 반환합니다.

(정말 프롬프트 넘 잘 만들어주셨어요 크으)

결과물부터 빠르게 훑어보자면 다음과 같습니다. (물론 에러나 이런저런 과정이 있긴 했습니다만 ㅎ)

제 기준으로는 3차까지 진행되는 과정에서, 활용하는 컴포넌트나 구성 등에 있어 큼지막한 변화는 느끼지 못했습니다.

물론, 디테일한 디자인은 제가 수정하면 된다는 생각에 내용 구성 위주로 피드백을 주긴 했습니다. ㅎㅎ;

1차 결과물 (위 이미지 참고)
피드백:
- '프로젝트 배경'과 '문제 정의' 에 관한 설명이 부실합니다.
- 처음 보는 사람이 추가 정보 없이도 내용을 이해할 수 있는지 점검하세요.
- 여러 페이지로 제작해도 됩니다. 1200*900 사이즈를 1 페이지로 가정하세요.
- 컴포넌트를 수직 나열식으로만 구성하지 마세요.
1.5차 결과물 (4페이지로 나와버렸습니다..ㅎ)
피드백:
- 좋습니다. 하지만 2페이지 이내로 줄이는게 좋겠습니다.
- 프로젝트 배경, 문제 정의, 프로젝트 목표, 차별화 전략 4가지 정보를 페이지 역할에 충실하도록 정보를 재점검 합니다.
- 각 정보별 핵심 한 문장을 추가로 작성해서 강조합니다. 그 외 부연 설명은 필요한 만큼만 작은 글씨로 작성합니다.
2차 결과물
- 프로젝트 배경에 관한 내용이 너무 부실한 것 같았습니다. 갑자기 우리나라가 최고수준입니다! 그래서 뭐 어쩌라고? 싶은 느낌.
- 그래서 PM 관점에서 비판적으로 해당 내용을 분석하라 했고(너무 편하네요), 마음에 드는 내용을 골라 다시 재 시각화하라고 하였습니다.
- 네, 결과가 마음에 들었다는게 아니구요. 난데없이 문제 정의는 사라지고 배경 설명만 엄청 늘었습니다. (안읽어볼 것 같음)
피드백:
- 'OOO의 기회' 는 제거합니다.
- 프로젝트 배경에 문제의 시급성과 사용자 관점이 하나의 섹션으로 인식되도록 합니다.
- 프로젝트 목표의 부연 설명은 제거합니다. 핵심 문장을 시각화하여 더욱 강조
  - 기존 레이아웃을 어지간하면 버리지 못하기에.. 단순히 '시각화' 라고 표현하면, 아이콘을 달아주고 텍스트 박스에 컬러를 추가해줍니다. 하하.
  - 제가 원했던 것은 핵심 키워드를 추출하고 도형을 활용하는 막 그런 시각화였거든요..이런 내용의 피드백을 추가로 제공하고 받은
3차 결과물 입니다.
- 갑자기 circle diagram을 가져와서 몹시 당황했습니다.
- 핵심 키워드 또한, 저는 2개를 생각했는데 4개를 선별했구요.
- 아, 키워드를 좀 선정해줘야겠다 싶어
  아래의 과정을 거쳐 (첫번째는 사실상 의미 없는 내용이었습니다.) 시각화 키워드를 선별하고
  시각화를 했지만 여전히 써클의 저주를 벗어나지 못하길래 빠르게 관뒀습니다.
  (문장 분석 요청 → 시각화 키워드 추출 → 원하는 키워드 선택하여 시각화 재요청)