롱블랙
비즈니스나 인사이트에 대한 노트를 볼 수 있는 롱블랙 서비스.
핫한 기업이나 가게 또는 유명인사, 좋은 책 등에 대한 새로운 노트가 매일 하나씩 발행이 되고 24시간이 지나면 볼 수 없게 된다.
월 4900원에 월~토 새로운 노트가 발행되고 일요일에는 전에 보지 못한 노트를 볼 수 있는 쿠폰을 받을 수 있다.
롱블랙을 구독한 지는 1년이 넘었다.
아직도 구독하고 있다는 것은 롱블랙의 컨텐츠 퀄리티가 상당히 좋다고 생각하기 때문이다.
내가 호기심이 많기도 하거니와 서울이 아닌 지방에 살면서 다양한 컨텐츠와 비즈니스를 심도있게 알 수 있는 수단이기도 하다.
스타일링 에러
며칠 전에는 배달의민족의 새 사무 공간인 더큰집을 소개하는 노트를 읽다가 UX면에서 잘못된 스타일링이 있어 고객센터에 제보를 했다.
어떤 문제가 있었느냐면,
노트의 마지막에 전체적으로 요약하는 이미지들이 캐로셀로 돼있는데 클릭하면 큰 사이즈의 이미지로 볼 수 있다.
그런데 바로 아래에 ABOUT 롱블랙 배너가 있어, 클릭하면 나오는 큰 이미지를 가리게 되는 문제가 발생해 UX를 저하시키고 있었던 것이다.
웹 프론트엔드를 공부하고 있는 나는 컨텐츠들의 z-index가 똑바로 설정되어 있지 않아서 그럴 것이라고 예상했다.
z-index
웹 스타일링을 할 때, 서로 겹치는 컨텐츠의 위 아래를 정해주는 수치.
그래서 검사창을 열고 컨텐츠들의 z-index를 확인한 결과, 역시나 캐로셀을 클릭하면 뜨는 previewBox의 z-index (1101)보다 배너 about-longblack의 z-index (3000)가 더 높았던 것이었다.
왜 이렇게 스타일링을 하셨지? 하는 생각과 어떻게 하면 이 에러를 해결할 수 있을까 하는 생각이 떠올랐다.
어쨌거나 z-index를 수정해야 하는 것은 맞는 것 같은데 z-index에도 규칙이 있어 2가지의 상황이 있다.
우선, 가장 간단한 방법으로 about-longblack의 z-index를 previewBox의 z-index 보다 낮게 설정해주거나,
previewBox의 z-index를 about-longblack의 z-index 보다 높게 설정해주는 것이다.
두번째로, 위의 방법이 통하지 않을 수가 있다. 왜냐하면 z-index 규칙에 따라 부모 요소의 z-index가 우선 적용되기 때문에, 먼저 부모 요소의 z-index를 맞춰주거나 같은 부모 요소에 속하게 만들고 previewBox와 about-longblack의 z-index를 맞춰주는 것이다.
해결
다행히 about-longblack의 z-index만 previewBox보다 낮게 수정해주었더니 배너가 이미지를 가리지 않고 해결이 되었다.
이것을 롱블랙 1:1 문의로 남겼더니 다음과 같이 답장이 왔다.
답장 내용처럼 이제는 배너가 이미지를 가리지도 않고 스크롤도 작동하지 않게 바뀌었다.
사실 저 문제 말고도 공지 목록 버튼에서 텍스트가 1px 정도 내려가있는 것처럼 보이는 문제도 말씀 드렸는데 별다른 이상한 점이 없다고 넘어가셨다.
'목록'이라는 글자의 받침 모양때문에 착시현상으로 글자가 내려가 보인다.
착시현상이라고 말하는 이유는 실제로 내려가있는 것이 아니라 그렇게 보이는 것이기 때문이다.
다른 텍스트를 적용하면 정중앙에 위치한 것처럼 보인다.
취준생따리가 지적하는 것도 웃기지만 프론트엔드는 디테일이라고 어디서 봤기에!!
1px 차이도 알아내는 것이 프론트엔드 개발자라고 어디서 들은 것 같은 느낌적인 느낌.
원인?
문제를 해결하면서도 나는 '왜 그런 것일까?' 하는 생각이 들어 조금 더 조사해 보았다.
내가 생각하는 원인은 아마도 롱블랙 사이트의 footer와 배너가 비슷한 모습을 하고 있는데, footer의 z-index 또한 3000이었다. (3000만큼 높여줘-!)
아마도 같은 모듈?으로 스타일링을 하면서 배너의 스타일링만 조금 수정을 한 것 같은데, z-index는 그대로 쓰면서 이와 같은 문제가 발생하지 않았나 하는 킹리적 갓심을 해 보았다.
롱블랙 중간 배너
롱블랙 footer
이번 일을 경험하면서 내가 아는 개발 지식으로 문제를 해결할 수 있다는 뿌듯함과 자랑스러움이 동시에 솟구쳤다. 그리고 롱블랙의 웹 디자인이 정말 예쁘다고 생각하는데 이렇게 나의 의견이 롱블랙의 코드가 될 수 있다는 것도 좋았다.
뭔가를 배우면서 다른 사람의 불편함이나 문제를 해결하는 것. 사람들에게 도움이 되는 것. 다정한 사람이 되는 것. 꼭 개발자가 되지 않더라도 이것이 내가 살아감에 있어서 중요하게 생각하는 것이다.
취준공부가 너무 안되기도 하고 개발자 취업도 바늘구멍 찾기이기도 해서 진로가 개발자가 될 지 안 될지도 모르지만, 어쨌거나 나는 무엇이라도 한다. 다정한 사람이 되기 위해.
