최근에 npm에 배포한 React 프로젝트에 디자인 시스템을 구축하는데
ChatGPT-4o와 Claude 3.5 Sonnet의 도움을 받았다.
두 AI챗봇이 어떤 답변을 주었는지 비교하며 디자인 시스템 구축 과정의 일부를 기록해보겠다!

AI챗봇을 사용하지 않았다면?

어떻게 구축했을지 생각해보자

1. "디자인 시스템 - 검색하기"
검색창에 "디자인 시스템" 이라는 키워드로 검색한다.
검색된 여러가지 블로그 글과 기업 사이트를 살펴보고 감을 잡는다.

2. "디자인 시스템 적용 사례 - 검색하기"
적용 사례를 보며 고려해야할 점을 살펴보고 적용된 소스코드를 살펴본다.

3. 내 프로젝트에 적용할 내용 정의하기
적당한 정보를 얻었다면 내 프로젝트에 무엇을 어떻게 적용할 것인지 고민하고 구현할 내용을 정의한다.

4. 정의한 내용 구현하기
정의한 내용을 구현한다.

5. 막히는 부분 - 검색하기
구현하다보면 막히거나 고민되는 부분이 생긴다.
그러면 검색하여 정보를얻고 구현하고, 이 과정을 반복한다.

대부분의 사람들은 해당 분야에 대한 지식이 풍부한 사람에게 물어보거나
검색을 통하여 정보를 얻었을 것이다.
2022년 11월 ChatGPT가 출시되기 전까진 말이다.

ChatGPT vs Claude

ChatGPT는 출시 5일만에 100만명이 사용한 AI 챗봇이다.
작년 초까지만 해도 AI 챗봇이 준 답변의 오류가 많아 검증절차를 많이 거쳐야 해서 잘 사용하지 않았다. 하지만 지금은 내 선생님임 🧑‍🏫👍🍀

지금부터 본론으로!
AI 챗봇과 함께 디자인 토큰 만들어보자!

Q1, Q2는 미리 생각했던 질문이고 이후에는 대화하듯 채팅을 이어나갔다.

Q1. 디자인 시스템이 뭐야?

간단한 질문부터 해보았다. 답변의 길이로만 봐도 ChatGPT의 답변이 더 상세하다.
무언가의 정의를 내리는건 ChatGPT가 더 잘 알려주는 것 같다.
(챗지피티 1승 🧔🏻)

Q2. 이 코드에 디자인 시스템 적용해줘!

내가 작성해놓은 코드를 주고 "디자인 시스템을 적용하려고 해 어떻게 하면 좋을지 생각좀 해봐"달라고 하였다.

ChatGPT

Claude

🧔🏻 ChatGPT는 예시 코드를 보여주었고
🧓🏻 Claude는 내 질문 그대로 생각만 해보길래 코드를 짜달라고 하였다.

🧔🏻 ChatGPT는 어떤식으로 진행되는지 필요한 사항을 단계별로 예시 코드를 통해 알려주었다.
🧓🏻 Claude는 고려해야할 사항을 텍스트로 알려주고 구체적인 구현 예시가 필요하시다면 말씀해 달라고 하였다. 그래서 코드를 짜달라고 하니 내가 준 파일을 가지고 디자인 시스템을 바로 적용할 수 있도록 코드를 작성해주었다.

(클로드 호감도 올라감 +1 🧓🏻)
사실 정확한 비교를 위해서는 ChatGPT한테도 코드를 짜달라고 했어야 했는데... Claude의 놀라운 코딩실력을 보고 바로 다음질문을 해버리고 말았다^_^

알려준 내용 요약

ChatGPT

1. 디자인 시스템 설정
2. 컴포넌트 스타일 적용 전,후
3. 공통 컴포넌트화
4. 디자인 시스템 문서화
5. 지속적인 관리 및 업데이트

Claude

1. 테마 시스템 도입
2. 컴포넌트 분리
3. 타입 정의 개선
4. 스타일드 컴포넌트를 사용한 일관된 스타일링
5. 재사용 가능한 작은 컴포넌트 생성

Q3. 브레이크 포인트에서는 어떻게 작업해?

봇들이 작성해준 코드를 보고있는데 반응형일 때 폰트사이즈 바꿔줘야하는데 라는 생각이 들어서 "이건 반응형 홈페이지인데 브레이크포인트에서 어떻게 작업해줘야해?" 라는 질문을 던져보았다.

ChatGPT

Claude

🧔🏻 답변은 둘 다 아주 만족스럽게 해주었다 🧓🏻

Q4. 내가 보내준 내용을 디자인 시스템에 반영해 줘

내가 디자인 토큰에 반영해주고 싶은 키워드를 제시한 다음 "아래의 내용으로 디자인 시스템을 설정해줘" 라고 지시를 내렸다.

ChatGPT

Claude

🧔🏻 ChatGPT는 타이포그래피, 컬러, 텍스트 정렬 및 배경 색상 설정을 나눠서
🧓🏻 Claude는 theme 안에서 타이포그래피, 컬러 등을 분류하여 작성하였다.
(사진엔 담겨있지 않지만 디자인 시스템을 적용한 예시까지 알려주었다.)

⏰ 잠깐! AI 챗봇에 대한 지금까지 나의 생각은?

가독성있게 구조화하여 보여주는건 ChatGPT 🧔🏻
실제 반영하기 좋은 코드를 보여주는건 Claude 🧓🏻

Q5. 지정된 값들을 사용하고싶어

폰트 사이즈나 컬러를 지정된 값들만 사용할 수 있도록 하고싶었다. 그래서 지정된 값들을 보내고 난 아래의 값들을 사용하고싶어 라고 하였다.

ChatGPT

Claude

몇초만에 쫘르르르 작성해준다.

🧔🏻ChatGPT의 변수명(키)이 쫌 길다는 느낌이 든다.
🧓🏻 Clude는 한눈에 들어오고 사용하기 편하겠다는 생각이 들도록 변수명을 지어줬다. Clude가 실제 반영하기 좋은 코드를 작성해준다는게 명확해졌다.
(클로드 호감도 +5)

Q6. fontSize 안에 breakpoint를 넣고싶어

ChatGTP

Claude

👏 브레이크포인트마다 알아서 값을 넣어준다. 👏
어렵지 않은 작업이지만 타이핑하는 속도보다 챗봇 속도가 빠르다.

Q7. 블로그글 작성해줘

ChatGPT!

Claude

코드 외에 글도 작성해달라고 해봤다.
표현방식을 보면 아래와같은 느낌이 난다.
🧔🏻 ChatGPT는 구조적으로 잘 짜여진 , 단계별로 정의된, 보고서 같은
🧓🏻 Claude는 설명을 잘 해주는, 흐름을 알려주는, 사람이 쓴 글 같은

총 정리

나는 궁금한 내용이 있을땐 🧔🏻 ChatGPT, 개발할 땐 🧓🏻 Claude 에 손이간다.
레포트 작성할일이 있다면 🧔🏻 ChatGPT에게 답을 받아 🧓🏻 Claude 에게 수정해달라고 할것이다.
이유는 🧔🏻 ChatGPT 는 핵심 내용을 간파하기 좋은 답변을 주고 🧓 Claude는 읽기 좋은 답변을 주기 때문이다.

그리고 이 글의 주제와 가까운 개발할 땐 무조건 🧓🏻 Claude
내 고민을 덜할 수 있게 코딩해주는 느낌이랄까?
ChatGPT보다 오류가 덜 나고 코드리뷰도 더 꼼꼼하게 해준다.

Claude에는 아티팩트 라는 기능이 있다. 독립적인 문서를 만들어주는 기능이다.
만들어준 아티팩트를 클릭하면 내용을 확인할 수 있고 다운로드 받는것도 가능하다. 또한 구현한 기능을 직접 실행할 수 있는 프리뷰도 제공한다. 이런데 너를 안쓸수가 있겠나?

유튜브나 블로그 보면 좀 더 정확한 답변을 얻기 위해 프롬프트 작성하는 방법이 많이 나와있다. 이름을 정해주고 구체적으로 말하고 행동을 지시하고 예시를 들어주고 맥락을 만들어주고 등등..

나는 단순하게 검색엔진을 대신하는 수단으로 사용한다는 느낌으로 사용해봤다.
검색엔진은 🔎 검색 -> 찾기 -> 정보 였다면
AI 챗봇은 💬 질문 -> 정보 로
"내가 원하는 정보를 찾는 과정"이 사라지고 "원하는 결과만" 빠르게 얻을 수 있게되었다.

AI의 기능을 활용여 디자인 시스템을 구축하니 생산성이 향상되고 시간절약에 많은 도움이 됐다.안쓰면 바보가 되는 느낌이 들었다. 앞으로 AI는 나에게 더 좋은 답변을 줄것이니 나는 이를 잘 받아먹어 업무할 때 활용해야겠다!

ChatGPT는 대화 내용 공유 기능이 있어 공유한다.
https://chatgpt.com/share/d3cb15c8-ba48-4531-b7ab-3cc18706850c

그리하여 완성된 디자인 토큰 🙌

AI 챗봇이 만들어준 코드를 내가 사용하기 편하게 수정하고 완성했다!

export const design = {
  fontFamily: {
    montserrat: "'Montserrat', sans-serif",
    fredoka: "'Fredoka', sans-serif",
    ibmPlexSansKR: "'IBM Plex Sans KR', sans-serif",
    permanentMarker: "'Permanent Marker', cursive",
  },
  fontWeight: {
    light: 300,
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
  fontSize: {
    tit: { default: "6vw", breakpoint: "72px" },
    xxl: { default: "96px", breakpoint: "72px" },
    xl: { default: "72px", breakpoint: "48px" },
    lg: { default: "48px", breakpoint: "36px" },
    md: { default: "36px", breakpoint: "24px" },
    sm: { default: "24px", breakpoint: "20px" },
    xs: { default: "20px", breakpoint: "18px" },
    xxs: { default: "18px", breakpoint: "14px" },
  },
  fontStyle: {
    normal: "normal",
    italic: "italic",
  },
  lineHeight: {
    wide: "150%",
    normal: "120%",
    tight: "100%",
  },
  letterSpacing: {
    tight: "-0.05em",
    normal: "0",
    wide: "0.05em",
  },
  textDecoration: {
    none: "none",
    underline: "underline",
  },
  textTransform: {
    none: "none",
    uppercase: "uppercase",
    lowercase: "lowercase",
  },
  textAlign: {
    left: "left",
    center: "center",
    right: "right",
  },
  whiteSpace: {
    normal: "normal",
    nowrap: "nowrap",
    preWrap: "pre-wrap",
    breakSpace: "break-spaces",
  },
  colors: {
    purple: "#d05fe5",
    deepPurple: "#310591",
    yellow: "#ffe30d",
    lemonYellow: "#f7ff2f",
    green: "#2ea34e",
    lime: "#89de07",
    cyan: "#41e0eb",
    coral: "#f06b67",
    pink: "#ff7896",
    white: "#fff",
    gray100: "#f9f9f9",
    gray200: "#f5f5f5",
    gray300: "#f1f1f1",
    gray400: "#eaeaea",
    gray500: "#ddd",
    gray600: "#aaa",
    gray700: "#666",
    gray800: "#555",
    gray900: "#444",
    blackLight: "#333",
    blackMedium: "#222",
    black: "#111",
  },
  opacities: {
    opaque: 1,
    semiOpaque: 0.8,
    translucent: 0.6,
    semiTransparent: 0.4,
    transparent: 0.2,
    invisible: 0,
  },
};