feat(ui): 강조색을 데이터에만 쓴다 - #111
Merged
Merged
Conversation
강조색(파랑) 19곳 중 데이터는 차트와 달성률 막대 두 곳뿐이었다. 나머지 열일곱 곳이 네비 활성, 버튼, 링크, 카드 제목 막대, 뒤로가기였다. 파랑이 어디에나 있으면 파랑이 아무 것도 가리키지 못한다. 시선이 숫자와 그래프에 가도록 크롬에서 색을 걷어낸다. - 주 버튼은 색 대신 배경을 뒤집어 눈에 띄게 한다(--solid-*). 라이트에서는 짙게, 다크에서는 밝게 - 링크는 색이 아니라 밑줄로 알린다. 파랑 링크가 목록마다 깔리면 정작 봐야 할 숫자보다 그쪽이 먼저 읽힌다 - 네비 활성, 카드 제목 막대, 카드 호버 테두리, 체크박스를 무채색으로 - 포커스 링은 파랑을 그대로 둔다. 눌렀을 때만 잠깐 뜨는 것이라 평소 화면에서 경쟁하지 않고, 지우면 키보드로 쓰는 사람이 어디 있는지 모른다 남은 강조색: 차트 계열, 달성률 막대, 포커스 링
24px 일 때는 숫자 밑에 붙은 설명 세 줄이 면적을 더 차지해서, 눈이 숫자에 머물지 않고 회색 글자로 흩어졌다. - 지표 숫자 24px -> 40px, 굵기 500 -> 600 - 단위(%, 건, /14)는 17px 로 두어 숫자와 구분되게 한다 - 진행 막대 4px -> 6px. 숫자가 커진 만큼 같이 두꺼워야 짝이 맞는다 - 지표 칸 최소 너비 120px -> 150px - SW중심대학 칸만 단위를 인라인 스타일로 그리고 있어 .unit 으로 맞춘다 목표 카드와 실적 요약 카드가 같은 클래스를 써서 한 번에 바뀐다. 확인: 1512 / 1024 / 375, 넘침 없음
숫자만 40px 로 키우고 라벨은 12px 가장 연한 회색 그대로 둬서, 라벨이 아래 설명글과 같은 급으로 보였다. 큰 숫자는 눈에 들어오는데 그게 무슨 값인지가 안 읽혔다. - 라벨 12px/400/text-3 -> 13px/600/text-2. 설명글(11px/text-3)과 확실히 벌린다 - 지표 칸 최소 너비 150px -> 130px. 150 이면 1280 노트북에서 세 번째 지표가 다음 줄로 밀렸다 이제 라벨 > 숫자 > 설명 세 단계가 크기와 진하기로 모두 갈린다
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
강조색(파랑) 19곳 중 데이터는 2곳(차트, 달성률 막대)뿐이고 17곳이 크롬이었다.
파랑이 어디에나 있으면 파랑이 아무것도 가리키지 못한다.
--solid-*). 라이트 짙게 / 다크 밝게확인: 라이트·다크 × 대시보드·기업 리스트.