블로그 포스트 제목이나 링크가 너무 길어서 페이지를 어지럽히는 문제가 있으셨던 경험 없으신가요?이럴 때 Tailwind CSS의 overflow-hidden, text-ellipsis, whitespace-nowrap를 사용하면, 긴 텍스트를 한 줄로 깔끔하게 정리하고 "..."으로 표시할 수 있습니다. https://dietisdie.tistory.com/?tasdfyasdfpe=poasdfst&returasdfnURdsfaL=%2Fmasdfanageasdf%2Fposts%2F이렇게 속성을 적용할 경우https://dietisdie.tistory.com/... 이렇게 표시됩니다.1. overflow-hidden내용이 부모 컨테이너의 크기를 넘으면 숨기기 위한 클래스입니다.텍스트가 너무 길어도 화면 밖..

트러블 슈팅: Componique 프로젝트에서의 문제 해결 과정UI 컴포넌트 라이브러리를 개발하면서 다양한 문제들이 발생했습니다. 이번 글에서는 Componique 프로젝트에서 우리가 직면했던 주요 문제들과 그에 대한 해결 방안들을 소개하려고 합니다.1. 컴포넌트 간 일관성 유지 및 재사용성 문제프로젝트 초기에는 각 컴포넌트의 디자인과 동작이 서로 달라서 사용자 경험에 혼란을 줄 수 있다는 문제가 있었습니다. 여러 컴포넌트가 각각 독립적으로 동작하면서 스타일의 일관성이 부족해 사용자 경험이 저하될 위험이 있었죠.해결 방안: 이를 해결하기 위해 Figma를 활용해 명확한 디자인 시스템을 구축했고, Tailwind CSS로 일관된 스타일을 적용했습니다. 또한, 코드 중복을 최소화하면서 컴포넌트 간 재사용성을..

Componique의 주요 기능Componique는 사용자가 웹사이트나 애플리케이션을 더 쉽게 구축할 수 있도록 돕는 UI 컴포넌트 라이브러리입니다. 다양한 UI 컴포넌트를 제공하여, 이를 자유롭게 커스터마이징하고 사용할 수 있는 환경을 제공합니다.다양한 UI 컴포넌트 제공Componique는 Form, Data Display, Feedback, Navigation과 같은 주요 기능별로 약 32가지의 컴포넌트를 제공합니다.이로써 사용자는 자신의 프로젝트에서 필요한 요소들을 빠르게 선택하고 적용할 수 있습니다.Form 컴포넌트: 버튼, 체크박스, 인풋 필드 등으로 사용자 입력을 받는 데 필수적인 요소들입니다.Data Display 컴포넌트: 카드, 캘린더, 캐러셀 등을 포함하여 데이터를 시각적으로 표현할 ..

UI(User Interface) 설계는 사용자가 시스템을 얼마나 쉽고 직관적으로 사용할 수 있느냐에 큰 영향을 미칩니다. Componique 프로젝트에서 UI는 단순하면서도 직관적인 설계를 목표로 하였으며, 이를 통해 사용자의 편리한 접근을 돕고자 했습니다.1. 심플함과 직관성Componique의 UI 설계에서 가장 중요한 두 가지는 심플함과 직관성입니다. 복잡한 인터페이스는 사용자의 피로감을 높이고, 원하는 기능에 대한 접근성을 떨어뜨리기 마련입니다. 그래서 저희는 불필요한 요소를 최대한 배제하고, 핵심 기능만을 시각적으로 드러내는 방식으로 설계하였습니다.메뉴는 기능별로 구분되어 사용자가 필요한 UI 컴포넌트를 빠르게 탐색할 수 있도록 구성되었습니다. 특히 사용자가 탐색에 시간을 낭비하지 않도록, 검..

Componique 프로젝트는 다양한 최신 기술 스택을 바탕으로 UI 컴포넌트 라이브러리를 구축했습니다. 이번 글에서는 이 프로젝트에서 사용한 기술 스택을 하나씩 설명드리겠습니다.1. 개발 프레임워크 및 언어Next.jsComponique의 개발은 Next.js로 이루어졌습니다. Next.js는 React 기반의 프레임워크로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. 이를 통해 SEO에 유리하고, 빠른 페이지 로딩 속도를 유지할 수 있었습니다. 특히 컴포넌트 기반 개발을 통해 코드 재사용성을 극대화했습니다.TypeScriptTypeScript는 자바스크립트의 정적 타입 언어로, 코드의 안정성과 유지보수성을 높이기 위해 사용했습니다. 프로젝트가 커지면서 발생할 수 있는 타입 관..