새로운 CSS border radius와 padding에 대한 피드백

방금 Discourse를 최신 버전으로 업데이트했는데, 새로운 CSS 모서리 반경(border rounding) 관련 문제가 몇 가지 있습니다. 특히 다크 헤더를 사용하는 사이트에서 두드러집니다.

다크 헤더에서 각 부분이 더 이상 깔끔하게 맞물리지 않는 모습의 스크린샷입니다:

A rounded border against a flat line doesn't look good

이 포럼에서는 더 명확하게 보이도록 빨간색 CSS 테두리를 추가한 모습입니다:

The same thing on this forum

아직 업데이트되지 않은 포럼의 모습입니다. 반경이 덜 둥글고 이전 패딩을 유지하며(직선과 만나는 모서리에는 반경을 적용하지 않음) 이쪽이 훨씬 좋아 보입니다.

전체적으로 반경이 덜 둥근 테두리가 더 좋아 보였습니다. 또 다른 예시입니다:

비교를 위해 이전 버전의 모습입니다(개인적으로는 이쪽이 더 좋아 보이지만, 바깥쪽 모서리는 2px 반경이 더 나을 수도 있습니다):

그냥 몇 가지 제안입니다.

5개의 좋아요

이 문제를 알려주셔서 감사합니다. 디자인 팀에 알렸습니다.

3개의 좋아요

게시글 작성 이후 일부 내용이 업데이트되었습니다.

사이드바 항목 사이에 약간의 간격을 추가했습니다:

알림 패널의 패딩을 제거했습니다. 디자인 팀은 모든 요소 주위에 패딩을 두는 것보다 이 방향이 더 좋다고 생각합니다.

이 코너에는 둥근 모서리를 적용해서는 안 됩니다. 수정하겠습니다. 보고해 주셔서 감사합니다.

1개의 좋아요

이것은 그냥 피드백일 뿐입니다. 제 포럼에서 직접 수정하기 쉬울 것 같아서요:

여기 패딩이 없는 것은 괜찮습니다. 제 개인적인 느낌일 수도 있지만, 메뉴를 클릭할 때마다 "뭔가 이상하다"는 느낌이 듭니다. 패딩보다는 보더 라디우스 때문에 그런 것 같습니다. 사용자 아이콘을 감싸는 박스는 4px 라디우스인 것처럼 보이는데, 메뉴는 2 * 4px 라디우스로 보입니다. 사이드바의 버튼들도 4px입니다. 메뉴의 테두리가 4px가 되면 페이지의 나머지 부분과 정렬되어 더 좋아 보일 것 같습니다.

(스크린샷에서는 모든 것이 8px인 것처럼 보이지만, 너무 둥글어 보입니다. 제가 틀린 것이 아니라면, 로그아웃 상태에서는 8px 라디우스가 보이고 로그인 상태에서는 4px가 보입니다. 몇 가지 브라우저에서 시도해 보았습니다.)


수정: 우리는 서로 다른 것을 보고 있는 것 같습니다. 변수를 오버라이드할 수 있으므로 큰 문제는 아니지만, 제 사이트에서 클릭할 때마다 왼쪽 위 모서리가 이상해 보입니다. 더 큰 라운딩이 테두리를 텍스트에 너무 가깝게 만들어서 그런지, 그래서 이전 댓글에서 패딩에 대해 언급한 것입니다.

1개의 좋아요