Pencil로 TechNews 디자인

사전준비

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

펜슬준비

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

펜슬사용 준비환경

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

기존 디자인

• 첫 메모리가 25.8월 

디자인 정의 펜슬파일 배치

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

클로드 코드 실행

디자인 초안완성

디자인 조정 - 사용할 메뉴구성 조정

페이지의 제목은 Ai Tech New로 하고 ( 더나은 명이 있으면 제안해 조정)
카테고리는 다음과 같이 
Vibe , Claude-code , OpenAI , Architecture , Agentic
구독버튼과 로그인 버튼은 없애

• 단순하게 디자인만 병경하는게 아니라 컨텐츠 내용도 연관내용으로 변경해 룩앤필+톤앤매너 체크까지

디자인 조정 - 컨텐츠는 한글로

메뉴및 타이틀은 영어로 유지
컨텐츠는 한글로 ... 폰트는 다음사이트 참고해 다운받아 적용하고 "NanumMyeongjoYetHangul" 체 사용
https://hangeul.naver.com/fonts/search?f=nanum
font-family: 'NanumMyeongjoYetHangul';

• 컨텐츠의 언어및 폰트에따라 룩앤필이 달라질수 있기때문에 디자인시 중요한 요소일수 있지만...  언어 맞추느라 샘플 컨텐츠 준비하고 내용바꾸는게 엄청난 노가다 
  • 내용을 어디서 긁어왔는지 모르겠지만 최신뉴스에서 당겨온거면 그냥 이대로 출시해도 되지 않을까?  매일 컨텐츠 갱신하고 html 배포하고 하루에한번만 뉴스만들기

디자인 조정 - 이미지제거 질감조정

메모리의 컨텐츠가 이미지는 없기때문에 제거요청
-메모리 연관 이미지 생성을 별도 분리해 하게되면 이미지를 가진 뉴스컨텐츠가 될수도 있겠지만 제거

신문지 같은 질감을 적용해죠
종이가 약간 구겨진듯한 느낌도 - 가시성은 유지하고

• 종이느낌나게 하고자 누리끼리 ,종이에떼 등 다양한걸 요구하고....  구현시 효과는 노트에 적어달라고 해둠  - 디자인이 산으로 가고 있나 싶기도 하지만 우선 진행

컨텐츠 디자인요청

이제 기사를 클릭했을때 컨텐츠를 보는 컨텐츠 페이지를 디자인해죠

카테고리 디자인 요청

카테고리를 누르면 (ex> Vive) 관련된 카테고리 포함내용이 최신순으로 나열됨 인피니티 스크롤로 탐색용이하게 .. 프리뷰 모드로 ..클릭하면 기존작성된 상세로 진입하는 구로임 .. 카테고리 뷰 디자인해죠

클로드 작업지침

디자인과 채워질 컨텐츠와 연동을 이미 머릿속에서 계산하고 있었기때문에 
디자인이 다될때까지 멍때리는게 아니라... 채워질요소를 디자인 요소와 맵핑해 구현체를 프롬프팅
- 처음사용해보는 방식이라 스크린샷뜨고 정리해가며 동시개발중 ( 설명가능 이 내용을 만드는것에 시간을 더 써게되는듯 - AI작업은 빠르게 종료됨

# 추가하고자하는  기능
- news/ai-tech-now : AI Tech Now 뉴스페이지
  - 이페이지는 기존사용하는 메뉴를 제공할 필요없습니다. 디자인된 페이지가 나올수있도록 적용
  - 비로그인 기반으로 접근할수 있습니다. 반응형으로 적용해주세요
- 검색필터 설명
  - 키워드 검색은 : ui/blog Search기능과 동일, 이 기능을 참고해 메모리를 탐색 표시하는방법을 먼저 체크
  - 기본필터 : 하위에 카테고리가 있습니다. 카테고리 분류는 안되어 있어서 키워드 기준으로 카테고리화 
    - ex> Vibe : "vive" or "Vibes" or "바이브"  : 한글도 포함 이러한 패턴으로 
      - 전체 : ("vive" or "Vibes" or "바이브") and ("claude code" or "claude-code" or "클로드" )....... 지원되는 카테고리 전체대상입니다.  
- UI : Pencil/news.pen 의 디자인을 적용합니다. 채워질 컨텐츠는 다음을 이용해 연동(UI순서에 맞춰 요청사항을 정리했습니다.)
- 카테고리 - 카테고리를 클릭시 지침에의한 필터와 , 카테고리 펜슬디자인을 참고합니다.
 - 헤드라인 
   - 헤드라인 컨텐츠 : 최근 1개 전체기사  
   - 헤드라인 우측 리스트 : 기본필터내 랜덤 5개 제목만
 - More Top Stories : 최근 2,3,4 3개 프리뷰(최대 5줄) 모드로 표시
 - Opnion : 그대로 유지(데이터 연동없음)
 - Most Popular 
   - 최근 5,6,7,8,9 10개 제목만 표시
 - Editor'S PICK : 최근 11번째꺼 프리뷰로 표시 
 - 본문(Article DetailPage 펜슬정의) : 본문클릭시 해당 메모리를 표시
   - Related Articles : 연결된 메모리 표시 

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

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

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

디자인분석

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

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

구동결과

• 테크 뉴스 완성 

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

- 최상단에있는 키워드 검색이 빠졋음 , 키워드 검색을 하는경우 전체지정필터및,기본필터등을 모두 무시하고 검색가능하게 
 - 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 로 펜슬과 콜라보 디자인을 시도해보았습니다.

• Pencil with WPF