Claude artifacts로 WireFrame 만들고 프로그램에 적용하기

소개

한국어 단어가있는 보라색 배경

한국어 영어회화 웹앱에 기능을 추가하기 위해 앱 화면 UI/UX 필요했고, 이미 클로드 코드로 프로그램이 만들어진 상태에서 수정을 하면서 시행착오를 많이 했고, 이런 과정에서 다시 가장 효율적인 방법을 생각하게 됐음

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

Claude Artifacts 기능을 활용

  • prd.md 파일을 제공하고 앱 화면을 만들어 달라고 요청

iPhone의 한국어 앱 스크린 샷

Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.

한국어 앱의 스크린 샷

이미 만들어진 화면에 페이지 추가

  • 터보 기능을 추가해서 구현,

한국 학습 플랫폼의 스크린 샷

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

  • 추가 가능에 대한 디자인이 필요한 상황에서 어떤 도구를 선택하는 것이 아주 중요하구나

과정 중에 어떤 시행착오를 겪었나요?

  • 이미 만들어진 프로그램에서 항목이나 디자인을 수정하기 어려움

  • Edgets 음성 아이폰 재생 문제, 파이썬 레일웨이 서버로 해결

미 해결 문제

  • ios에서 챕터별 30개 문장 연속 재생 문제

  • 개별 문장 재생은 되는데 연속 재생이 안되는 문제. 해결이 아주 어려움

앞으로의 계획이 있다면 들려주세요.

아티팩트로 만든 와이어프레임을 코드로 복사해서 기존 프로그램에 기능 추가

도움 받은 글 (옵션)

타이칸님이 클로드 아티팩트, 와이어 프레임 기능을 소개해주심, 감솨^^

1
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요