Page History
| Info |
|---|
최근 펜슬이란 툴을 알게되어 클로드코드와 연합해 기존작성된 투박했던 디자인을 리뉴얼(새로운페이지로 시작) 시도 해보았습니다.
|
사전준비
클로드 코드가 이미 터미널에 준비되어 있고, PencilXClaudeCode 를이용해
펜슬준비
- https://www.pencil.dev/ 다운로드
- 가입과정 거친후
- claude 최초 연동
- 연동과정중 이미 설치되어 있으면 claude 만 입력하면 끝 , claude code 전역에 펜슬 mcp가 연동
| Warning |
|---|
이 과정은 펜슬이 최초 연동되고 확인 되는 과정이여서 이 공간에서 펜슬의 설치공간이기때문에 ... 작업금지 |
펜슬사용 준비환경
- 자신이 익숙한 work space에서 vs code및 다양한 ide내에서 claude를 동일하게 사용하면 됩니다.
- 펜슬을 MCP형태로 이용하며 전역설정을 최초한번 했기에 이후 사용가능합니다.
- 펜슬파일 확장자는 pen으로 .. 자신의 프로젝트 작업공간 하위에 배치시켜 형상관리를 함께하면 됩니다.
- 펜슬에서 new 한후 저장하기
| Info |
|---|
클로드코드에서 펜슬을 소환하려면 펜슬 어플리케이션에서 작업할 pen 파일을 오픈하면 됩니다. -오픈안하고 펜슬 소환시 없다고 실행하라는 내용으뜸 |
기존 디자인
- 첫 메모리가 25.8월
디자인 정의 펜슬파일 배치
...
- 펜슬 : 작업할 news.pen 캔버스 파일을 내 프로젝트 경로 하위에 위치
- 디렉토리는 작업정의 페이지를 구분하는 용도이며 페이지별 규칙이 있다고하면 그에 맞춰서 폴더를 더 생성해 배치해도 무관
...
| Code Block | ||
|---|---|---|
| ||
- 최상단에있는 키워드 검색이 빠졋음 , 키워드 검색을 하는경우 전체지정필터및,기본필터등을 모두 무시하고 검색가능하게 - ui/blog 기능내에 키워드 검색이 있으며 이를 참고 검색 |
검색기능
- 룩앤필을 잘유지해 검색기능도 완성
- 오래된 종이느낌(누리끼리,떼,구겨짐) 등은 안하는게 맞았는가? 이건 디자인툴이 아니라 클코드에게 .js 기능으로 요청해야 하면 프로그래밍 기법으로 만들어 주려나? - 그냥 두는걸로
최종 메모리화,문서화(영문),배포 3개 한꺼번에 수행
- 회사프로젝트면 CICD태우는게 당연하나 리눅스에서 클린빌더(윈도우 수행했기에), 문서화, 스킬메모리화 3개 동시에 수행, 문서화가 만들어지는동안 딜리버리가 될수도 있음
- 배포는 귀찮으니 UI화 시켜 딸깍만들어둠
디자인 정의와 형상관리
- 이제 pen이라는 펜슬 디자인 정의와 형상이 함께관리
- 코드부터 디자인을 뜯어고치는게 아닌 관리가 되기시작한시점 펜슬을 통해 디자인 정의를 먼저 변경필요
출시 - AI Tech를 다루는 뉴욕타임즈같은 느낌의 소식지
- https://mcp.webnori.com/news/ai-tech-now
- 최신뉴스가 디벨롭하면서 메모리 저장을 했기때문에 클로드가 마지막 정리한 내용이 최신 뉴스로 자동등록
NEXT : 앱개발 플랫폼도 적용되는지 후속테스트
IOS/AOS및 윈도우 앱개발인 경우 컴포넌트 UI요소를 xaml와 같이 형식화된 정의 요소를 사용하는경우가 많으며
이경우 웹플랫폼이 아닌 네이티브 OS플랫폼에 호환이 되는지? 후속 체크로
맥개발환경이 주류는 아니여서 윈도우-WPF 로 펜슬과 콜라보 디자인을 시도해보았습니다.