You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »


기존 디자인

첫 메모리가 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연동이 잘되는지 체크
  • 이것잘 성공하면 지금 펜슬과 연동한 방법 스킬로 새롭게 등록요청 예정








  • No labels