기존 디자인


디자인 정의 펜슬파일 배치



클로드 코드 실행



디자인 초안완성


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

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




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

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


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

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

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



컨텐츠 디자인요청

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



카테고리 디자인 요청

카테고리를 누르면 (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 : 연결된 메모리 표시 




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

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


디자인분석


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


구동결과


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

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



검색기능


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


디자인 정의와 형상관리


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


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

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

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

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