최근 Meta에서 토픽을 볼 때 "읽기 모드"를 활성화하는 테마 컴포넌트를 설치했습니다.
이 기능을 전환하는 버튼은 토픽 타임라인 컨트롤 상단에 위치해 있습니다:
버튼을 클릭하면 대부분의 UI가 약간 불투명한 오버레이로 가려져 집중력을 높일 수 있도록 토픽이 "읽기 모드"로 전환됩니다.
그 외에도 모든 아바타와 이미지에 필터가 적용되어 흑백 이미지로 변경됩니다.
사용 중인 모습의 화면 녹화 영상입니다.
해당 컴포넌트는 Meta에 설치된 다음 테마에서 사용할 수 있습니다:
아직 개발 중인(WIP) 상태이며, 버그 신고나 피드백을 여기에 남겨주시면 감사하겠습니다 
정말 멋지네요!
한 가지 눈치챈 게 있는데, 버튼을 클릭할 때 일부 스타일 변경으로 인해 레이아웃이 '점프’하는 현상이 발생합니다. 어떤 요소들이 display: none; 처리되고 있는 건가요? 아니면 일부 폰트 크기가 변경되고 있는 걸까요?
레이아웃이 밀리는 현상 없이, 버튼이 단순히 ‘회색으로 변하게’(또는 visibility: hidden;) 불필요한 요소들을 처리하는 것이 가능할까요?
네, 저도 이 문제를 겪었습니다.
이상적으로는 사이드바 토글을 정상적으로 클릭할 때처럼 사이드바가 닫히도록 애니메이션이 적용되어야 합니다.
제 컴포넌트는 사이드바를 닫지만 애니메이션을 적용하지 않기 때문에, 갑자기 껑충하는 느낌이 듭니다.
다음 중 하나를 선택할 수 있습니다:
visibility: hidden;는 어떨까요? 아니면 opacity: 0;? 그러면 레이아웃에는 여전히 포함되지만 보이지 않게 되죠. 클릭/포커스를 방지하기 위한 조치도 필요할 것 같습니다? 또는 호버/포커스 시 다시 보이게 하는 건 어떨까요? 
상대적으로 안전한 방법 중 하나는 사용자 상호작용을 모방하는 것입니다:
if(document.body.classList.contains("has-sidebar-page")){ // 사이드바가 표시됨
document.querySelector(".btn-sidebar-toggle").click()
}
사이드바에 대해 말씀하시는 건가요?
그렇다면, 저는 실제로 제 컴포넌트로 사이드바를 닫도록 토글하고 있으므로, 다음과 같은 동일한 핵심 방식을 사용하고 있습니다:
@action
toggleReaderMode() {
if (this.sidebarIsOpen && !this.isActive) {
getOwner(this).lookup("controller:application").set("showSidebar", false);
this.readerModeActive = !this.readerModeActive;
} else {
getOwner(this).lookup("controller:application").set("showSidebar", true);
this.readerModeActive = false;
}
}
이 사이드바를 닫도록 토글하는 것 외에는 페이지에서 실제로 제거하는 것은 아무것도 없습니다.
맞아요, 하지만 그렇게 하면 레이아웃 시프트가 발생해요. 그래서 열어두되, 보이지 않게 만드는 건 어떨까 생각 중입니다.
네, 맞아요, 혼동을 드려서 죄송합니다. 이제 이해가 됩니다. 리더 모드가 사이드바 토글인 것이 알려지지 않았기 때문에, 토글이 되는 것이 혼란을 줄 수 있고, 원치 않는 상황에서 시프트가 발생하게 되죠.
사이드바 토글이 시프트를 일으킨다면, 리더 모드가 같은 일을 해도 큰 문제가 안 될 거라고 가정했던 것 같습니다.
사이드바를 토글하지 않는 방식으로 시도해서, 여기 영상을 올려서 보여드릴게요.
사이드바를 닫은 상태에서 리더 모드 버튼을 사용하면 사이드바가 열리고, 이후에는 버튼이 아무 동작도 하지 않습니다.
그 새로운 아이콘이 대체 뭔지 궁금했거든요. 이제 알았네요. 감사합니다.
하지만.
DiscourseHub, iPad, 테마 기본값: 이 아이콘이 하는 일은 사이드바를 확장하는 것뿐입니다.
수정.
음, 먼저 사이드바를 열어야 하네요. 그 다음에 마법이 일어납니다. 그런데… 저는 여기서 사이드바를 사용하지 않거든요 
정말 좋습니다!
어려울지는 모르겠지만, 사용자가 ESC 키를 눌러 리더 모드를 종료할 수 있으면 좋겠다는 생각이 들었습니다. 해당 버튼이 타임라인의 일부로 취급되므로, 주제를 맨 아래까지 스크롤하면 버튼이 화면 밖으로 밀려날 수 있습니다.
정말 멋진 기능입니다. 잘하셨어요, 조던! 
데이비드가 말했듯이, 콘텐츠를 이동하지 않는 것이 가능한지 궁금합니다.
또한, 원래 너비를 줄인 특별한 이유가 있을까요? 제한 사항이 있는지는 몰라서요.
제가 말하려는 것은 대략 이렇습니다:
기능이라는 게 결국 타임라인과 알림 바를 숨기는 것뿐인 것 같습니다. 사이드바는 이미 접을 수 있으니까요. 모든 주제에 버튼을 하나 더 추가할 만큼 사용자 경험이 크게 바뀌거나 개선된다고 보기 어렵습니다.
리더 모드에서 전체 너비로 표시하는 등 독서 경험을 의미 있게 변화시킨다면 더 합리적일 것입니다. 현재 상태로는 이 기능을 거의 사용하지 않을 것 같아서, 아이러니하게도 타임라인에 시각적 노이즈만 더 늘리는 결과로 이어집니다.
장기적으로 글꼴, 텍스트 크기, 콘텐츠 너비 등의 옵션을 추가하는 것이 목표입니다. 하지만 지금은 단순히 작은 실험 단계이며, 아직 완성되지 않은 상태입니다.
이동 제한 및 더 나은 전환을 위한 최신 변경 사항이 이 컴포넌트에 병합되었습니다. 지금까지의 피드백에 감사드립니다
정말 마음에 듭니다!
토픽 맵을 숨기면 원글과 첫 번째 답변 사이에 큰 간격이 생깁니다. 회색 톤의 토픽 맵은 어떤 모습일지 궁금하네요.
원글에 답글을 달거나 리더 모드에서 게시글에 직접 답글을 달 수 있습니다. 토픽 하단에서도 답글을 달 수 있도록 하면 어떨까요?
네, 투명도도 조금 낮추는 걸 고려해볼 수 있겠네요. 부드러운 전환 효과를 이용해 숨기려 해봤는데, 리스트 아이템을 렌더링하는 방식 때문에 가끔 이 효과가 보이지 않는 경우가 있고, 숨기는 과정이 꽤 번거로웠습니다.
작은 게시물 알림이나 시간 간격 처리도 마찬가지입니다. 생각할 수 있는 유일한 방법은 엘리먼트 옵저버 API를 사용하는 것인데, 그렇게 해도 움직임이 약간 예측 불가능하고, 무작위로 진동(jitter)이 발생하는 현상을 발견했습니다.
이 의견에 동의합니다
키보드 단축키(Ctrl+무언가)로 전환할 수 있으면 좋겠습니다. (버튼에 마우스를 올리면 해당 단축키에 대해 안내할 수도 있겠네요)
이미지를 흑백으로 처리하는 방식은 별로 좋아하지 않습니다. 정보가 손실되는 느낌이 듭니다.
다만, “좋아요 수”, 답글 버튼, 심지어 아바타 같은 UI 요소를 많이 제거하는 것에는 찬성합니다.
좋은 개선이네요, 조던! 이제 움직임의 변화가 보이지 않고 전환을 부드럽게 만드는 애니메이션이 추가되어 훨씬 나은 경험이 되었습니다.
샘의 제안에 동의합니다. 비필수 정보를 숨기는 경우, 색상을 다시 표시하면 좋은 타협점이 될 수 있겠어요. 다만 선택 사항으로 제공할 수도 있겠네요. 
네, 네, 네!!!
리더 모드로 들어간 후에는 다른 페이지로 이동하려면 클릭해야 하고, 리더 모드를 원하면 다시 켜기 위해 또 클릭해야 합니다. 다른 내비게이션 링크가 조금 더 눈에 띄게 만들고, 작동하도록 하며, 다음 주제로 넘어갈 때도 리더 모드가 켜진 상태로 유지되게 하면 어떨까요?
또 다른 아이디어로는, 주제 끝부분에 도달하면 리더 모드를 자동으로 끄는 것도 있습니다.
아니면, 마지막으로 방문한 주제 목록의 다음 주제로 자동으로 이동하게 하는 것도 좋습니다!
