마이너 가독성 개선

[lens0021]

From @yeun on August 2, 2017 14:7

• 너무 작은 크기의 폰트 키우기
  • 12px, 13px의 폰트는 본문 대비 크기가 작아 잘 읽히지 않으며 링크일때는 누르기도 어렵습니다. 크기를 키워 개선합니다.
• 본문 폰트 크기 키우기
  • 본문 폰트 17px은 웹용 문서에 다소 작은 사이즈입니다. 크게는 23px까지도 쓰지만, 기존 유저의 괴리감을 고려해 19px로 키웁니다.
• 본문 글줄 너비 줄이기
  • 현재 한 글줄에 약 50자가 들어갑니다. 인쇄시 글줄을 생각해보면 두배 가까운 길이이며, 웹 환경을 고려해도 깁니다. 글줄 너비를 줄여 눈의 피로를 줄입니다.
• 줄간격 약간 줄이기
  • 현재 줄간격이 1.9em으로 꽤 높습니다. 적당한 줄간격은 쾌적함을 제공하지만 글자 크기의 두배에 가까워 문단이 묶이지 않는 문제가 있습니다. 이를 1.5-1.7em 정도로 줄입니다.
• 헤딩 텍스트 볼드로 변경
  • 헤드라인과 본문 모두 자족 400이 쓰여 문서에 강약이 부족합니다. 헤드라인을 700으로 설정해 리듬감을 만듭니다.
• 맥으로 접속하면 시스템 기본 폰트가 보여지도록 맥으로 접속하면 시스템 기본 폰트가 보여지도록 #272
  • 숫자와 영문은 UI에 최적화한 샌프란시스코가 보여지도록합니다. 단, 사용자가 일부러 OS기본 폰트를 바꾼 경우에는 사용자가 지정한 폰트가 보여지도록 합니다.

Copied from original issue: femiwiki/docker-mediawiki#28

[lens0021]

From @tunarules on August 3, 2017 0:50

좋은것 같습니다! 줄간격은 1.7em이 더 적당할것 같습니다. 저는 본문폰트를 23px까지 키우는것도 좋아요. 지금 폰트도 크다고 줄여서 보시는분들도 계시는....ㅠㅠ

[lens0021]

From @choidamdam on August 4, 2017 22:59

페미위키 내에서 토론이 필요한 사항으로 보입니다.
https://femiwiki.com/w/%ED%8E%98%EB%AF%B8%EC%9C%84%ED%82%A4:%EA%B0%9C%EC%84%A0%EC%9A%94%EC%B2%AD

[lens0021]

From @tunarules on August 7, 2017 1:43

/Users/sollee1/Downloads/스크린샷 2017-08-07 오전 10.34.33.png

단어가 부서져 강제 줄바꿈 되는것을 단어 통째로 줄바꿈 시켜주는것으로 바꾸는것도 가독성에 더 좋을것 같습니다.

[lens0021]

From @yeun on August 29, 2017 12:20

29일 주간회의에서 페미위키 내 토론하지 않아도 되는 사안이라고 논의했습니다.

[lens0021]

< dl>의 각 항목들 사이의 간격도 한 줄~한 줄반 정도로 띄우는 것이 어떨까요? 감사합니다!

[lens0021]

잘못 눌렀습니다

[lens0021]

본문 폰트를 기존 16.5px에서 19px로 키우고(그러면 약1.15배) 본문 글줄 너비는 현재 50rem을 1.15...로 나누고 반올림한 43.4rem으로 줄이면 적당할까요...?

[simnalamburt]

참고자료

• https://lqez.github.io/blog/hangul-typo-on-web.html
• https://lqez.github.io/blog/hangul-typography-on-mobile-web.html

[simnalamburt]

글자크기 키우는것은 좋다고생각하는데 글줄 너비를 줄이는게 맞는지는 잘 모르겠어요. 저희 글줄에 정말 순수하게 글만 있으면 상관이 없는데, 인물정보틀이나 사진이 하나라도 들어가면 폭이 급격하게 좁아져서..

글자크기 키운 뒤 자간을 살짝 줄이는것도 해보고싶네요

[lens0021]

폰트 관련 이슈를 #272 으로 따로 만들었습니다.

[lens0021]

키우는 건 좋은데 그냥 키우면 역시 사용자가 깜짝 놀랄 것 같아서, 안내 메시지와 "닫기", "이전 모습으로 돌리기 (60일간)" 같은 게 들어간 안내를 추가하고 싶습니다.

[lens0021]

단계를 나눠서 적용을 해보고 싶은데 우선 다음과 같이 구상중입니다.

1. 가입자 opt-in
2. 비로그인 사용자 적용 + 가입자 opt-in
3. 비로그인 사용자 적용 + 가입자 opt-in + 가입자 opt-in 권고 안내 표시
4. 비로그인 사용자 적용 + 가입자 opt-out - 위 단계를 매우 길게 한다면 생략 가능
5. 전체 적용, legacy 삭제

[simnalamburt]

좋긴한데 넘 세세해서 작업량을 감당하실 수 있으시겠서요?

[lens0021]

그러게요... 좀 더 줄여서 아래처럼 세 단계로 해보겠습니다

1. 가입자 opt-in
2. 가입자 opt-in + 가입자 opt-in 권고 안내 표시 + 비로그인 사용자 적용
3. 전체 적용, legacy 삭제

[simnalamburt]

적용된거 켜봤는데 아주 좋내요

[lens0021]

책날개 틀이랑 궁합이 안 좋은거 같아서 단기적으로 숫자만 바꾸거나 or 스킨에서 직접 지원하거나 해야 할거같습니다

[simnalamburt]

"가입자 opt-in + 가입자 opt-in 권고 안내 표시 + 비로그인 사용자 적용"로 갑시돡

[lens0021]

"가입자 opt-in + 가입자 opt-in 권고 안내 표시 + 비로그인 사용자 적용"로 갑시돡

가입자 opt-in 권고 안내 표시 ← 이거 구현 안해서

"가입자 opt-in + 비로그인 사용자 적용" 로 먼저 갑뉘돡

[lens0021]

현재 상태는
"기존 가입자 opt-in + 비로그인 사용자 적용 + 신규 가입자 opt-out + 환경설정 명시적으로 초기화 시 비활성화" 이렇게입니다.
"기존 가입자 opt-in + 비로그인 사용자 적용 + 신규 가입자 opt-out + 환경설정 명시적으로 초기화 시 활성화"로 변경하여야 합니다.

[lens0021]

기존 가입자 opt-in + 비로그인 사용자 적용 + 신규 가입자 opt-out + 환경설정 명시적으로 초기화 시 활성화

femiwiki/femiwiki#301 에서 적용되었습니다. 다음 단계는

"가입자 opt-in + 활성화 중이 아닌 가입자에게 opt-in 강권 안내 표시 + 비로그인 사용자 적용"

입니다.