그 많던 토큰은 누가 다 먹었을까
에이전트형 도구에서는 프롬프트보다 도구 출력과 대화 기록이 토큰을 더 많이 소모했습니다. 필요한 정보만 사전 필터링하고 작업 범위를 좁히는 방식으로 컨텍스트를 관리해야 했습니다.
#LLM#MCP#Figma
4220
그 많던 토큰은 누가 다 먹었을까
태그
Storybook 기술 블로그 글
Storybook 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 16개최신 16개 표시
관련 태그
최신 게시글
16개 표시
쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
쏘카 디자인 시스템 2.0을 시스템 관점에서 설계하고 운영한 과정을 정리했습니다. Figma 연동과 직군 합의를 통해 디자인-개발 흐름과 품질 관리 체계를 강화했습니다.
#Figma#UI/UX#design system
9300
[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프
디자인 시스템을 통해 UX와 FE 간 Hand-off를 표준화하고 협업 효율을 높인 사례를 설명했습니다. Figma, Token, Storybook, NPM을 연결해 일관성과 재사용성을 강화하는 과정도 다뤘습니다.
#Design System#Storybook#Figma
3000
[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프
Syrup Design System 개발 : UX에서 Front-End로의 효과적인 Hand-off
Syrup Design System은 UX와 프론트엔드를 하나의 기준으로 연결해 Hand-off 효율을 높였습니다. Storybook, Token, NPM 배포를 통해 일관성과 재사용성을 강화했습니다.
#Design System#UI/UX#Storybook
4500
Syrup Design System 개발 : UX에서 Front-End로의 효과적인 Hand-off
3단계로 완성하는 유연한 디자인 시스템
디자이너와 개발자의 리소스 관리를 일원화하기 위해 3단계 토큰 기반 디자인 시스템을 구축했습니다. Figma와 코드, Storybook을 연결해 테마 전환과 컴포넌트 커스터마이징을 유연하게 운영했습니다.
#design system#Figma#Storybook
3600
당신2 9하던 디자인 시스템? 0.5인 리소스로 효율적으로 구축하기
0.5인 리소스로 디자인 시스템을 운영한 사례와 전략을 정리했습니다. 어드민과 대고객 서비스에 서로 다른 도구를 적용하고, 피드백·자동화·히스토리 관리로 운영 효율을 높였습니다.
#UI/UX#디자인패턴#TailwindCSS
9400
퍼블리셔와 개발자 협업을 위한 스토리북 깨짐 방지 방안
퍼블리셔와 개발자 협업에서 스토리북이 깨지는 원인을 분석하고 CIC 패턴으로 역할을 분리했습니다. 스토리북용 props와 실행 환경 분기를 정리해 무결성을 유지했습니다.
#React#Storybook#API
3100
올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
올리브영 서비스용 디자인 시스템을 Storybook과 Emotion으로 구축한 과정을 소개했습니다. 전역 스타일, 상태별 컴포넌트 문서화, 패키지 배포와 서비스 적용 방법을 다뤘습니다.
#React#TypeScript#storybook
3200
OLEA? Storybook을 활용한 올리브영의 디자인 시스템!
올리브영은 BO 공통화를 위해 Vue와 Ant Design Vue, Storybook 기반 디자인 시스템 OLEA를 구축했습니다. GitHub Packages 배포로 내부 개발자들이 일관된 컴포넌트를 쉽게 재사용하도록 만들었습니다.
#Vue#Storybook#design system
6100
쏘카플랜 개편기
쏘카플랜 개편 과정에서 프론트엔드 일정 추정과 QA 대응, 레거시 개선 경험을 정리했습니다. 코로케이션과 WET 원칙으로 복잡한 화면과 도메인 로직을 단계적으로 분리했습니다.
#React#Next.js#TypeScript
3700
deFign : 네이버 페이의 디자인 시스템을 정의하다
네이버페이는 공통 UI와 디자인 토큰을 기반으로 디자인 시스템 deFign을 구축했습니다.\n컴포넌트 표준화와 스토리북, 인터페이스 조율로 일관성과 개발 효율을 높였습니다.
#design system#Figma#storybook
10100
BackstopJS 적용 후기 (Visual Regression Test)
BackstopJS를 스토리북 기반 시각적 회귀 테스트로 운영하며 사이드이펙트 탐지와 문서화를 함께 얻은 사례를 소개했습니다. 또한 PR 코멘트와 develop 머지 후 approve 자동화로 테스트 운영 부담을 줄였습니다.
#BackstopJS#Visual Regression Test#Storybook
2700
BackstopJS 적용 후기 (Visual Regression Test)
프론트엔드 테스트 자동화 전략 - 4. 테스트 환경 구성
프론트엔드 테스트 자동화 전략의 연장선에서 테스트 실행 환경 구성 방법을 다뤘습니다. 설정 파일 중심으로 실제 구성 시 참고할 매뉴얼형 내용입니다.
#test#자동화#프레임워크
2300
Storybook의 MSW mock 구조 개선
Storybook 스토리별로 흩어진 MSW GraphQL mock을 한곳으로 모아 관리하는 구조를 제안했습니다. recast 변환 스크립트로 중복과 누락 문제를 줄이는 마이그레이션 과정도 다뤘습니다.
#Storybook#MSW#GraphQL
1900
스토리북 함께 사용해보기
스토리북을 함께 사용해보며 활용 경험을 소개했습니다. 스토리북의 매력을 짧게 짚어보는 내용입니다.
#Storybook
900
시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
BackstopJS로 시각적 회귀 테스트를 구축한 경험을 정리했습니다. 스토리북과 Docker를 함께 사용해 UI 변경 검증과 운영 안정성을 높였습니다.
#BackstopJS#Docker#Puppeteer
4100
시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)