웹사이트 개발시 네이버 앱에서 CSS 오류 및 화면 깨질때

웹사이트 하나를 제작을 하고, 크롬, 엣지, 웨일 등의 브라우저에서는 문제가 없는데,

이상하게 네이버 앱에서만 사이트를 들어가면, 화면이 아예 깨지는 현상을 발견해서 이유를 찾아보았다.

 

물어봐도 뭔가 속시원한 답변을 얻지 못하고 찾은 끝에 발견했던 나의 문제들이다.

 

 - CSS 선언 방식의 문제(*.css)

기존(구버전)

.main{
	magin : 1rem;
    
    .item{
    	disply: flex;
    }
}

 

기존에 구역을 좀 더 구별하기 편할 거 같아서 위와 같이 선언을 했었다.

이 방식의 방법으로는 크롬등에서는 크게 문제가 없었으나, 해당 방식으로는 네이버 앱에서는 CSS가 아예 먹히지 않는 불상사가 발생하였다.

 

변경

.main {magin : 1rem;}
.main .item {disply: flex; }

 

많은 분들이 위와 같이 선언하는 걸 보았지만 이유를 몰라서 기존(구버전)처럼 사용했으나, 혹시나 하는 마음에 다른 디자이너분들께서 하시는 방식으로 했더니 잘되는 것을 확인하였다.

 

 

반응형

 

- 지원하지 않는 CSS ( flow / flex-* 등)

구조를 짤 때 flow를 꽤나 많이 사용을 했었는데, flow가 네이버엡에서는 지원하지 않는다.

이 때문에 구조가 틀어졌는데, "flow > block"로 수정을 해서 사용을 했다.

 

그리고 flex 자체는 사용이 가능하지만 flex의 확장 타입들은 사용이 안 되는 케이스가 꽤나 있는 것으로 확인이 된다.

예를 들면 flex-shrink / flex-direction 등 과 같은 것들이 적용이 안되는 거 같다.

 

---

 

나는 크게 위의 2가지 이유로 네이버앱에서만 화면의 브라우저가 깨지는 케이스였다.

깨지는 이유에 대해서 논하면, 네이버 앱에서는 크롬의 구버전을 사용하고 있다고 한다.

 

그래서 구버전의 크롬에서는 지원을 안 해주는 부분으로 인해서 호환이 되지 않아서 발생했었던 문제들이었다.

오류를 수정을 할 때, 네이버 앱에서는 화면을 변경하고 확인하는 게 번거롭기도 하고,

일단 전문 퍼블리셔가 아니었기에 적용을 바로 확인을 해야 했기에 방법이 필요했다.

 

이는 구버전의 크롬을 설치하여서 확인하는 방법으로 개발했었다.

 

구버전 크롬 사용방법은 아래의 글을 참조하기 바란다.

https://hayo-today.tistory.com/45

크롬 구버전 사용하는 방법

 

 

이 모든 오류를 찾고서 든 생각은  퍼블리셔분들이나, 전문 디자이너 분들이라면 잘 아실 수도 있겠지만

CSS는 잘 모르는 사람이었던지라 무작정 만든 웹페이지라 났던 오류 같기도 하다.