모션 레퍼런스 는 이름을 몰라 요청하기 어려운 움직임을 데모로 보여 주고, 그 이름이 포함된 요청 문장을 복사하게 하는 화면이다. 「부드럽게 나타나게」보다 「스태거」라는 한 단어가 AI 에게 더 정확하게 전달된다는 점에서 출발하였다. 같은 문제는 움직임 밖에도 있다. 「카드를 보기 좋게 늘어놓아 줘」보다 「벤토 그리드」가, 「요즘 느낌으로 세련되게」보다 「
실험실 · 레퍼런스 · 프롬프트 · AI · UI스타일 · 화풍 · 타이포그래피AI와 일하는 개발자의 노트
Claude Code · Codex 같은 AI 도구로 서비스를 만들고 운영하며 남기는 실전 노트입니다. AI 에게 화면 · 그림 · 글꼴을 정확한 이름으로 요청하기 위한 레퍼런스는 실험실에 모았습니다.
실험실 — AI 에게 이름으로 말하기
전체 보기 →「부드럽게」 대신 「스태거」, 「요즘 느낌」 대신 「글래스모피즘」. 움직임 · 배치 · 스타일 · 화풍 · 글꼴의 이름을 데모로 보고, 그 이름이 든 요청 문장을 복사합니다.
대표 글
- 실험실 레퍼런스 확장과 조합 시뮬레이터
모션 레퍼런스 는 이름을 몰라 요청하기 어려운 움직임을 데모로 보여 주고, 그 이름이 포함된 요청 문장을 복사하게 하는 화면이다. 「부드럽게 나타나게」보다 「스태거」라는 한 단어가 AI 에게 더 정확하게 전달된다는 점에서 출발하였다. 같은 문제는 움직임 밖에도 있다. 「카드를 보기 좋게 늘어놓아 줘」보다 「벤토 그리드」가, 「요즘 느낌으로 세련되게」보다 「
최근 글
전체 게시글 18건
이 블로그의 글은 관리자 화면의 마크다운 에디터에서 작성한다. 다만 개발로그 초안은 로컬 저장소의 devlogs/ 폴더에서 먼저 작성하므로, 게시하려면 본문을 에디터에 붙여 넣고 이미지를 하나씩 다시 첨부해야 하였다. 목표는 로컬 마크다운 파일 하나로 이미지까지 포함된 게시글 하나를 생성하는 것 이다. 글 작성 API( POST /api/v1/posts )
API · 블로그 · 자동화 · 스크립트이 블로그는 글을 마크다운으로만 쓴다. 제목, 목록, 코드 블록 정도는 충분했는데 글이 길어지니 아쉬운 게 생겼다. 주의할 점을 눈에 띄게 따로 빼고 싶었고, 사진 아래에 설명을 달고 싶었다. 그래서 쓸 수 있는 구성을 늘렸다. 이 글은 바뀐 문법으로만 썼다. 문법을 늘리기 전에 먼저 고친 게 있다. 지금까지는 관리자 화면에서 쓴 글은 브라우저가, API
마크다운 · 에디터 · 블로그원래 사진에 관심이 많았다. 조리개를 열면 배경이 흐려지고, 셔터를 느리게 하면 잔상이 남는다는 건 글로 읽어도 금방 이해가 된다. 그런데 이건 직접 돌려 봐야 감이 왔다. f/2.8에 1/500초와 f/5.6에 1/125초는 같은 밝기다. 모션 레퍼런스를 만들면서 사진 용어도 같이 정리하다 보니, 이왕이면 값을 직접 바꿔 보면서 사진이 어떻게 달라지는지
사진 · 카메라 · 노출 · 렌즈 · 조명 · 색온도 · 실험실X나 Threads를 보다 보면 연출 이름을 정리한 글이 종종 올라온다. 스크롤하면 카드가 하나씩 떠오르는 건 스태거 , 배경과 앞 그림이 다른 속도로 움직이는 건 패럴랙스 . 이런 식으로 움직임마다 이름을 붙여 둔 글들이다. 볼 때마다 저장은 해 뒀는데, 막상 쓰려고 하면 어디 있는지 못 찾았다. AI한테 화면을 만들어 달라고 할 때도 비슷한 일이 있었다
모션 · 애니메이션 · 프롬프트 · AI · 실험실2nm A20 Pro, 물리적 가변 조리개, 독자 통신 칩셋을 중심으로 살펴본 기술적 차이와 실질적인 기기 변경 가치 스마트폰 하드웨어 기술이 고도화되면서 플래그십 기기의 세대교체는 단순한 벤치마크 점수 경쟁을 넘어, 내부 아키텍처와 사용자 경험의 질적 전환을 요구하고 있습니다. 아이폰 17 프로가 전 화각 4,800만 화소 센서 정렬과 알루미늄 유니바디
아이폰18프로 · 아이폰17프로 · A20Pro · Apple · 스마트폰 · iPhone프론트엔드를 Vite + React SPA에서 Next.js 16(App Router) SSR로 전면 전환 했다. 하루 안에 범위 산정 → 구현 → 운영 배포까지 완료했다. 기존 구조는 SPA의 SEO 한계를 백엔드 프리렌더 계층으로 메꾸고 있었다. FastAPI가 빌드 산출물 index.html 을 읽어 SEO 마커 블록을 글별 OG/JSON-LD/본문으
NextJS · SSR · SEO · 마이그레이션 · nginx · FastAPI행사 참여자 관리 서비스의 작성자(관리자) 화면을 손봤다. 처음에는 개별 요청을 하나씩 처리하는 흐름이었다 — 등록 화면 상단 이미지 배치, 이벤트 상세의 진행/종료 버튼 위치, 참여자 목록 표시 방식. 그러다 마지막에 "작성자 화면들의 넓이나 디자인 통합" 이라는 큰 주제로 넘어갔다. 앞의 작은 요청들이 사실 같은 문제의 증상이었다. 화면마다 폭도 제목도
디자인시스템 · React · FastAPI · TDD · 리팩터링사내 업무관리 웹 서비스의 칸반 영역을 이어서 작업했다. 전 세션이 중간에 끊겨 회귀 테스트가 커밋되지 않은 채 남아 있었고, 설계 문서의 적용 순서 중 6단계 하나만 "보류" 상태였다. 시작점은 단순했다. 남은 6단계를 끝내고, 데이터를 정리하고, 사용자가 실제로 써보며 발견한 문제를 잡는 것. 결과적으로 드래그 정렬이 겉으로만 동작하고 있었다는 사실 을
칸반 · TDD · React · Vitest · 드래그앤드롭