컴포넌트 NPM 배포 시 레이아웃 깨짐 원인과 해결법 (Reset CSS)

우테코 레벨2 페이먼츠 모듈 미션 중 발견한 현상이다.

 

🦕 문제 상황

 

페이먼츠 모듈 미션에서는 내가 만든 범용적인 모달 컴포넌트를 NPM에 배포하는 기능 요구사항이 있었다.

어떤 건지 궁금하다면 아래 링크 참고 !

https://www.npmjs.com/package/@yeji0214/modal

@yeji0214/modal

 

그런데 입력(prompt) 모달을 개발하면서 이상한 현상을 발견했다.

로컬에서 실행한 레이아웃과 사용하는 쪽에서의 레이아웃이 다르게 보였다.

 

로컬 / 라이브러리 사용 시

 

Storybook에서도 라이브러리를 사용했을 때와 동일한 결과가 나왔다.

 

 

🍮 문제 분석: 브라우저 기본 스타일과 Reset CSS

 

브라우저는 기본 margin/padding을 가지고 있다.

 

아래 예시처럼 div 내부 텍스트는 스타일을 지정하지 않아도 화면 끝에 딱 붙지 않고,

자연스럽게 여백이 생긴 것처럼 보인다.

 

이런 기본 스타일이 개발 중 불편하게 느껴질 때가 있기 때문에,
로컬 개발 환경에는 reset.css를 적용해 기본 여백을 제거해 둔 상태였다.

 

하지만 외부 환경(라이브러리 사용처, Storybook)에는 reset이 적용되어 있지 않아,
기본 브라우저 스타일의 차이로 인해 레이아웃 불일치가 발생한 것이다.

 

 

🧃 해결 방법

 

input 요소의 padding, border, font-size, box-sizing 등의 속성을 명시적으로 초기화해 주었다.

input {
  padding: 0;
  margin: 0;
  border: none;
  font: inherit;
  box-sizing: border-box;
}

명시적으로 초기화하지 않으면, 브라우저마다 스타일이 다르게 적용되는 현상도 발생할 수 있다고 한다. (브라우저마다 제공하는 기본값이 상이하기 때문)

초기화를 해주면 브라우저가 다르더라도 일관된 스타일이 적용된다.

 

 

🦕 그렇다면 reset 없이 개발하는 게 맞을까?

 

결론부터 이야기하면 꼭 그런 것은 아니다.

 

✅ 일반 웹사이트 개발이라면?

 

- 전역 reset이 적용된 상태에서 전체 UI를 내가 통제하므로 문제없음

- 사용자가 보는 화면은 내가 만든 스타일 그대로 보여짐

 

⚠️ NPM 배포/라이브러리라면?

 

- 사용처에서 reset을 적용할지 안 할지 통제할 수 없음

- 따라서 reset에 의존하지 말고, 각 요소에 안전한 초기값을 명시적으로 설정하는 것이 좋음

 

 

🍮 결론

reset은 내부 프로젝트에선 OK, NPM 배포에선 주의할 것
라이브러리는 reset이 없는 환경에서도 일관되게 보이도록 설계되어야 한다.