디자인 요소 비활성화 기능

[ghost]

입력창이나 체크박스 등 위에 마우스로 클릭했을 때(:active?) blur가 적용되어서 흐려지는 효과가 있습니다.
개인적으로 깔끔해보이지 않는 것 같고 이질적인 느낌이 나서 지우는게 낫지 않을까 합니다.

[hsl0]

이건 디자인 기믹입니다. 컴포넌트들이 물 위에 뜨다가 누르면 물 아래로 가라앉는 듯한 효과를 의도하였습니다. 이 스킨의 이름이 float인 이유이기도 하죠. 다만 디자인적 요소 이외에 실용적으로는 불편할 수 있기에 호불호가 있을 수 있긴 하겠네요. 배경 반투명 효과, 팝업 표출시 관련없는 다른 영역 흐리기 같이 호불호가 있을 수 있는 디자인적 부분에 대해 토글할 수 있는 기능 제공을 검토해보겠습니다. 구현 방식 아이디어 제시나 직접 기여도 모두 환영입니다.

[ghost]

아 그러면 불편하게 느낄 수 있는 사용자를 위해 옵션 설정을 통해 켜고 끌 수 있게 만들어야 겠네요.
큰숲백과 상에서 스크립트 만들어봤습니다.
사용자:Cerulean/skin-config.js
단순히 localStorage에 설정 값을 저장하는 식으로 저장된 값에 따라 body에 클래스를 삽입하는 방식입니다.
다른 브라우저나 다른 기기에서도 설정이 유지되는 방법은 잘 모르겠네요.

[hsl0]

그런데 자바스크립트로 클래스를 삽입하는 것은 로딩 초기에 바로 적용되지 않는 지연 시간이 발생할 우려가 있습니다. 대부분 사용자 인터렉션에만 반응하고 레이아웃을 크게 바꾸지 않기에 큰 상관이 없을 수도 있지만요

[ghost]

아 다크모드 전에 시도해봤지만 페이지가 전부 로드된 후 클래스를 넣는 방식은 라이트모드에서 다크모드로 깜빡이는 부작용이 있었습니다. 여러 기능들이 추가될 것을 고려해서 스킨 설정창을 추가하는 방식을 생각했는데 모든 기능을 넣기에는 문제가 있군요.

[hsl0]

저는 기능들을 별개의 소도구로 쪼개는 것을 생각하고 있습니다. 하지만 소도구 설정창이 많이 복잡해질 수도 있겠네요.

[hsl0]

CSS로는 기존에 등록된 다른 CSS를 수정하거나 해제하려면 같거나 더 쎈 셀렉터로 각 규칙을 덮어쓰는 방법 뿐입니다. 사실상 불가능한 방법이죠. 확장기능이나 독립 스킨은 장기적으로 계획되고 있으나 큰 노력이 필요합니다.

[ghost]

확장기능 활용은 이미 있는 기능을 설치해 활용하자는 뜻입니다. css 코드 추가하는 것도 사용자가 import 할 수 있게 하자는 뜻입니다. 직접 삽입하는게 아니라요.

[ghost]

소도구의 js를 활용한 방법은 앞서 말씀하신 문제가 있고 소도구 css를 추가하는 방법을 제안해봅니다.

[ghost]

아 소도구 css가 불가능하다고 말씀하신 줄 알았네요.

[hsl0]

그럼 소도구 모듈화로 구현하는 것으로 가닥을 잡을게요 (#5)

[hsl0]

비활성화 설정을 원하는 디자인 요소들은 #6 에 의견 당 하나씩 적어주세요. 필요성이 인정되거나 요청 희망자가 많은 요소들에 대해 개별 모듈로 분리합니다.

• 비활성화 가능한 디자인 요소 #6

[hsl0]

진행 사항은 #5 에서 추적됩니다.

• 일부 디자인 요소 모듈화 및 분리 #5