반응형

2026/02/25 2

웹 퍼블리셔를 위한 공통 UI 컴포넌트 설계 순서 (버튼·폼·테이블 기준)

공통 컴포넌트 설계 순서 (버튼/테이블/폼 우선순위)(버튼/테이블/폼 우선순위)고도화 프로젝트에서 공통 컴포넌트를 “예쁘게” 만들기보다 중요한 건 하나다.먼저 만들면 손이 덜 가는 것부터 만든다. 특히 공공기관/관리자 화면은 테이블·폼·버튼이 반복되기 때문에설계 순서가 곧 일정이다. 왜 “순서”가 중요한가? 공통을 늦게 잡으면 이런 일이 생긴다.페이지 20개 만든 뒤 버튼 스타일 전체 수정테이블 줄 간격/정렬 규칙이 페이지마다 달라짐폼 요소(인풋/셀렉트)만 QA 때 전부 걸림결국 “공통 반영”으로 재작업이 발생고도화에서 공통은초반에 고정해야 한다. 결론: 추천 설계 순서1) 버튼 (Button)2) 폼 (Form: input/select/checkbox/radio)3) 테이블 (Table)4) 상태/피..

공통 CSS가 중복되는 이유와 해결법(로드순서/우선순위 실전)

공통 CSS가 중복되는 이유와 해결법(로드 순서 · 우선순위 실전 정리)고도화 프로젝트에서 가장 많이 나오는 말:“왜 여기만 스타일이 다르게 나오지?” 코드는 똑같은데페이지마다 다르게 보이는 경우. 대부분 원인은공통 CSS 중복 + 로드 순서 + 우선순위 충돌이다. 1. 공통 CSS가 중복되는 이유1) 프로젝트가 이어받기식으로 진행됨A업체 → B업체 → C업체공통 파일을 건드리기 무서워서 새로 추가결국 비슷한 버튼 스타일이 3군데 존재2) 페이지 전용 CSS가 공통을 덮어씀/* common.css */.btn { padding: 10px 20px;}/* page.css */.btn { padding: 12px 24px;} → 어디가 이기느냐는 “로드 순서”에 달림.3) !important 남발...

반응형