프로젝트에서의 상태 관리: 템플릿과 Zustand를 통한 UX기반 설계
·
프로젝트/Componique: UI 컴포넌트 라이브러리
사용자 페이지 설계프로젝트의 사용자 페이지를 기획할 때, 어떤 방식으로 사용자가 페이지를 구성할 수 있도록 할지에 대한 고민이 많았습니다. 처음에는 사용자가 원하는 컴포넌트를 자유롭게 배치해서 자신의 페이지를 만들 수 있게 하는 아이디어를 떠올렸습니다. 하지만 곧 몇 가지 문제가 떠올랐습니다.기술 구현의 복잡성: 사용자가 임의로 컴포넌트를 배치하려면, 드래그 앤 드롭과 같은 복잡한 UI 기능을 구현해야 합니다. 이를 위해서는 고급 기술 스택과 추가적인 시간 및 노력이 필요하게 되는데, 이는 프로젝트의 일정에 부담을 줄 것 같았습니다.페이지 구성의 어려움: 사용자가 자유롭게 배치할 수 있는 만큼, 어떻게 배치해야 좋은 페이지가 될지 모를 가능성도 컸습니다. 특히, 디자인 경험이 없는 사용자는 이 기능을 활..
Atomic 디자인이란?
·
프로젝트/Componique: UI 컴포넌트 라이브러리
Atomic 디자인은 UI 컴포넌트를 설계할 때 작은 단위부터 큰 단위까지 점진적으로 조합해나가는 방법론입니다. 이 방법론은 Brad Frost가 제안한 디자인 시스템으로, 생물학의 원자론에서 착안해 UI 컴포넌트를 마치 원자(atom), 분자(molecule), 유기체(organism)와 같이 작은 구성 요소들로 나누어 관리하는 구조입니다.이 디자인 방법론의 핵심은 재사용성과 확장성을 고려한 컴포넌트 설계를 가능하게 한다는 점입니다. 프로젝트가 커지고 복잡해질수록 단일 컴포넌트가 여러 곳에서 사용될 수 있는데, 이때 Atomic 디자인을 적용하면 코드 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.Atomic 디자인의 5가지 구성 요소Atoms (원자)원자는 더 이상 나눌 수 없는 가장 작은 단위입니다..
Componique 프로젝트: 회고 & 향후 계획
·
프로젝트/Componique: UI 컴포넌트 라이브러리
회고Componique 프로젝트는 단순한 UI 컴포넌트 개발을 넘어서 다양한 경험을 쌓을 수 있는 기회였습니다. 특히 컴포넌트의 유연성과 확장성을 고려한 설계 과정에서 우리는 많은 것을 배웠습니다. 단순히 작동하는 컴포넌트를 만드는 것이 아니라, 재사용성과 확장성을 고려한 설계를 통해 다양한 상황에서도 쉽게 적용할 수 있도록 하는 것이 중요한 교훈이었습니다.또한, 사용자 경험(UX) 관점에서의 설계의 중요성도 깨달았습니다. 직관적이고 적절한 피드백을 제공할 수 있는 UI 설계를 목표로 사용자 중심의 컴포넌트 디자인에 대해 깊이 고민하게 되었습니다.마지막으로, 시작의 두려움을 극복하는 법에 대해서도 큰 교훈을 얻었습니다. 처음에는 프로젝트의 성공 여부에 대한 의구심이 있었으나, 팀원들과 함께 문제를 해결하..
Componique 프로젝트: 트러블 슈팅
·
프로젝트/Componique: UI 컴포넌트 라이브러리
트러블 슈팅: Componique 프로젝트에서의 문제 해결 과정UI 컴포넌트 라이브러리를 개발하면서 다양한 문제들이 발생했습니다. 이번 글에서는 Componique 프로젝트에서 우리가 직면했던 주요 문제들과 그에 대한 해결 방안들을 소개하려고 합니다.1. 컴포넌트 간 일관성 유지 및 재사용성 문제프로젝트 초기에는 각 컴포넌트의 디자인과 동작이 서로 달라서 사용자 경험에 혼란을 줄 수 있다는 문제가 있었습니다. 여러 컴포넌트가 각각 독립적으로 동작하면서 스타일의 일관성이 부족해 사용자 경험이 저하될 위험이 있었죠.해결 방안: 이를 해결하기 위해 Figma를 활용해 명확한 디자인 시스템을 구축했고, Tailwind CSS로 일관된 스타일을 적용했습니다. 또한, 코드 중복을 최소화하면서 컴포넌트 간 재사용성을..
Componique 프로젝트: npm 최종 배포
·
프로젝트/Componique: UI 컴포넌트 라이브러리
npm 최종 배포Componique 프로젝트는 2024년 9월 20일, npm에 최종 배포되었습니다. 이를 통해 누구나 Componique 라이브러리를 설치하고 사용할 수 있게 되었으며, 다양한 웹사이트와 애플리케이션에서 손쉽게 UI 컴포넌트를 활용할 수 있는 도구가 되었습니다.배포 과정npm 배포는 프로젝트의 마지막 단계에서 진행되었습니다. 배포 전에 모든 코드의 최종 점검을 마친 후, 버그가 없는지 확인하고 프로젝트의 안정성을 최적화한 후 npm에 등록했습니다. 배포 후에도 사용자들의 피드백을 반영하여 지속적으로 업데이트할 예정입니다.Componique 라이브러리의 장점Componique 라이브러리는 다양한 UI 컴포넌트를 제공하여 개발자들이 빠르고 쉽게 웹사이트를 구축할 수 있도록 돕습니다. 배포된..
Componique 프로젝트: 주요 기능
·
프로젝트/Componique: UI 컴포넌트 라이브러리
Componique의 주요 기능Componique는 사용자가 웹사이트나 애플리케이션을 더 쉽게 구축할 수 있도록 돕는 UI 컴포넌트 라이브러리입니다. 다양한 UI 컴포넌트를 제공하여, 이를 자유롭게 커스터마이징하고 사용할 수 있는 환경을 제공합니다.다양한 UI 컴포넌트 제공Componique는 Form, Data Display, Feedback, Navigation과 같은 주요 기능별로 약 32가지의 컴포넌트를 제공합니다.이로써 사용자는 자신의 프로젝트에서 필요한 요소들을 빠르게 선택하고 적용할 수 있습니다.Form 컴포넌트: 버튼, 체크박스, 인풋 필드 등으로 사용자 입력을 받는 데 필수적인 요소들입니다.Data Display 컴포넌트: 카드, 캘린더, 캐러셀 등을 포함하여 데이터를 시각적으로 표현할 ..
Componique 프로젝트: UI 컨셉 설명
·
프로젝트/Componique: UI 컴포넌트 라이브러리
UI(User Interface) 설계는 사용자가 시스템을 얼마나 쉽고 직관적으로 사용할 수 있느냐에 큰 영향을 미칩니다. Componique 프로젝트에서 UI는 단순하면서도 직관적인 설계를 목표로 하였으며, 이를 통해 사용자의 편리한 접근을 돕고자 했습니다.1. 심플함과 직관성Componique의 UI 설계에서 가장 중요한 두 가지는 심플함과 직관성입니다. 복잡한 인터페이스는 사용자의 피로감을 높이고, 원하는 기능에 대한 접근성을 떨어뜨리기 마련입니다. 그래서 저희는 불필요한 요소를 최대한 배제하고, 핵심 기능만을 시각적으로 드러내는 방식으로 설계하였습니다.메뉴는 기능별로 구분되어 사용자가 필요한 UI 컴포넌트를 빠르게 탐색할 수 있도록 구성되었습니다. 특히 사용자가 탐색에 시간을 낭비하지 않도록, 검..
Our Team & Role: 김준수
·
카테고리 없음
이번 글에서는 Componique 프로젝트에서 제가 맡은 역할과 작업 내용을 소개드리겠습니다. 저(김준수)는 이 프로젝트에서 다양한 UI 컴포넌트 개발을 주도적으로 진행하고, 문서화 작업과 배포까지 맡았습니다.1. 주요 역할1) 컴포넌트 개발 및 문서화제가 개발한 컴포넌트는 다양합니다. RadioButton, DropDown, Switch, Card, Avatar, ProgressBar, InfiniteScroll, Badge, Tooltip, Rating, Map, DataTable, FormValidation 등 웹페이지나 애플리케이션에 필수적인 컴포넌트를 개발했습니다. 각 컴포넌트의 기능을 다듬고, 문서화를 통해 다른 개발자들이 쉽게 이해할 수 있도록 작성했습니다.2) 메인 페이지 구현프로젝트의 메..