AI

생성형 AI, 클로드(Claude) 완전정복: 기획/디자인 한번에!

텍스트만으로 Figma 디자인까지 만드는 비밀 공개

2024.06.30 | 조회 2.08K |
0
|

메이크그로스

프로덕트의 성장에 대한 이야기

ChatGPT, Claude, Google Gemini 등 다양한 생성형 AI 서비스들이 등장하고 있습니다. 그중에서 대규모 언어 모델(LLM)을 기반으로 하는 생성형 AI의 발전은 혁명적인 변화를 가져올 것으로 예상되고 있습니다.  인터넷과 모바일의 등장 이후에, 머신러닝이 등장했지만, 실생활에서 머신러닝을 통한 변화를 체감하긴 어려웠습니다.

하지만, 생성형 AI는 앞선 인터넷, 모바일의 등장보다도 더 큰 경제적, 사회적 변화를 불러올 것으로 예상됩니다.

생성형 AI를 통해서 우리의 일자리는 어떻게 변화하게 될까요?

업무/직종 중에서 콜센터/CS/CX라 불리는 직종은 앞으로 없어질 가능성이 매우 높은 분야입니다. 

클로드로 디자인하기
클로드로 디자인하기
  1. 생성형 AI의 정보 처리 능력은 엄청납니다. 기존에 일주일 이상 걸리던 CS 월간리포트 업무를 10초 내로 결과를 제공합니다. 이렇다면 우리는 리소스를 조정할 수 밖에 없습니다. AI를 통해서 CS 탐색 시간, 분석하고 이해하는 시간을 줄이고, 좀더 전략과 기획에 집중할 수 있습니다.
  2. 쉬지 않고 (24/7) 서비스를 제공할 수 있어요. 예를 들면, 기존에 사람이 진행하던 CS는 오전 9시부터 오후 5시까지, 그리고 점심에 휴식 시간이 있었습니다. 하지만 AI 봇은 쉬지 않고 고객 문의에 응답할 수 있습니다. 어떻게 경쟁할 수 있을까요? CS뿐만 아니라 반복적인 업무와 업종은 아주 빠르게 사라질 수 밖에 없습니다.
  3. 일관된 서비스 품질의 보장이 가능해져요. 사람이 담당하던 대인 업무는 감정과 컨디션에 따라 서비스 품질이 달라지기도 합니다. 비대면 대인 업무는 이제 AI를 통해서 감정이나 컨디션에 좌우되지 않는 일관된 서비스를 제공할 수 있습니다. 대면 대인 업무도 곧 영향을 받을 수 밖에 없고, 서비스 직종도 큰 변화를 맞게 될 수 있습니다. 
  4. 비용 효율성은 너무나 좋습니다. 기본적인 업무, 반복적인 업무를 AI가 처리함으로써 인건비를 절감할 수 있습니다. 예를 들어 CS 대응 직원 20명 쓰는 것보다 생성형 AI 연동하여 생성AI 프롬프트를 관리하는 운영자 1명으로 대체하는 것입니다. 비용 절감은 90% 이상 할 수 있게 됩니다.

생성형 AI를 잘 이해하고 잘 사용하는 사람 VS. 생성형 AI를 전혀 모르는 사람 

  • 이 둘 중 누가 직장/직업을 지킬 수 있을까요? '폭풍이 오는 것을 대비하는 사람'과 '폭풍이 오는 것을 대비하지 않는 사람'이라고 비유하면 더 명확해집니다. 

생성형 AI 뭐가 있나요? 클로드와 ChatGPT 뭐가 더 낫나요?

Claude vs ChatGPT
Claude vs ChatGPT
  • ChatGPT, 클로드(Claude), Google Gemini 등 다양한 생성형 AI가 존재합니다. 그중에서 꼭 써야 하는 생성형 AI는 클로드(Claude)입니다. 24년 6월 30일 기준, Claude는 Claude 3.5 Sonnet 모델이 최신 모델이고, ChatGPT는 ChatGPT-4o가 최신 모델인데요.
  • 위 모델의 비교 점수를 보면 아래와 같이 전반적인 평가가 모두 클로드의 압승입니다.
  • 정성적인 평가를 들어봐도 클로드, ChatGPT를 모두 써본 사람들 모두 클로드의 답변의 정확도와 세심함에 놀랍니다.
  • 이렇게 압도적인 클로드는 누가 왜 만들었을까요? 

클로드는 누가 만들었나요?

클로드의 창업가, 다리오 아모데이
클로드의 창업가, 다리오 아모데이
  • 클로드 (Claude.ai)는 앤쓰로픽에서 만든 생성형 AI 서비스입니다.
  • 앤쓰로픽은 2021년에 설립된 미국의 인공지능 스타트업이에요.
  • 다리오 아모데이가 공동창업했어요. 다리오 아모데이를 포함한 공동창업자들은 OpenAI 출신 연구원들입니다. OpenAI는 ChatGPT를 만든 회사입니다. 특히 다리오 아모데이는 OpenAI의 공동 창립자였습니다. 다리오 아모데이는 OpenAI에서 4년 이상 근무했으며, 그 전에는 구글에서 주로 "AI 윤리" 관련 업무를 담당했습니다. 
  • 이런 배경으로 앤쓰로픽은  AI 안전성과 윤리에 중점을 두고 있다고 합니다. 그리고 이런 원칙은 그들이 개발한 Claude AI 모델에도 반영되어 있습니다. 클로드는 ChatGPT와 유사하면서도 더욱 윤리적인 답변을 제공하는 것으로 알려져 있는데요. 클로드가 ChatGPT와 확실히 다른 점이 ”윤리적 AI 프레임워크”라고 합니다. 이 프레임워크는 <유엔 세계인권선언>과 <Apple의 서비스 약관>을 기반으로 만들어진  'AI 헌법' 으로 AI의 안전성과 윤리성을 강조합니다.
  • 이런 윤리성과 안정성을 지키면서도, 현재 앤쓰로픽은 OpenAI에 이어 생성형 인공지능 업체 중 두 번째로 큰 규모의 기업으로 성장했습니다.

"AI 윤리"를 강조하는 서비스로 출발했지만, 24년 6월 기준으로 클로드가 성능과 결과 측면에서도 ChatGPT에 앞서고 있습니다.

 

그럼, 클로드를 사용해야만 하는 이유를 이제 이해하셨지요? 클로드를 사용하는 기본기부터 시작합니다.

 

Claude에서 프롬프트를 작성하는 방법

지난주 말씀드렸던 CRISP-PM 프레임워크를 기반으로 설명드리겠습니다. ChatGPT에서도 잘 동작하지만, 클로드에서 훨씬 더 결과를 잘 내는 프레임워크입니다.

C - Clear (명확성)

  • 목표와 맥락을 명확히 설정하는 것입니다.
  • (목표 설정): "이 글은 프로덕트 매니저의 우선순위 설정에 대한 글이야."

R - Role (역할)

  • AI에게 특정 역할을 부여합니다. 가장 중요한 프롬프트라고 생각합니다.
  • (주어 설정): "나는 프로덕트 매니저로 20년 넘게 일해왔어. 프로덕트 경험이 풍부하고 프로덕트 인사이트가 돋보이게 답변을 해줘"

I - Intent (의도)

  • 프롬프트의 의도을 명시합니다.
  • (의도 설정): "우선순위의 방법론은 구체적이어야 하고 풀어낼 이야기는 최대한 풀어내줘"

S - Specific (구체성)

  • 구체적인 정보와 제약 조건을 제공합니다.
  • (구체성 설정): "글자 수는 1만자 이내로 작성해줘.", "중학생도 이해하기 쉬운 문체로 써줘", "겸손한 말투로 해줘"

P - Process (프로세스)

  • 원하는 output의 형식이나 단계 명시합니다.
  • (프로세스 설정): "최소한 3가지 프레임워크를 제시한 다음, 각각의 장단점을 분석하고 마지막에 프로세스를 그려줘.”

그럼 위 예시의 프롬프트를 종합하면 아래처럼 입력할 수 있습니다.

“이 글은 프로덕트 매니저의 우선순위 설정에 대한 글이야. 나는 프로덕트 매니저로 20년 넘게 일해왔어. 프로덕트 경험이 풍부하고 프로덕트 인사이트가 돋보이게 답변을 해줘

단, 아래 조건에 따라 작성해줘

  1. 우선순위의 방법론은 구체적이어야 하고 풀어낼 이야기는 최대한 풀어내줘
  2. 글자 수는 1만자 이내로 작성해줘
  3. 중학생도 이해하기 쉬운 문체로 써줘
  4. 겸손한 말투로 해줘
  5. "최소한 3가지 프레임워크를 제시한 다음, 각각의 장단점을 분석하고 마지막에 프로세스를 그려줘"

꼭 이런 식으로 사용해보세요. 그냥 한문장으로 물어볼때보다의 클로드의 지식과 세심함에 놀라는 경험을 하실 것입니다.

클로드의 핵심적인 기능: Claude Artifact

  • 클로드를 사용하는 새로운 방법! 24년 6월 21일에 출시한 따끈따근한 기능입니다.
  • Artifact는 사용자가 클로드와 상호작용할 수 있는 방법을 확장하는 새로운 기능인데요.
  • PC화면을 기준으로 좌측에서는 명령어를 입력하고 우측에서는 결과값을 실시간으로 보고, 편집하고, 구축할 수 있는 역동적인 작업이 가능합니다. 이런 구성은 ChatGPT에서도 없습니다.
  • 일종의 "미리보기" 기능입니다. 이는 클로드가 대화형 AI에서 공동 작업 환경으로 진화하고 있는 것을 의미합니다.

클로드를 잘 쓰는 방법은 Artifact를 잘쓰는 겁니다.

  • 클로드에서 기획하여 디자인까지 연결하고, 데이터 분석을 하고, 기술문서를 통해 인터액티브 대시보드까지 만드는 것을 보여드리겠습니다. 이번주에는 기획하고 디자인하는 것을 보여드리겠습니다. 

클로드로 빠르게 기획하고 피그마에 옮기기

  • 클로드를 활용한 신속한 디자인 프로세스와 Figma 연동 가이드를 알려드립니다.
    • 클로드 AI를 활용하면 초기 와이어프레임 제작과 기본 디자인을 빠르고 효율적으로 수행할 수 있습니다. 이 가이드에서는 클로드로 디자인 콘셉트를 생성하고 이를 Figma로 전환하는 프로세스를 단계별로 설명합니다.
    • 클로드에 추가된 Artifact 기능이 가장 중요한 역할을 하게 됩니다. Artifact를 통해서 와이어프레임을 쉽게 만들고 이를 Figma 파일로 전환할 수 있습니다.

첫번째, 기본 기획 요청

  • 먼저 원하는 프로덕트의 기본적인 기능을 정의합니다.
    • 프롬프트: "채용 서비스를 위한 모바일 앱 인터페이스를 디자인해 주세요. 주요 기능은 A, B, C 이고 A는 최상단에 배치하고 아이템은 3개입니다."

두번째, 디자인 세부 조정

  • 기본 디자인을 받은 후, 더 구체적인 스타일 가이드나 참조할 디자인을 제시하여 세부 조정을 요청합니다.
    • 프롬프트
      • "컬러는 주황색이고 아이폰 15 프로에 맞는 해상도로 작업해줘요"
      • 참고하고 싶은 사이트의 이미지를 첨부하고, "“A” 앱의 디자인 스타일을 반영해서 페이지를 업데이트해줘요"
      • "주 색상은 #FF6B6B (밝은 coral 색상)을 사용하고, 배경에는 이 색상을 활용한 부드러운 그라데이션을 적용해주세요. 또한, 각 작업 항목에 중요도를 나타내는 별표 아이콘을 추가해주세요."
제가 슬랙이미지를 첨부하고 받은 업데이트된 디자인
제가 슬랙이미지를 첨부하고 받은 업데이트된 디자인

세번째, 디자인 반복 및 개선

  • 클로드의 응답을 검토하고, 필요한 경우 추가적인 수정이나 개선을 요청합니다. 이 과정을 통해 원하는 디자인에 근접할 때까지 반복합니다.
    • 프롬프트
      • "작업 목록의 가독성을 높이기 위해 각 항목 사이에 구분선을 추가해 주세요. 그리고 완료된 작업은 회색으로 텍스트 색상을 변경하고 취소선을 적용해 주세요."
끌로드로 만들었습니다.
끌로드로 만들었습니다.

네번째, Figma 호환 코드 생성 요청

  • 완성된 디자인을 Figma로 옮기기 위해, Figma에서 직접 사용할 수 있는 형태의 코드를 요청합니다.
    • 프롬프트
      • "방금 디자인한 인터페이스를 Figma에 바로 붙여넣을 수 있는 SVG 코드 형태로 변환해 주세요."
      • "피그마에 붙여넣을 수 있게 만들어줘요"
      • "SVG 파일로 만들어주세요"

다섯번쨰, Figma에 코드 적용

  • Figma를 실행하고 새 프로젝트를 생성합니다.
  • 캔버스에서 우클릭 후 'Paste'를 선택하거나 Cmd+V (Mac) / Ctrl+V (Windows)를 사용하여 코드를 붙여넣습니다.
완성!
완성!

완성입니다.

  • 추가 팁도 대공개!!!
    • 명확하고 구체적인 지시를 제공하세요. 색상 코드, 특정 UI 요소, 레이아웃 선호도 등을 명시하면 더 정확한 결과를 얻을 수 있습니다.
    • 단계적으로 디자인을 발전시키세요. 기본 레이아웃부터 시작하여 점진적으로 세부 사항을 추가하는 것이 효과적입니다.
    • 참조할 만한 기존 디자인이나 스타일 가이드가 있다면 언급하세요. 이는 클로드가 원하는 방향을 이해하는 데 도움이 됩니다.
    • Figma로 전환 후에는 필요에 따라 추가적인 조정과 세부 작업을 수행하세요. 클로드는 기초적인 디자인 콘셉트를 제공하지만, 전문적인 마무리는 Figma에서 하세요.

클로드에 대한 전반적인 이해와 클로드를 활용한 기획과 디자인을 설명드렸습니다. 

  • 이 글이 도움이 되셨다면 구독을 부탁드립니다. 또한 공유를 통해 다른 분들께도 추천해주세요. 댓글로 피드백을 달아주시면,  클로드 사용법  2탄을 진행해보겠습니다. 데이터분석, 논문 분석을 통한 동적인 대시보드 만들기, 시나리오 쓰기 등의 주제가 준비되어 있습니다

 

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

메이크그로스 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !

© 2024 메이크그로스

프로덕트의 성장에 대한 이야기

자주 묻는 질문 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관