새로운 컴포저 스타일링이 배경과 구별하기 어렵게 만듦

이 변경이 의도된 것인지 확신은 없는데, 텍스트 영역에 포커스가 맞춰져 있지 않을 때 컴포저의 경계가 보기 어려워졌습니다. 이론적으로는 사소한 변경이지만, 실제로는 컴포저가 배경과 너무 잘 어우러져서 어떤 부분이 포커싱을 위해 클릭 가능한지, 어떤 부분은 아닌지 구별하기가 더 어려워졌습니다.

모바일과 데스크톱 모두에서 발생하고 있습니다. 모바일에서 차이를 보여주는 사진 몇 장을 첨부합니다.

이전 경계 스타일:

새로운 경계 스타일:

4개의 좋아요

이에 동의합니다. 또한 기본 밝은 테마에서 텍스트 영역의 테두리가 위쪽 필드의 테두리와 더 이상 일치하지 않는 것도 확인했습니다:

그리고 작은 문제 하나, 제출 버튼이 소프트웨어 키보드에 닿고 있습니다. 이상적으로는 그 사이에 작은 여백이 있어야 합니다.

5개의 좋아요

이 변경은 의도적으로 이루어졌습니다. 목표는 텍스트가 더 돋보이게 하고, 부차적인 UI 요소가 조금 더 자연스럽게 어우러지게 하는 것이었습니다.

아이디어는 컴포저 내에서 버튼이나 짧은 입력 요소가 차지하지 않는 거의 모든 공간이 텍스트 영역이라는 것입니다. 또는 기본 데스크톱 컴포저의 경우 작성과 미리 보기로 두 열로 나뉘어 있으므로, 약간의 시각적 구분자만으로도 충분할 수 있습니다.

어쨌든, 이 변경 사항에 대해 조금 시간을 두고 적응 기간을 거친 후 색상을 조정할 수 있을 것입니다. 원래의 테두리 색상과 현재 색상 사이의 절충점을 찾는 것도 방법입니다. 지켜보겠습니다!

일부 필드의 테두리 색상이 조정되지 않았습니다. 후속 PR에서 수정했습니다. iOS의 여백도 마찬가지입니다.

2개의 좋아요

정확히 어떻게 변경된 테두리 색상이 그 효과를 내는 건가요?

하지만 컴포저 주위에는 여전히 컴포저 자체는 아니지만 클릭할 수 없는 UI 요소가 많이 있으며, 이제는 주변 부분이 끝나고 컴포저가 시작되는 지점을 구별하기가 더 어려워졌습니다.

솔직히 말해서, 이제 테두리의 대비가 너무 낮아 테두리가 전혀 없는 것처럼 느껴져서, 컴포저와 그 위의 모든 버튼이 마치 떠다니는 요소들만 있는 것처럼 보입니다. 심지어 이탤릭 버튼과 링크 버튼 사이의 구분선조차 이제 거의 볼 수 없어 사실상 무의미해졌습니다.

네, 분명히 저는 이 변경 사항의 의도를 놓치고 있는 것 같습니다. 하지만 적응 기간을 두는 것에는 충분히 공감합니다. 설명하기 어려운 이유들로 인해 이 변경 사항이 특히 눈살을 찌푸리게 합니다.

개발자 콘솔을 살펴보니 테두리 색상이 --primary-medium(#909090)에서 --primary-low(#313131)로 바뀌었더군요. 꽤 극적인 변화입니다. 말씀하신 대로 중간값을 시도해 보기 위해 #616161으로 변경해 봤는데, 정말 큰 개선이었습니다. 원래의 #909090처럼 시선을 너무 많이 끌지 않으면서도 훨씬 더 필요한 대비를 제공합니다. 다양한 값을 실험해 보니, #515151 같은 값도 대비와 과하지 않은 균형 사이에서 정말 좋은 균형을 이룰 것 같습니다. 시간이 조금 지난 후 이 부분을 고려해 주시기를 바랍니다.

(#7a7a7a까지 올라가는 --primary-low-mid가 있다는 것을 알게 되었습니다. 아마도 #515151을 위한 --primary-low-not-quite-mid를 추가할 때가 된 것 같습니다. :laughing:)

1개의 좋아요

네, 맞아요 :sweat_smile: 처음에 여기서 테두리 색을 테스트할 때는 좀 더 대비가 강한 색을 사용했는데, 결국 low와 low-mid 사이에서 선택을 해야 했습니다. 아마 결국 새로운 변수를 추가해야 할 것 같습니다.

하지만 먼저, 기존 두 변수가 어디에서 사용되고 있는지 확인하고, 이 색상이 조정될 필요가 있는지, 아니면 새로운 변수가 필요한 곳이 있는지 살펴보는 것이 좋습니다.

그리고 새로운 색상을 도입한다면, 변수의 새로운 명명 규칙을 고려해 볼 가치가 있습니다. 예를 들어, 숫자 기반처럼 --primary-600과 같은 방식(일부 CSS 프레임워크에서 사용하는 방식과 유사하며, 예: tailwind)을 사용할 수 있습니다.

cc: @awesomerobot :smiley: 색상 팔레트를 확장하는 것에 대해 의견 있으신가요?

3개의 좋아요

아마도 테두리 색상은 수정되었을 것 같습니다(토픽 제목과 제출 버튼과 같은 파란색). 하지만 제출(답글) 버튼의 하단 여백은 수정되지 않았습니다.

게시물을 수정해서 스크린샷을 다시 업로드해 주시겠어요? :slightly_smiling_face:

1개의 좋아요

응, 아직 수정이 병합되지 않아서 여유가 없거든. :smiley:

2개의 좋아요

가능하면 그러고 싶지 않습니다! 저-중간 톤을 약간 조정할 수는 없을까요? #616161을 목표로 한다면, #7a7a7a가 꽤 가깝습니다.

네, low-mid는 처음부터 좀 특이한 이름이었어요. 기존 변수들을 매핑만 해준다면 이름 변경에 반대하지 않습니다.

2개의 좋아요

어쨌든 그럴 가능성이 높습니다. 현재 low-mid(#7a7a7a)는 medium(#909090)과 꽤 비슷해서 의미가 없어 보입니다. #616161 근처로 이동시키면 low(#313131)와 medium(#909090) 사이에 적절한 간격을 채워주며, 두 값의 중간쯤에 위치하게 됩니다.

1개의 좋아요

혹시 이에 대한 변경 사항이 계획되어 있는지 확인하려고 연락드렸습니다.