본문 바로가기

전체 글

 (373)
Agent Skills에 대하여 # Agent Skills 생성 배경AI 코딩 에이전트로 작업을 하다보면 코딩 에이전트에게 반복적인 작업을 요청하게 될 때가 있다.ex: 테스트코드를 작성할 때는 항상 Jest대신 Vitest로 작성해줘 / 이미지를 추출할 때는 해당 영역을 crop해서 PNG파일로 저장해줘 / 마이그레이션 스크립트를 작성할 때는 항상 롤백 코드도 함께 작성해줘 같은 지시를 반복적으로 한다. ## AGENTS.md에 이런 반복작업에 대해서 적으면 안되나?AGENTS.md, CLAUDE.md같은 경우, 프로젝트 전반에 대한 컨텍스트가 적혀있는 파일이다.따라서 위와 같이 '테스트코드를 작성할 때는 Jest대신 Vitest로 작성해줘'같은 세부 지침까지 적게되면 파일 자체가 너무 길어진다.이 컨텍스트 파일은 매 프롬프트 요청때..
[WIP] Button 형태의 링크 제공 방식 논의 이슈에 대한 공부 내가 참여하고 있는 DaleUI 오픈소스 디자인시스템 프로젝트에서 '버튼 형태의 링크제공방식에 대해 논의한 이슈가 있다.모르는 부분이 있어 공부하고 정리하는 중이다. 웹사이트 작업에서는 일반 Button보다 페이지 이동을 위한 링크를 버튼 형태로 사용하는 경우가 많았습니다. 겉모습은 버튼이더라도 페이지 이동이 목적이라면 SEO와 시맨틱을 고려해 button이 아닌 a 태그나 라우터의 Link를 사용하는 것이 적절합니다. 현재는 Button의 형태를 유지하면서 링크로 사용할 수 있는 방법이 없어, 이를 어떤 방식으로 제공할지 논의하려고 합니다.라우터의 Link : SPA 웹 프레임워크/라이브러리에서 사용하는 '클라이언트 사이드 내비게이션 전용 컴포넌트'예시 (React Router/Next.js/Vue ..
llms.txt 작업과정 # sitemap.xml, robots.txt와의 차이그렇다면 llms.txt와 sitemap.xml, robots.txt와의 차이점은 뭘까? 이전 포스트에도 설명했다시피, llms.txt파일은 '범용 LLM을 위한 웹사이트 안내서'이다.2026.08.04 - [분류 전체보기] - llms.txt이란 - 1 llms.txt이란 - 1현재 DaleUI라는 디자인시스템 오픈소스 프로젝트에 초기멤버로 참여하고 있다.올해 초, 우리 프로젝트 v1이 드디어 마무리 되었고!뒤이어 v2가 시작되었다. 앞으로는 사람이 직접 사용하기 좋을lion284.tistory.com 사실 llms.txt에 대해서 조사를 하면서 'sitemap.xml과 역할이 비슷한 것 같은데 왜 굳이 llms.txt 파일을 따로 두는지' 궁금했..
llms.txt이란 - 1 현재 DaleUI라는 디자인시스템 오픈소스 프로젝트에 초기멤버로 참여하고 있다.올해 초, 우리 프로젝트 v1이 드디어 마무리 되었고!뒤이어 v2가 시작되었다. 앞으로는 사람이 직접 사용하기 좋을 뿐만 아니라, AI 에이전트도 사용하기 좋은 디자인시스템이 되는 것이 더 중요하다고 생각되어,이번 버전의 목표 중 하나로 잡은 것이 바로 우리 디자인시스템의 'AI 에이전트 최적화 및 친화성 확보'이다. 우리 DaleUI같은 신생 디자인시스템은 아직 주요 LLM의 훈련 데이터에 포함되어있지 않아, 아무런 가이드 없이 에이전트에게 맡기면 많은 실수가 나올 수 있다.그래서 이러한 약점들을 보완할 수 있는 도구들이 필요하다. 그 중, 나는 llms.txt 파일생성 및 skill을 정의하는 부분을 맡았다.먼저 llms..
컨텍스트윈도우 관리방법 # 컨텍스트윈도우 관리 방법위 글에서 언급했다시피 비용적인 측면에서, 그리고 제대로 된 답을 얻기 위해서 컨텍스트 윈도우를 잘 관리해야한다.그렇다면 컨텍스트윈도우를 어떻게 관리해야할까? 먼저 컨텍스트윈도우를 관리하려면 토큰을 효율적으로 사용해야한다. ## 토큰을 효율적으로 사용하는 방법1. 프롬프트 최적화 (명확하고 구체적인 프롬프트로 범위 제한)- 단순히 '쇼핑몰 만들어줘' 등 범위를 제한하지않고 프롬프트를 요청하게되면 '배포설정', '테스트코드' 등 불필요한 것까지 다 만든다. => 토큰 소모가 폭발적으로 일어난다. 따라서 프롬프트 요청 시, 범위를 제한하는게 좋다.예를 들어,'간단한 상품 목록 페이지를 만들어줘'- 단일 HTML 파일로만- 상품 3개 하드코딩- 배포/빌드/테스트는 제외- 200줄 ..
토큰(Token), 컨텍스트(Context), 컨텍스트윈도우(Context Window) 요즘 AI에 대해서 공부를 하고 있다.관련 개념을 정리할 겸, 공부를 하면서 글을 작성해보았다. 1. 토큰 (Token)이란?- AI가 데이터를 처리하는 최소 단위 ex: 인간은 '음절'이나 '단어' 단위로 구분해서 처리 반면, AI : '토큰' 단위로 정보를 읽고 처리 즉, 프롬프트를 요청하면 AI는 텍스트를 '토큰'단위로 쪼개서 이해하고 처리한다. 1/ 토큰의 크기토큰의 크기는 고정되어있지 않다.텍스트를 토큰으로 쪼개는 방식(Tokenizer: 토크나이저)은 언어(ex: 영어 or 한국어)마다, 또 AI 모델마다 다르다.ex: (언어) Hello -> 토큰 1개, 안녕하세요 -> 토큰 5개ex: (AI모델) 같은 문장이어도 Claude Fable 5가 Claude Opus 4.5 모델보다 토큰이 3..
Testing Library, 그리고 fireEvent vs userEvent # Testing Library란- UI 컴포넌트를 사용자 중심적으로 테스트하기 위한 경량화된 라이브러리- 주로 웹애플리케이션의 DOM 기반 테스트를 지원- React, Vue, Svelte, Angular 등 다양한 프레임워크 지원 - 철학 : 테스트가 실제 사용자가 애플리케이션을 사용하는 방식과 유사해야..- 웹프론트엔드 테스트에서 사실상 표준으로 자리잡은 라이브러리🔗 Testing Library 사이트 : https://testing-library.com/ Testing Library | Testing LibrarySimple and complete testing utilities that encourage good testing practicestesting-library.com Simple a..
[ Storybook 스터디 5주차 ] [ 테스트 ]# UI 컴포넌트 테스트의 기초무엇이 테스트에 적합할지 알아보자.디자인시스템은 UI 컴포넌트로 구성된다. 각 UI 컴포넌트에는 일련의 입력(속성)들이 주어졌을 때 의도한 외관과 느낌을 설명하는 스토리들이 포함되어 있다.그런 다음 최종 사용자를 위해 브라우저 또는 장치에서 스토리를 렌더링한다. 한 컴포넌트에는 여러 상태가 포함되어있다.상태에 디자인 시스템 컴포넌트의 수를 곱해본다면, 모든 상태를 추적하는 것이 불가능하다는 걸 알 수 있다.그래서 지금 자동테스트를 설정해야한다. # 외관에 대한 시각적 테스트디자인 시스템에는 시각적인 UI 컴포넌트가 포함되어있다.시각적 테스트는 렌더링된 UI의 시각적 측면을 검증한다.시각적 테스트는 일관된 브라우저 환경에서 모든 UI 컴포넌트의 이미지를 캡쳐한다...

티스토리툴바