Devlime 재사용 설계로 유지보수성 높이기
공통 로직과 UI 컴포넌트를 재사용 가능하게 분리해 유지보수성과 생산성을 높였습니다. 도메인 값과 화면 표현을 분리하고 다국어 처리도 공통화해 일관성을 확보했습니다.
#재사용성#유지보수성#UI/UX
100
Devlime 재사용 설계로 유지보수성 높이기
태그
컴포넌트 기술 블로그 글
컴포넌트 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 15개최신 15개 표시
관련 태그
최신 게시글
15개 표시
디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화
네이버파이낸셜 디자인시스템과 AI를 활용한 마크업 자동화 경험을 공유한 세션입니다. 디자인 토큰과 Code Connect 등 준비 요소와 실제 개발 적용 시 아쉬운 점을 다뤘습니다.
#디자인 시스템#마크업#컴포넌트
21100
디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화
코드 품질 개선 기법 18편: 함수만 보고 관계는 보지 못한다
중첩 루프를 단순 추출하면 가독성이 크게 좋아지지 않을 수 있음을 설명했습니다. 코드의 의미 단위를 기준으로 재구성해 흐름을 단순하게 만드는 리팩토링을 제안했습니다.
#Kotlin#refactoring#컴포넌트
10300
이구위크 회고
29CM 이구위크의 프론트엔드 구현과 회고를 정리했습니다. 공통 컴포넌트로 큐레이션을 빠르게 만들고 배너 개선, QA, 협업 문서화로 운영 효율을 높였습니다.
#React#컴포넌트#QA
12200
디자인 시스템 이전으로 돌아가실래요? (2)
디자인 시스템 운영의 비효율을 줄이기 위해 버전 관리, 샘플앱 검수, 이슈 트리아지, 가이드 통합을 정리했습니다. 팀 간 사전 공유와 기록 중심의 프로세스로 시스템 신뢰성과 일관성을 높였습니다.
#디자인 시스템#컴포넌트#피그마
1700
무엇이든 물어보세요 (feat. 프론트엔드 코드, 디렉토리 관리) | EP.10 캠프파이어 특집 상
프론트엔드 코드 구조와 추상화, 함수형 프로그래밍에 대한 실무 질문을 다룬 특집이었습니다. 협업과 변경 가능성을 고려한 설계 기준을 토스 개발자들이 공유했습니다.
#컴포넌트#함수형 프로그래밍#유효성 검사
3900
프론트엔드팀의 디자인 시스템 재구축기
여러 지면에서 따로 관리되던 상품 카드 컴포넌트를 일원화할 필요가 있었습니다. 단순 리팩토링을 넘어 디자인 시스템 재구축으로 통합 관리 기반을 마련했습니다.
#UI/UX#컴포넌트#design system
5100
검색 서비스에서 좋은 품질의 코드를 찾는 은하수 항해 기록
검색 서비스 프런트엔드에서 검색 결과 UI를 큐레이션하는 경험을 공유했습니다. PC와 모바일 코드 통합, 리스팅과 컬렉션 구조를 중심으로 좋은 코드의 기준을 고민했습니다.
#UI/UX#React#mobile
1300
QueryPie와 Figma, 딱 맞아떨어지는 협업의 정석
Figma 도입 전의 협업 비효율과 그로 인한 문제를 정리하고, 쿼리파이의 실시간 협업 프로세스를 소개했습니다. 또한 Figma가 기획부터 QA까지 전 단계에서 생산성과 커뮤니케이션을 높이는 이유를 설명했습니다.
#Figma#UI/UX#design system
200
여기어때가 비주얼 일관성을 지키는 방법, 여기어때 룸서비스 ️
여기어때가 브랜드 그래픽 자산을 한곳에 모아 일관되게 쓰도록 ‘룸서비스’ 웹사이트를 구축했습니다. 디자이너가 프레이머로 직접 만들고 운영까지 쉽게 이어가도록 설계했습니다.
#프레이머#웹사이트#UI/UX
1400
제품이 커지면 디자인 시스템 가이드는 어떻게 개선돼야 할까?
디자인 시스템 가이드를 읽는 순서와 구조를 표준화해 이해와 작성 효율을 높인 사례입니다. 접근성과 상세 스펙을 체계화해 신규 합류자도 빠르게 기여할 수 있게 했습니다.
#UI/UX#접근성#디자인 시스템
2100
상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드
온스타일 상품 상세페이지를 정보 구조와 개발 프레임워크까지 함께 개편했습니다. 그 결과 고객당 조회 페이지 수가 25% 늘고 클릭과 주문 지표도 개선했습니다.
#Vue.js#backbone.js#UI/UX
3100
deFign : 네이버 페이의 디자인 시스템을 정의하다
네이버페이는 공통 UI와 디자인 토큰을 기반으로 디자인 시스템 deFign을 구축했습니다.\n컴포넌트 표준화와 스토리북, 인터페이스 조율로 일관성과 개발 효율을 높였습니다.
#design system#Figma#storybook
10100
Vibrant Design System 과 함께하는 크로스 플랫폼 개발기
웹과 앱이 각자 다르게 만들던 UI를 크로스 플랫폼 디자인 시스템으로 통합한 과정을 소개했습니다. 기존 Box 중심 구조의 한계를 해결하기 위해 역할 분리와 플랫폼별 구현 방식을 도입했습니다.
#React Native#디자인 시스템#cross-platform
2100
React 컴포넌트와 추상화
React 컴포넌트를 책임과 도메인 의존성 기준으로 어떻게 추상화할지 설명한 글입니다. 범용 컴포넌트 분리와 합성, 훅 활용을 통해 유연한 구조를 제안했습니다.
#React#컴포넌트#추상화
4400
React 컴포넌트와 추상화