Page History

사전준비

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

펜슬준비

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

펜슬사용 준비환경

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

기존 디자인

Image Modified

• 첫 메모리가 25.8월 

디자인 정의 펜슬파일 배치

...

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

...

• 첫 펜슬연동 작동 go 
  • 약간의 플랜기능과 스킬 그리고 내가 테스트할테니 너는 스탠바이 , 52번째 지침진행으로 펜슬과는 첫 협업 UI정의를 준수하고 DB연동이 잘되는지 체크
• 이것잘 성공하면 지금 펜슬과 연동한 방법 스킬로 새롭게 등록요청 예정
• 지금까지 작업한 내용 여정 특히 클로드코드와 함께 펜슬 연동해 작업한 가치를 설명하고 메모리화, 펜슬과 관련된 기존메모리도 있을테니 기술참고할것

유닛테스트를 항상 넣는이유?

기본 유닛테스트를 안넣게되는경우  api문제인지 프론트 문제인지 검증시간이 늘어나게 되며 ... 브라우저와 씨름하는 시간이 늘어나게됩니다.

Image Added

디자인분석

Image Added

• 펜슬디자인을 클로드가 해석중

완성 : 펜슬연동 컨텐츠 작성중에 마무리됨

Image Added

구동결과

Image Added

• 테크 뉴스 완성 

검색기능 요청을 빠트려( 클코드가 안한게아니라 요청누락) 추가 요청진행

- 최상단에있는 키워드 검색이 빠졋음 , 키워드 검색을 하는경우 전체지정필터및,기본필터등을 모두 무시하고 검색가능하게 
 - ui/blog 기능내에 키워드 검색이 있으며 이를 참고 검색 

Image Added

검색기능

Image Added

• 룩앤필을 잘유지해 검색기능도 완성
  • 오래된 종이느낌(누리끼리,떼,구겨짐) 등은 안하는게 맞았는가? 이건 디자인툴이 아니라 클코드에게 .js 기능으로 요청해야 하면 프로그래밍 기법으로 만들어 주려나? - 그냥 두는걸로

최종 메모리화,문서화(영문),배포 3개 한꺼번에 수행

Image Added

• 회사프로젝트면 CICD태우는게 당연하나  리눅스에서 클린빌더(윈도우 수행했기에), 문서화, 스킬메모리화 3개 동시에 수행, 문서화가 만들어지는동안 딜리버리가 될수도 있음

Image Added

• 배포는 귀찮으니 UI화 시켜 딸깍만들어둠

디자인 정의와 형상관리

Image Added

• 이제 pen이라는 펜슬 디자인 정의와 형상이 함께관리 
  • 코드부터 디자인을 뜯어고치는게 아닌 관리가 되기시작한시점 펜슬을 통해 디자인 정의를 먼저 변경필요

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

Image Added

• https://mcp.webnori.com/news/ai-tech-now
  • 최신뉴스가 디벨롭하면서 메모리 저장을 했기때문에 클로드가 마지막 정리한 내용이 최신 뉴스로 자동등록 

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

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

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

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

• Pencil with WPF