처음에는 카드 컴포넌트를 간단하게 만들 생각이었습니다. 사용자가 입력한 내용을 카드 안에 문자열로만 출력하는 방식이었습니다. 예를 들어, 카드에 들어갈 내용을 "description"이라는 Prop으로 받아서 출력하면 충분하다고 생각했습니다.const CardBasic = ({ title, description }: { title: string, description: string }) => { return ( {title} {description} );};이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.하지만, 확장성 문제프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐..

회고Componique 프로젝트는 단순한 UI 컴포넌트 개발을 넘어서 다양한 경험을 쌓을 수 있는 기회였습니다. 특히 컴포넌트의 유연성과 확장성을 고려한 설계 과정에서 우리는 많은 것을 배웠습니다. 단순히 작동하는 컴포넌트를 만드는 것이 아니라, 재사용성과 확장성을 고려한 설계를 통해 다양한 상황에서도 쉽게 적용할 수 있도록 하는 것이 중요한 교훈이었습니다.또한, 사용자 경험(UX) 관점에서의 설계의 중요성도 깨달았습니다. 직관적이고 적절한 피드백을 제공할 수 있는 UI 설계를 목표로 사용자 중심의 컴포넌트 디자인에 대해 깊이 고민하게 되었습니다.마지막으로, 시작의 두려움을 극복하는 법에 대해서도 큰 교훈을 얻었습니다. 처음에는 프로젝트의 성공 여부에 대한 의구심이 있었으나, 팀원들과 함께 문제를 해결하..

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

npm 최종 배포Componique 프로젝트는 2024년 9월 20일, npm에 최종 배포되었습니다. 이를 통해 누구나 Componique 라이브러리를 설치하고 사용할 수 있게 되었으며, 다양한 웹사이트와 애플리케이션에서 손쉽게 UI 컴포넌트를 활용할 수 있는 도구가 되었습니다.배포 과정npm 배포는 프로젝트의 마지막 단계에서 진행되었습니다. 배포 전에 모든 코드의 최종 점검을 마친 후, 버그가 없는지 확인하고 프로젝트의 안정성을 최적화한 후 npm에 등록했습니다. 배포 후에도 사용자들의 피드백을 반영하여 지속적으로 업데이트할 예정입니다.Componique 라이브러리의 장점Componique 라이브러리는 다양한 UI 컴포넌트를 제공하여 개발자들이 빠르고 쉽게 웹사이트를 구축할 수 있도록 돕습니다. 배포된..

성능 평가 결과저희 Componique 프로젝트는 성능 최적화를 위한 여러 가지 노력을 기울였고, 그 결과 성능 점수 100점을 달성했습니다. 페이지 로딩 속도와 성능을 최우선으로 고려해 각 컴포넌트의 경량화와 코드 최적화에 집중한 결과입니다. 구체적인 성능 측정 항목으로는 다음과 같은 지표들이 포함되었습니다:First Contentful Paint (FCP): 0.3초사용자에게 페이지의 첫 번째 콘텐츠가 표시되는 시간을 의미하며, 페이지 로딩의 첫 인상에 중요한 요소입니다. 0.3초라는 빠른 속도를 통해 사용자는 페이지 로딩을 거의 느끼지 못할 정도로 빠르게 경험할 수 있습니다.Largest Contentful Paint (LCP): 0.4초페이지의 가장 큰 요소가 완전히 표시되는 시간을 측정합니다. ..

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는 자바스크립트의 정적 타입 언어로, 코드의 안정성과 유지보수성을 높이기 위해 사용했습니다. 프로젝트가 커지면서 발생할 수 있는 타입 관..