FANDOM


Breakpoints-blogheader.png


이 블로그 글에서 소개한 일부 내용은 변경되었을 수 있습니다. 자세한 사항은 글을 참고해 주세요!


안녕하세요, 여러분! 모두 아시다시피 저희는 작년에 문서 레이아웃 프로토타입을 출시해 몇몇 테스트를 시행했고, 그로부터 많은 피드백을 얻을 수 있었습니다. 그렇게 얻은 피드백은 저희가 앞으로 어떤 식으로 문서 레이아웃을 개선해 나갈지를 결정하는 데 큰 도움이 되었습니다. 그것 외에도 또, 어떤 것이 적절하고, 어떤 것이 부적절한지 배우는 데에도 도움이 되었습니다. (예를 들어, 오른쪽 사이드바 제거는 부적절했습니다.) 저희는 앞으로도 문서 레이아웃 개선을 위한 업데이트를 지속하겠지만, 이제부터는 레이아웃의 한 부분 한 부분씩 순차적으로 개선해 나갈 예정입니다. 이러한 업데이트 방식은 저번 1월에 진행했던 글로벌 내비게이션 업데이트와 비슷하다고 볼 수 있습니다만, 이번에는 업데이트가 완전히 완료되기까지 더 오랜 시간이 걸릴 것입니다.

가장 먼저 할 일은 위키아의 반응형 레이아웃에 브레이크포인트를 추가하고, 그와 관련해서 타이포그래피를 업데이트하는 것입니다. 타이포그래피 변경은 가장 큰 브레이크포인트에서만 발생합니다. 저희는 가장 큰 브레이크포인트를 데스크톱 XL이라고 부르며 이의 기준은 폭 1575px 이상입니다. 아래는 데스크톱 XL에서의 업데이트 전/후 비교 사진을 나열해 둔 갤러리입니다. 갤러리를 통해 전체적인 업데이트 내용을 확인하시고 스크롤을 내려 각 업데이트에 대한 더 자세한 정보를 알아 보세요.

브레이크포인트

브레이크포인트가 적용되고 나면 기존의 "유동적"인 레이아웃에서 벗어나 더 예측하기 쉬운 레이아웃을 사용할 수 있게 됩니다. 이러한 레이아웃은 특정 틀이 문서에 사용됐을 때 깨지거나 이상하게 보이는 현상을 줄여 줍니다. 저희가 브레이크포인트를 적용한 이유는 넓은 화면에서도 문서가 이상적으로 표시되도록 하기 위해입니다. 화면 폭은 브라우저 뷰포트에 의해 정의됩니다. 스크롤바는 화면 폭에 포함되지 않으므로 참고해 주세요.

각 브레이크포인트와 그에 일치하는 화면 폭 목록:

알림: 데스크톱과 가로 태블릿용 브레이크포인트가 추가되었습니다.


브레이크포인트 표.png

타이포그래피

저희는 이 업데이트에서 가독성과 글줄 길이를 현대식 UX(사용자 경험)에 맞추고자 합니다. (추천 관행 또한 문서 외관에 사용자 경험을 도입하기 위한 방법 중 하나였습니다.) 현재 위키아에선 화면 폭에 따라 글줄 길이만 바뀔 뿐 글꼴 크기나 행간 길이는 바뀌지 않았습니다. 하지만 이 업데이트가 적용되고 나면 앞으로는 데스크톱 XL 레이아웃에서 글꼴 크기와 행간 길이도 함께 바뀌게 될 것입니다. 데스크톱/태블릿 레이아웃에서의 글꼴 크기는 그대로입니다. 변경은 데스크톱 XL 레이아웃에만 적용됩니다.

각 브레이크포인트에 따른 타이포그래피 변경 목록:

타이포그래피 표.png


저희는 문단 제목, 본문, 인용문에만 타이포그래피 변경을 적용할 계획입니다. 다만 한 가지 문제가 있는데, 제대로된 클래스(Class)를 부여 받지 않은 틀은 타이포그래피 변경에 영향을 받아서 레이아웃이 깨질 가능성이 있다는 점입니다. 이러한 문제들은 대부분 틀에 제대로 된 클래스 이름을 부여하거나 CSS를 조금 수정하면 해결됩니다. 저희는 현재 발생할 수 있는 오류, 그 오류가 발생한 이유, 추천하는 해결법 등을 정리하는 중이며 이곳에서 작업물을 확인하실 수 있습니다.

새로운 레이아웃 미리 보기

새로운 레이아웃의 브레이크포인트와 타이포그래피를 확인하고 싶으시다면 원하는 페이지의 URL에 아래 쿼리 스트링을 추가해 주세요.

브레이크포인트 업데이트는 태평양 표준시로 5월 19일 화요일, 위키아 전역에 적용됩니다. 깨지거나 정상적이지 않은 요소를 발견하셨다면 먼저 도움말 문서에 해결 방법이 적혀 있는지 확인해 주세요. 해결 방법이 적혀 있지 않다면 댓글이나 “특수기능:문의”를 통해 저희에게 문제를 알려 주세요.

업데이트: 5월 21일

스크롤바 관련 문제를 해결하기 위해 브레이크포인트를 약간 변경하였습니다. 이제 데스크톱 브레이크포인트는 1084px이며 데스크톱 XL 브레이크포인트는 1595px입니다. 그에 따라 이 블로그 글의 표와 도움말 문서의 정보가 수정되었습니다.

팬덤 중앙 커뮤니티 팬덤 아이콘.png
문의 - 허브 - 관리자 권한 요청 - 다국어 연결 요청 - 스포트라이트 요청 트위터.png 블로그.png

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Also on FANDOM

Random Wiki