iframe 내부 웹 페이지의 css가 깨지는 현상

 

노션 embed를 활용해서 Color Picker라는 위젯을 만들다가 한 문제를 발견했다.

평소 PC로 작업을 많이 하니 PC 환경에서만 항상 테스트가 이루어졌는데 우연히 들어간 노션 페이지에서 위젯의 css가 이상한 현상을 발견했다.

 

(좌) 위젯으로 삽입된 색상 선택기 (우) PC 환경의 색상 선택기

 

위젯 내부의 색상 선택기가 둥글게 변해 있었고, text 타입의 input도 모서리가 살짝 둥글게 변했다.

개발자 도구를 열어서 CSS 우선순위가 어떻게 적용되어 있나 보고 싶은데 어플이기 때문에 개발자도구를 열 수가 없었다.

그래서 갖가지 환경을 테스트해봤다.

 

---

문제와 원인 분석

 

우선 크기를 최대한으로 줄인 노션 데스크톱에서는 문제없는 걸 확인할 수 있었다.

 

 

두 번째로는 PC 브라우저로 접속해서 개발자도구의 기기 툴바 전환 기능을 이용해 반응형 모바일 크기로 확인해 봤다.

역시 이상 없음. 그러나 크기가 작아질수록 화면이 깨지는 걸 보니 웹 노션은 반응형을 지원하지 않는가 보다.

 

 

다음으로는 모바일 사파리로 웹 노션을 접속해 봤다. 역시 깨지지 않는다.

하지만 반응형은 적용이 되어있다 :) 크기로 반응형을 구현한 게 아니라 기기 자체를 인식하는 것 같다.

 

---

 

어떻게 해결하지?

처음에 시도해 본 방법은 무작정 input의 id 스타일에 border-radius: 0! important;를 줬다.

하지만 배포하고 살펴봐도 변화는 없었다. 개발자도구를 못 여는 게 이렇게 답답할 줄이야... ㅜ

그냥 한 가지 확신이 드는 건 노션 앱에서 자체적으로 시스템 UI 등의 스타일을 강제 적용하고 있다는 것. 브라우저 통해서 접속할 때는 아무 문제가 없었으니 말이다.

 

해결 방법은 여러 가지가 떠올랐다. 사실 될 때까지 무작정 코드 수정하면 되는 건데 GitHub Pages에 배포를 하고 나서야 노션으로 확인할 수 있었기 때문에 아무 코드나 집어넣을 순 없었다. 그리고 앱 캐시 지우기도 조금 번거로워서 공수가 너무 많이 드는 듯.

자바스크립트를 이용해서 동적으로 스타일을 적용할까? 하는 생각도 했었다. 그렇지만 CSS 우선순위 규칙을 찾아본 결과 !important가 가장 우선이기에 의미는 없을 것 같았고 시도해보지는 않았다.

 

노션의 embed 기능은 iframe을 이용해서 외부 콘텐츠를 로드하는 것 같은데 만약 노션 자체에서 iframe에 대한 스타일을 강제했다면...? 그래도 다른 위젯 같은 걸 보면 안 깨지니 방법은 있는 것 같다.

 

---

답은 간단했다.

의외로 간단한 CSS reset 코드를 추가했더니 CSS가 깨지지 않고 잘 먹혔다.

* {
  border-radius: 0 !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

(border-radius 스타일 설정 한 줄만 추가해도 될 듯하다.)

 

해결한 과정으로는 위에서 고민한 부분에 대해 가장 쉽게 해결할 수 있는 방법이 뭘까 고민해 봤다.

위젯의 특성상 빨리 로드되는 게 중요한데, 이것저것 복잡하고 쓸데없는 코드가 들어가면 로딩 시간에 영향을 끼칠 것 같았다.

정리해 보자면 노션의 기본 스타일이 iframe 내부의 웹 페이지에도 영향을 주고 있었고, 요소의 ID에 적용한 !important 속성조차 무시될 정도로 강력한 자체 스타일이 있어서 이런 문제가 생긴 것 같다. 그래서 위젯 내부의 모든 HTML 요소의 기본 스타일을 제거하는 reset 코드를 적용해 보는 게 좋겠다는 생각이 들었다.

 

 

결론은 잘 작동한다.

어떠한 자체 플랫폼에서 iframe으로 제공하는 위젯 기능을 하는 페이지의 경우 CSS reset이 중요하다는 점을 배웠다.

혹시 디데이 위젯에서도 비슷한 이슈가 있을까 싶어 접속해 봤는데 다른... 새로운 이슈를 발견했다...

 

---

끝없는 이슈

모바일로 접속하니 디데이 표시가 D-NaN으로 표시되고 있다. 아마 모바일 환경에서의 Date() 객체 문제겠지...? 😔

그리고 노션에서 위젯으로 Color Picker를 임베드 했을 때 copy가 되지 않는 이슈도 있다.

다음 포스팅할 거리가 넘쳐난다... :) 좋으면서도 많이 공부해야겠다 싶은 생각이 든다.