본문 바로가기

전체 글

 (372)
[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 컴포넌트의 이미지를 캡쳐한다...
[ Storybook 스터디 4주차 ] [디자인 시스템 소개]- 거대 기술기업부터 신생 스타트업까지 회사들은 시간과 비용을 아끼기 위해 UI패턴을 재사용하는 방식 도입 # 다지인 시스템을 왜 사용하는가?재사용이 가능한 사용자 인터페이스는 새로운 개념이 아니다. 스타일가이드, UI키트 및 공유가능한 위젯은 예전부터 존재했다.UI컴포넌트 : 사용자인터페이스를 이루고 있는 조각들의 시각적이고 기능적인 속성을 캡슐화 (like 레고) 디자이너, 개발자 모두 UI 컴포넌트를 다루고 있다.디자인 시스템은 두 분야를 연결하는 다리.조직의 공용 컴포넌트에 대한 '단일한 진실의 원천(source of truth)'이 된다. 프러덕션 디자인 시스템은 UI 컴포넌트와 프런트엔드 인프라구조를 포함해야한다.3가지 기술적 파트- 재사용이 가능한 공용 UI 컴포넌트- ..

티스토리툴바