모든 태그
태그

design system 기술 블로그 글

design system 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.

전체 24최신 20개 표시
홈에서 필터

최신 게시글

20개 표시

프론트엔드

리멤버 iOS의 SwiftUI 도입기 — 허들을 하나씩 넘기며

오래된 UIKit iOS 앱에 SwiftUI를 단계적으로 도입한 과정을 소개했습니다. 위젯부터 셀 임베딩, 디자인 시스템, 재사용 문제 해결까지 허들을 하나씩 넘겼습니다.

#iOS#SwiftUI#UIKit
5300

기타

AI가 실행을 맡는 시대, 디자이너의 경쟁력

AI가 실행을 맡는 시대에 디자이너의 역할을 문제 발견과 판단, 시스템 설계로 재정의했습니다. Taste와 Judgement를 키우고 디자인 시스템을 AI 오케스트레이션의 기반으로 삼아야 한다고 설명했습니다.

#UI/UX#design system#prompt
000

AI

The Flip

AI가 디자인을 대신 만들어주는 것이 아니라, AI가 쓸 디자인 시스템을 설계하는 관점입니다. 브랜드 맥락과 인터랙션 규칙을 구조화해 에이전트가 바로 조합하고 실행할 수 있게 만들었습니다.

#design system#Agent#UI/UX
2000

프론트엔드

쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)

쏘카 디자인 시스템 2.0을 시스템 관점에서 설계하고 운영한 과정을 정리했습니다. Figma 연동과 직군 합의를 통해 디자인-개발 흐름과 품질 관리 체계를 강화했습니다.

#Figma#UI/UX#design system
9300

프론트엔드

디자인 시스템 다시 생각해보기

디자인 시스템을 통제보다 제품의 관점에서 다시 바라본 글입니다. Flat과 Compound API를 함께 제공하는 하이브리드 전략으로 확장성과 사용성을 균형 있게 다루었습니다.

#design system#API#React
19100

기타

여기어때 비주얼 에셋, 새롭게 정의하다

여기어때가 브랜드 일관성과 활용성을 높이기 위해 비주얼 에셋 체계를 새로 정리한 사례를 소개했습니다. 2D·3D 원칙, UT 검증, 검색성과 네이밍 개선까지 함께 다뤘습니다.

#UI/UX#design system#검색
6200

프론트엔드

[디자인 시스템 어떻게 만들었어요?(2)] Radix Primitives와 Panda CSS로 유연하고 단단한 컴포넌트 만들기

Radix Primitives로 접근성과 확장성을 확보하고, Panda CSS로 상태 기반 스타일링을 선언적으로 구성했습니다. 또한 styled-components의 한계를 고려해 Zero-runtime CSS-in-TS로 전환하고 토큰 배포 전략도 정비했습니다.

#Radix Primitives#Panda CSS#styled-components
8700

기타

“데이터로 문제를 정의하고, 협업으로 해결해요”

미리디 프로덕트 디자인팀의 데이터 기반 문제 정의와 협업 중심 일하는 방식을 소개했습니다. 실제 사례와 함께 디자인 시스템, 피드백 문화, 실험적 개선 과정을 보여주었습니다.

#UI/UX#데이터 분석#design system
1300

프론트엔드

[Syrup 디자인 시스템] 개발: UX에서 FE로의 효과적인 핸드오프

디자인 시스템을 통해 UX와 FE 간 Hand-off를 표준화하고 협업 효율을 높인 사례를 설명했습니다. Figma, Token, Storybook, NPM을 연결해 일관성과 재사용성을 강화하는 과정도 다뤘습니다.

#Design System#Storybook#Figma
3000

프론트엔드

Syrup Design System 개발 : UX에서 Front-End로의 효과적인 Hand-off

Syrup Design System은 UX와 프론트엔드를 하나의 기준으로 연결해 Hand-off 효율을 높였습니다. Storybook, Token, NPM 배포를 통해 일관성과 재사용성을 강화했습니다.

#Design System#UI/UX#Storybook
4500

프론트엔드

[DAN 24] 데이터 기반으로 지속 성장이 가능한 네이버 검색 FE 시스템 구축하기

네이버 검색 FE 시스템의 반복 작업과 UI 중복, 느린 피드백 문제를 해결하기 위한 구조를 정리했습니다. 서버 주도 UI, 디자인 시스템, 데이터 기반 개선과 Design To Code 자동화를 함께 소개했습니다.

#MSA#서버 주도 UI#design system
4000

프론트엔드

3단계로 완성하는 유연한 디자인 시스템

디자이너와 개발자의 리소스 관리를 일원화하기 위해 3단계 토큰 기반 디자인 시스템을 구축했습니다. Figma와 코드, Storybook을 연결해 테마 전환과 컴포넌트 커스터마이징을 유연하게 운영했습니다.

#design system#Figma#Storybook
3600

프론트엔드

Part 1. 여기어때 디자인 시스템 기반 커스텀 SnackBar 개발기

여기어때 디자인 시스템 YDS 6.0 기반 커스텀 SnackBar 개발 과정을 소개했습니다. 상태 관리, 애니메이션, 드래그 제스처를 통합해 재사용성과 확장성을 높였습니다.

#Android#Jetpack Compose#UI/UX
2900

프론트엔드

프론트엔드팀의 디자인 시스템 재구축기

여러 지면에서 따로 관리되던 상품 카드 컴포넌트를 일원화할 필요가 있었습니다. 단순 리팩토링을 넘어 디자인 시스템 재구축으로 통합 관리 기반을 마련했습니다.

#UI/UX#컴포넌트#design system
5100

프론트엔드

올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!

올리브영 서비스용 디자인 시스템을 Storybook과 Emotion으로 구축한 과정을 소개했습니다. 전역 스타일, 상태별 컴포넌트 문서화, 패키지 배포와 서비스 적용 방법을 다뤘습니다.

#React#TypeScript#storybook
3200

기타

QueryPie와 Figma, 딱 맞아떨어지는 협업의 정석

Figma 도입 전의 협업 비효율과 그로 인한 문제를 정리하고, 쿼리파이의 실시간 협업 프로세스를 소개했습니다. 또한 Figma가 기획부터 QA까지 전 단계에서 생산성과 커뮤니케이션을 높이는 이유를 설명했습니다.

#Figma#UI/UX#design system
200

프론트엔드

디자인 시스템 #2 : SwiftUI를 활용한 BottomSheet 제작기-1

SwiftUI의 `sheet`와 `presentationDetent`를 활용해 BottomSheet를 구현한 경험을 정리했습니다. 동적 높이와 확장형 시트, 커스텀 배경을 위한 인터페이스 설계 방향을 소개했습니다.

#SwiftUI#iOS#design system
3700

프론트엔드

비효율이 있는 곳엔 플랫폼 디자이너가 있다

은행 문자 속 ‘자동이체’ 표현으로 생기던 오해와 문의를 줄이기 위해 안내 문구와 화면 구성을 개선했습니다. 그 결과 월평균 문의가 3,173건에서 446건으로 크게 감소했습니다.

#UI/UX#design system#customer support
1400

프론트엔드

OLEA? Storybook을 활용한 올리브영의 디자인 시스템!

올리브영은 BO 공통화를 위해 Vue와 Ant Design Vue, Storybook 기반 디자인 시스템 OLEA를 구축했습니다. GitHub Packages 배포로 내부 개발자들이 일관된 컴포넌트를 쉽게 재사용하도록 만들었습니다.

#Vue#Storybook#design system
6100

기타

디자인 조직이 성장할수록 필요한 일

디자인 조직이 커지며 생기는 비효율을 Design Ops TF로 개선한 사례를 소개했습니다. 피그마 규칙 통일, 스펙 가이드라인, 학습 프로그램으로 협업과 업무 효율을 높였습니다.

#DesignOps#UI/UX#Figma
2800