yunkogong

프로젝트를 진행하다 보면 input UI가 페이지마다 조금씩 다른 문제를 자주 마주하게 된다.width, height, icon 유무, 접근성까지…이런 요소들이 누적되면 유지보수가 어려워지고 디자인 일관성도 쉽게 무너진다.그래서 이번 글에서는 디자인 시스템을 기반으로 한 공통 Input 컴포넌트 설계 방법을 정리해보려고 한다. 1️⃣ Input 컴포넌트의 목적이 컴포넌트는 단순한 input 래퍼가 아니라, 실무에서 바로 쓰기 위한 기준 컴포넌트를 목표로 한다.✅ 설계 목표공통 input UI를 일관된 디자인 시스템으로 관리styled-components 기반으로 유연한 스타일 확장icon이 있을 경우 자동 margin, padding 처리접근성(A11y) 및 자동완성 대응을 위한 id 필수화2️⃣ 왜 ..

⚠️ 문제 상황styled-components에서 스타일 전용 props를 그대로 DOM에 전달하면React가 다음과 같은 경고를 출력합니다.Warning: React does not recognize the 'a' prop on a DOM element. 즉, a 같은 커스텀 props가 HTML 태그에 그대로 전달되어 발생하는 문제입니다.✅ 해결 방법 1 — $prefix 방식 (가장 간단 & 추천)💡 원리$로 시작하는 props는 DOM에 전달되지 않고 styled-components 내부에서만 사용됩니다.🧩 코드 예시const BoxComponent = styled.div` background: ${({ $a }) => ($a ? 'red' : 'blue')};`;📌 장점설정 없이 간단하게..

1. 목적Google Material Symbols 아이콘 사용 시, 폰트 로딩 전 "edit" 텍스트가 잠깐 보이는 깜빡임(FOUT) 현상이 발생합니다.이는 폰트가 늦게 로드될 때 발생하며, 사용자에게 미완성된 UI를 노출하는 문제를 유발합니다.이를 해결하기 위해 폰트 로딩 전 아이콘 숨김 → 로딩 완료 후 표시 전략을 적용했습니다.2. 문제 예시edit네트워크 지연 시 "edit"이라는 글자가 잠시 보인 뒤 아이콘으로 변환FOUT(Font Out-Of-Time) 발생3. 해결 방법(1) MyApp 컴포넌트에서 폰트 로딩 감지_app.tsx의 MyApp 컴포넌트에서 document.fonts.load()로 폰트 로딩 여부를 감지하고, HTML 태그에 클래스를 부여합니다.import { useEffect..

프로젝트 초기, 페이지마다 버튼 색과 폰트 크기가 제각각이어서 매번 디자이너에게 확인하는 일이 반복되었습니다.이런 불필요한 커뮤니케이션과 스타일 불일치를 해결하기 위해 디자인 시스템 도입을 결심하게 되었습니다.1. 목적디자이너와 협업하는 과정에서 스타일 정의가 중복되거나, 컴포넌트별 UI 표현이 달라지는 문제가 있었습니다.이를 해결하고 일관된 UI 스타일을 유지하며 재사용성과 유지보수성을 높이기 위해 디자인 시스템을 도입했습니다.그중에서도 **컬러(Color)**와 **타이포그래피(Typography)**는 프로젝트의 분위기와 브랜드 아이덴티티를 결정짓는 핵심 요소이기에, 가장 먼저 정의하고 적용했습니다.2. 구조디자인 시스템 관련 파일들은 styles/ 디렉토리에 모아 관리했습니다.styles/ ├─..