네이버 앱에서 css가 깨질 땐..!

모바일 웹은 사용하는 기기와 브라우저가 너무 다양하다 보니 전혀 생각지도 못한 이슈가 발생하곤 한다.
어제 작업한 서비스가 모바일 화면에서 이상하다는 이슈가 받아 확인해 보니 네이버 앱 브라우저에서 CSS가 제대로 적용되지 않아보였다.

로고 이미지 크기를 비롯해 css 가 적용되지 않은 화면(좌)과 고통받는 개발자들(우)

최대한 기본적인 CSS만 썼는 데..! 뭔가 이상했다. 설마 하고 검색해 보니 생각보다 많은 개발자들이 고통받고 있었고 네이버 개발자 센터의 응답은 FAQ를 확인하라는 답 밖에 없어 보였다. 마음이 급해서 그런가 FAQ를 뒤적거려도 해결법을 찾기 어려워 보였다.
일단 고통받는 다른 개발자들의 사례들을 보고 있는 데, 네이버 앱이 구버전 크롬엔진을 사용하고 있어서 CSS 중첩 스타일을 비롯해 flex-, flow- 등이 먹히지 않는다란 언급들이 있었다.

 네이버 앱이 구버전 크롬엔진을 사용한다는 것에 대한 어떤 공식적인 출처를 찾진 못했다. 그렇지만 문제 되는 화면에서 CSS 중첩을 평탄화해 주니 스타일이 제대로 적용되는 것을 발견했다. 다행히 flex- 문법 관련해서는 제대로 적용되어 보였다.

 첫 시도로 수작업으로 모든 중첩 스타일을 없앴다. 파일 개수가 많지 않고 중첩된 클래스가 몇 개 되지 않단 점에서 얼마 시간이 소요되지 않을 것 같았다. 그렇지만 공통 입력 컴포넌트는 1) 보통의 경우, 포커스 된 경우, 유효하지 않은 경우 등 케이스가 다양하고 2) 컴포넌트의 구조가 깊은 편이며 3) 그로 인해 4겹까지 중첩이 되어있었는데 4) 모두 평탄화했을 때 의도와 다른 결과가 나오게 되었다. 몇 번 조작해 보니, 깊은 중첩의 경우 서로 영향을 주는 부분을 완벽히 반영해 평탄화하긴 어려워 보였다. 설계 단계부터 CSS에 대해 별다른 고민이 없이 코드를 작성한 점을 반성했고, 당장 모든 평탄화가 제대로 동작하는지 테스트하고 고민할 엄두가 나지 않았기 때문에 빠르게 다음 방법을 (GPT가 대신) 고민해 보았다.

여러 대안 중, CSS 중첩을 지원하지 않는 브라우저를 타깃으로 지원해 주는 플러그인을 통해 CSS 빌드 단계에서 중첩을 없애고 구 버전의 브라우저들이 이해할 수 있는 문법으로 변환해 주도록 하는 방식이 가장 합리적으로 보였다. 적용한 내용을 단계별로 간략하게 아래 나열하겠다. 

 

1. 플러그인 설치

npm install postcss postcss-loader postcss-nested autoprefixer

 

2. postCSS 설정 (postcss.config.js)

PostCSS 플러그인은 postcss-loader를 통해 CSS를 변환할 때 동작하므로, PostCSS 설정 파일(postcss.config.js)을 통해 플러그인을 정의해야 한다. 이때 postcss.config.js 파일이 Webpack이 실행되는 루트 디렉터리에 있어야 한다.

module.exports = {
  plugins: [
    require('postcss-nested'), // 중첩 CSS를 평탄화
    require('autoprefixer')   // 평탄화된 CSS에 브라우저 접두어 추가
  ]
};

 

3. webpack 설정 

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
          'style-loader',    // CSS를 HTML에 삽입
          'css-loader',      // CSS 파일 해석
          'postcss-loader'   // PostCSS 처리
      ]
    }
  ]
}

 

4. package.json 설정

"browserslist": [
    "last 10 versions",
    "> 0.5%",
    "ie >= 9",
    "Android >= 4.4"
]

 

• last 10 versions: 주요 브라우저의 최근 10개 버전을 지원
• > 0.5%: 시장 점유율이 0.5% 이상인 브라우저를 포함
• ie >= 9: 인터넷 익스플로러 9 이상을 포함.
• Android >= 4.4: Android 4.4 이상 브라우저를 지원. Android 기본 브라우저의 구 버전을 포함

 

빌드 및 재배포 이후 네이버 앱에서 정상적으로 보였다. 휴. 
GPT가 없었다면 얼마나 많은 삽질을 했을지...
그리고 네이버 앱 실망이다.

 

 

GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

 

Browserslist

 

postcss-loader

 

postcss-nested