Low-Tech Web Design
ロー・テック・ウェブ / 2018– / 양식 / UI 스타일
2018년 Kris De Decker와 동료들이 자신들의 Low-tech Magazine을 태양광 서버로 옮기고 그 제작 방법을 공개한 데서 시작된 웹의 양식이다. 사진은 흑백 4단계 디더로 떨어뜨리고 웹폰트는 하나도 불러오지 않으며, 페이지 뒤에 깔린 색면의 높이가 배터리 잔량을 알린다. 통신량 자체가 지면의 첫 번째 제약이 된다.
사진이 흑백 4단계 디더로 떨어져 점의 거친 결이 그대로 보인다 / 페이지 뒤 색면의 높이가 배터리 잔량을 나타내고 밤이나 궂은 날씨에는 내려간다 / 웹폰트를 하나도 불러오지 않아 본문이 고정폭이나 브라우저 기본 서체로 나온다 / 글의 분류마다 정해진 색이 지면에 입혀지는데 파랑 #162DAB, 빨강 #D11305, 초록 #006951이다
사전 항목
- 적합한 용도
- 전력도 회선도 넉넉하지 않은 독자를 위해 사진을 버리지 않고 한 자릿수 가벼운 기사 페이지를 만들 때 · 잔량이나 가동 시간 같은 상태를 숫자 표시가 아니라 화면 자체의 생김새로 전하고 싶을 때
- 타이포그래피
- 웹폰트를 불러오지 않고 고정폭이나 브라우저 기본 서체로 짜며 본문 폭은 33rem 안팎의 1단에 담는다.
- 구성
- 1단을 세로로 흘리고 장식 틀은 만들지 않는다. 이미지는 본문 폭을 넘겨 크게 놓아도 되지만 원본보다 가벼운 상태여야 한다.
- 재료
- 이미지를 흑백 4단계 디더로 변환하고 색은 분류별로 CSS 필터를 써서 나중에 입힌 다음, 배경 색면의 높이를 전원 잔량에 연결한다.
- 주의
- 디더의 겉모습만 흉내 내어 고해상도 사진에 필터를 씌우면 용량은 그대로인 채 가벼워 보이기만 하는 페이지가 된다.
- 더 읽을거리
- 2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述） / 同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑） / ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる
관련 항목
이 항목을 인용하기
사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.
- Link
- https://indexstyle.org/ko/styles/low-tech-web
- Markdown
- [Low-Tech Web Design — IndexStyle](https://indexstyle.org/ko/styles/low-tech-web)
- HTML
- <a href="https://indexstyle.org/ko/styles/low-tech-web">Low-Tech Web Design — IndexStyle</a>