냑 다크모드 만들기 (1) 시작이 반이다 > 자유게시판

자유게시판

냑 다크모드 만들기 (1) 시작이 반이다 정보

냑 다크모드 만들기 (1) 시작이 반이다

본문

SIR 다크모드가 베타 딱지를 뗀지 일주일이 조금 지났습니다.

베타 딱지는 뗐지만 아직 손길이 필요한 곳들이 계속 보이는 것 같습니다.

 

버그신고 등을 통해 알려주시는 회원님들께,

그리고 크고작은 불편함에도 불구하고 기껍게 사용해주시는 회원님들께

이 자리를 빌려 새삼 감사의 마음을 전합니다.

 

 

앞으로 몇개의 글에 걸쳐

냑(SIR을 한글자판으로 치면 냑)에서 다크모드를 어떻게 만들었는지

회원님들께 공유해드리고자 합니다.

 

사실 하나의 게시물에 정리하려고 했는데 글을 쓰면서 살을 붙이다보니 제법 길어지네요.

 

이제 막 다크모드를 검토하시는 분들께는 조그만 가이드가 되길 바라며,

앞서 경험하신 선배님들께는 도움을 구하고자 하는 마음을 겸하여...

 

시작하겠습니다.

 

 

 

냑 다크모드 만들기

(1) 시작이 반이다

 

다크모드는 일반적으로 눈의 편안함을 위해 설정하는 것으로 알려져 있습니다.
사실 일반적이라기보다 `우리가 알기로는 그랬다`가 더 적절한 표현이겠네요.

 

우리는 다크모드에 대해 공부하고 또 직접 구현하면서,

 

1. 다크모드는 색맹과 색약을 가진 분들이 컨텐츠를 구분하는 데 도움이 되고
2. 또한 눈부심을 많이 느끼는 분에게도 도움이 되며
3. 밝은 화면과 어두운 화면은 각각 사용시간이 단시간(밝은 화면)인 경우와 장시간(어두운 화면)인 경우 생산성에 차이가 있을 수 있으며,
4. 어두운 화면은 난시 사용자에게는 오히려 더 불편할 수 있고(헐레이션 효과)

5. 무엇보다 사용자가 제어할 수 있어야 하는 것이 가장 중요하다는 점을

 

새롭게 알게 되었습니다.

 

1*ZKEz67BqcWy0iDvXhTTicA.jpeg

왼쪽은 난시 사용자가 어두운 바탕, 밝은 글자를 읽을 때 겪을 수 있는 현상입니다.

이미지 출처

 

 

이런 점에 비추어보면 SIR에서 제공 중인 다크모드는 아직 많은 숙제를 안고 있는 듯 합니다.

미적 관점에서의 아름다움도 포함해서요.

 


다크모드를 다루는 방법은 많지만, 우리에게 맞는 방법을 찾기는 쉽지 않았습니다.

 

여러가지 이유가 있겠지만, 가장 큰 이유는 SIR 커뮤니티가 오랜 시간 여러사람의 손을 거쳐 다듬어져 온 사이트라는 점 때문입니다. 이 과정에서 통일된 디자인 스타일 가이드 정립보다, 서비스 제공의 신속성과 효과에 집중해왔던 것이 사실입니다.

 

그 결과 조금 직설적으로 말씀드리자면 스타일시트가 중구난방인 상태입니다.

 

당신의 재치를 빛나게 해줄

아까 본 CSS 코드가 밑에서 또 나타남 짜잔!

 

그리고 어떤 방법들은 사이트 유지/보수에 기존보다 더 많은 노력을 요구하기도 했습니다.

 

예를 들어, html 이나 body 태그에 클래스를 지정하는 방식으로 다크모드를 구현했다고 생각해볼까요?

스타일시트의 구조가 처음부터 계획되고 분리된 경우(레이아웃과 색이 분리된 경우)가 아니라면(SIR처럼), 마크업 담당자는 하나의 변경사항을 적용하기 위해 두 개 어쩌면 n개의 스타일시트를 수정해야 할지도 모릅니다.

 

PC버전, 모바일 버전에 더해서 다크모드, 라이트모드까지...

사이트를 제작하고 유지/보수하는 복잡성이 크게 증가합니다.

 

CSS를 수정하는 일은 언제나 고통스럽습니다.

 

그래서 우리는 다크모드 도입을 쉽게 결정하기 어려웠습니다.

어쩌면 아직 경험이 충분하지 않아 단순한 시행착오를 겪는 중인지도 모르겠습니다.

 

 

 


그러던 중,

리자님이 새로운 아이디어를 내셨습니다.

아이디어는 이런 방식입니다.

 

1. 먼저, 스타일시트의 색상코드를 1byte 단위로 반대 색상코드로 치환합니다. 이렇게 하면 0은 f가 되고, 1은 e가 됩니다. 색상코드가 fff 였다면, 치환된 색상코드는 000이 됩니다.
2. 원래 스타일시트의 파일명에 .dark 를 붙여 파일명.dark.css 파일을 생성합니다.
3. 다크모드 버튼을 누르면, 쿠키와 자바스크립트를 이용해 스타일시트를 바꿔줍니다.

 

1번과 2번은 따로 제작한 스타일시트 컨버터를 이용하여 자동으로 수행합니다.

 

더 이상의 자세한 설명은 생략한다.

 

 

처음 이 아이디어를 들었을 때 든 생각은

다분히 ‘개발자다운(?) 방식’이란 것입니다.

치명적이게 효율적인 방법이었죠.

 

 

장점은

 

1. 하나의 수정사항에 대해 여러개 혹은 여러군데 스타일시트를 수정할 필요가 없다는 점
2. 배경은 어둡고 글자는 밝은 페이지를 만드는데 굉장히 효율적이라는 점

 

단점은

 

1. 일련의 연속된 코드만으로 흰/회/검정 구별이 가능한 경우 외에는 어떤 색상으로 치환될지 예상할 수 없다는 점
2. 그래서 사이트에 디자이너의 의도를 담기가 쉽지 않다는 점
3. 스타일시트를 수정할 때마다 컨버터를 실행해야 하며

4. internal-style, inline 에는 대응할 수 없다는 점입니다.

 

장점(효율)과 단점(효과)의 성격이 극명합니다.

 


하지만 계속 이런저런 이유로 도입을 계속 망설이면

SIR에서는 영영 다크모드를 만날 수 없게 될 것 같았습니다.

 

2000 Years Later | SpongeBob Time Card #2 - YouTube


그래서 우리는 일단 시작이 반이라는 마음으로,

리자님의 아이디어를 전격 채택,

SIR에 다크모드를 적용하는 작업을 하기 시작했습니다.

 

 

 

랜덤짤봇 در توییتر

 

 

 

--- 다음편에 계속 ---
 

추천
15
  • 복사

댓글 8개

다음편도 기대합니다만…
이미지가 없어서 재미가 없습니다.
예를 들어… 리자언니가 머리를 쥐어짜는 모습이라든가…
네 글을 계속 조금씩 다듬으면서 이미지도 추가하고 있습니다. 조금 천천히 나중에 몰아서 읽어보시는 것도 좋을 것 같아요. ^^
오 좋은 글이네요!
저도 지금 담당하고 있는 서비스에 다크모드를 도입하고 싶은데 어려운 점이 많네요 ㅋ
와! 그러셨군요. ^^ 모드전환을 좋아하는 1인으로서 이 Story 매우 흥미롭네요!
난시 사용자까지는 민감 고려 않아도 되지않나요?(난시라면 안경을 사용하리니)

기획자님과 리자님께 박수를 짝짝짝!!!
딴지 아닙니다,
"이 자리를 빌어 새삼 감사의 마음을 전합니다."에서
빌어는 "빌려"가 바른 우리말.
이자리를 "빌려" 냑 관계자분들께 감사의 말씀 드립니다.
© SIRSOFT
현재 페이지 제일 처음으로