Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

최근 펜슬이란 툴을 알게되어 클로드코드와 연합해 기존작성된 투박했던 디자인을 리뉴얼(새로운페이지로 시작) 시도 해보았습니다.

  • 펜슬디자인 → 디자인 코드 생성 by Claude → 디자인된 코드내에 기능 구현 → 배포

사전준비

클로드 코드가 이미 터미널에 준비되어 있고, PencilXClaudeCode 를이용해

펜슬준비

  • https://www.pencil.dev/ 다운로드
  • 가입과정 거친후
  • claude 최초 연동  
    • 연동과정중 이미 설치되어 있으면 claude 만 입력하면 끝 , claude code 전역에 펜슬 mcp가 연동
Warning

이 과정은 펜슬이 최초 연동되고 확인 되는 과정이여서 이 공간에서 펜슬의 설치공간이기때문에 ... 작업금지


펜슬사용 준비환경

  • 자신이 익숙한 work space에서 vs code및 다양한 ide내에서 claude를 동일하게 사용하면 됩니다. 
    • 펜슬을 MCP형태로 이용하며 전역설정을 최초한번 했기에 이후 사용가능합니다.
  • 펜슬파일 확장자는 pen으로 .. 자신의 프로젝트 작업공간 하위에 배치시켜 형상관리를 함께하면 됩니다.
    • 펜슬에서 new 한후 저장하기
Info

클로드코드에서 펜슬을 소환하려면 펜슬 어플리케이션에서 작업할 pen 파일을 오픈하면 됩니다.

-오픈안하고 펜슬 소환시 없다고 실행하라는 내용으뜸



기존 디자인

Image Modified

  • 첫 메모리가 25.8월 


디자인 정의 펜슬파일 배치

  • 펜슬 : 작업할 news.pen 캔버스 파일을 내 프로젝트 경로 하위에 위치
    • 디렉토리는 작업정의 페이지를 구분하는 용도이며 페이지별 규칙이 있다고하면 그에 맞춰서 폴더를 더 생성해 배치해도 무관

...

출시 - AI Tech를 다루는 뉴욕타임즈같은 느낌의 소식지

Image Added


NEXT : 앱개발 플랫폼도 적용되는지 후속테스트

IOS/AOS및 윈도우 앱개발인 경우 컴포넌트 UI요소를 xaml와 같이 형식화된 정의 요소를 사용하는경우가 많으며

이경우 웹플랫폼이 아닌 네이티브 OS플랫폼에 호환이 되는지? 후속 체크로 

맥개발환경이 주류는 아니여서 윈도우-WPF 로 펜슬과 콜라보 디자인을 시도해보았습니다.