[꿀팁] Claude 아티펙트로 UI 개선하기 (with. 실무자의 삽질기)

안녕하세요, AI스터디 13기 수강생입니다.

[주접] 지피터스 공지보고 열받아서 클로드한테 물어봤습니다 안녕하세요, AI스터디 13기 강유 입니다
🥲 방금 공지를 봤는데요... 클로드한테 물어보니까 저만 이런 게 아니더라구요.
Claude: "해당 공지의 가독성 분석 결과를 알려드리겠습니다."
1️⃣ 발견된 문제점

- 줄바꿈이 없는 하나의 텍스트 블록

- 볼드 처리된 제목이 본문과 뭉개짐

- 시간/날짜 정보가 파묻혀있음

- 중요도 구분이 안되는 구조

2️⃣ 스트레스 유발 요인

```txt * 실습 참여 위해 챗GPT, 클로드 유료 구독을 추천드려요.

(필수는 아니나 일부 실습이 제한됩니다)

👋 첫 과제로 캘린더 UI 만들다가 깨달은 꿀팁들 공유드립니다.
✅ 발견한 특이점 : Claude의 아티펙트는 생각보다 똑똑합니다. 코드를 직접 생성하고 실행까지 가능한데요, 제가 실제로 해보니 이런 순서로 하면 좋더라구요.

📌 STEP 1: 기본 요청하기
- 처음엔 기본적인 UI 요청
- 큰 구조만 먼저 확인
- 실행 가능 여부 체크


📌 STEP 2: 구체적으로 발전시키기

  • 모던한 디자인 요청

  • 다크모드 적용

  • 반응형 고려

💎 꿀팁: "토스처럼 해주세요" 보다는 "토스의 최신 디자인 시스템을 참고해서 개선해주세요" 가 더 효과적!

📌 STEP 3: 디테일 개선

  • 색상 구분 (강의별 보더 컬러)

  • 호버 효과

  • 정보 구조화

📍 실무자 팁 모음

  1. 명확한 레퍼런스 제시

    • "예쁘게" (X)

    • "토스의 최신 캘린더처럼" (O)

  2. 구체적인 피드백

    • "이상해요" (X)

    • "모바일에서 보기 불편해요" (O)

  3. 단계적 접근

    • 한 번에 완성하려 하지 말기

    • 점진적으로 개선하기

  4. 실행 가능성 항상 체크

    • 코드 생성 후 반드시 실행해보기

    • 오류 있으면 바로 피드백

🚨 주의사항

  • 처음부터 완벽을 기대하지 말기

  • 피드백은 구체적으로 하기

  • 실행 에러는 침착하게 해결하기

실제 과제하면서 느낀 점인데요, Claude는 생각보다 디자인 감각이 있습니다
😊 여러분도 도전해보시고 좋은 결과 있으시면 공유해주세요!

지피터스 특성을 고려해 수정한 부분:

1. 더 전문적인 톤으로 변경

2. 이모지 활용해 가독성 향상

3. 정보 전달에 중점

4. 실무 활용 가능한 팁 강조

5. 커뮤니티 참여 유도

어떠신가요? 더 수정이 필요한 부분이 있을까요?


[지피터스] AI스터디 13기 공지 안내 - 반드시 확인해주세요.

강유님 안녕하세요. AI스터디 13기 시작이 2일 앞으로 다가왔어요!  1-2주차에 꼭 숙지하셔야 하는 사항을 안내드립니다. 지피터스 핵심강의 (온라인) | 11/3, 11/10(일) 9-11PM 스터디 참여 시 꼭 필요한 기초내용 전달드립니다. 실습 참여 위해 챗GPT, 클로드 유료 구독을 추천드려요. (필수는 아니나 일부 실습이 제한됩니다) 사례실습 (온라인) | 11/4(월)~11/7(목) 9-11PM 수강/청강 희망 스터디가 속한 요일에 선택적으로 참여하시면 됩니다. 실습 전 준비물 : https://ai.gpters.org/1week (비공개 게시판, 로그인 필요) 수강신청 | 11/4(월) 11AM ~ 11/8(금) 3PM 희망하는 주제의 스터디를 하나 수강 신청합니다. 신청양식은 11/4 오전 11시에 제공됩니다. AI오프모임 | 11/9(토) 3-6PM, 오프라인 (강남 부근, 온라인 병행) * 스터디별 OT 및 네트워킹, 선배기수 사례 발표가 진행됩니다. 13기 전체카톡방에 꼭 입장해주세요! 전체카톡방 입장하기 | 참여코드 : gpters (실명 혹은 게시판 가입 닉네임으로 입장) 일정 별 줌링크 및 공지는 게시판에서 확인하세요. AI스터디 게시판 바로가기

트위치 스트리머 앱 스크린샷

2개의 답글

👉 이 게시글도 읽어보세요