# 도형

Published: November 5, 2023


Gwern Branwen의 [디자인 개요](https://gwern.net/design)에서 영감을 받아, 이 페이지는 이 웹사이트뿐만 아니라 저가 진행하는 모든 프로젝트 뒤에 있는 디자인 철학을 문서화합니다.

**Lagomor.ph**는 표준 마크다운을 통해 [Hugo](https://gohugo.io/)로 컴파일된 정적 웹사이트로, 토론토의 클라우드 서버에 호스팅됩니다.

> "사람들과 그들이 살아가는 현실에 대한 무관심은 실제로 디자인에서 유일하고도 가장 큰 죄입니다."
>
> 디터 람스

이 웹사이트는 읽기 쉽고, 눈에 즐겁게 보이며, 탐색하기 쉽도록 설계되었습니다.
각 페이지에서 종종 유일한 이미지인 로고는 [Rek Bell]()이 그렸습니다.

![파나소닉이 만든 수많은 제품들로 둘러싸인 마쓰시타 고노스케](https://ik.imagekit.io/lagomorph/Matsushita_eTwwW4T8K.jpg)
{{< caption >}}
파나소닉을 위해 그가 도움을 만든 수많은 제품들로 둘러싸인 마쓰시타 고노스케
{{</ caption >}}
# 기본 원칙

1. **제공성은 명확해야 합니다**

    [도널드 노먼](https://en.wikipedia.org/wiki/Donald_Norman)의 책 [*일상의 디자인*](https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things)은 디자인에서 제공성의 개념을 강조합니다. 제공성은 객체가 어떻게 사용될 수 있는지를 나타내는 객체의 속성을 말하며, 본질적으로 객체가 제시하는 행동의 가능성을 의미합니다. 좋은 디자인에서는 이러한 제공성이 명확해야 사용자가 한눈에 객체와 상호작용하는 방법을 이해할 수 있습니다.

    이 사이트의 맥락에서는 숨겨진 콘텐츠, 드롭다운 메뉴, 또는 ["햄버거 버튼"](https://en.wikipedia.org/wiki/Hamburger_button)이 없습니다. 하이퍼링크는 인라인으로 밑줄이 있고 명확하게 표시됩니다. 텍스트 대신 기호가 사용되는 경우, 아이콘이 무엇을 나타내는지 명확하며, 마우스를 올리면 텍스트로 설명되는 툴팁이 나타납니다.
2. **브루탈하게, 미니멀하게**

    [브루탈리즘](https://en.wikipedia.org/wiki/Brutalist_architecture)은 건축 양식으로, 장식적 디자인보다 건축의 원재료와 구조적 요소를 드러내는 것을 특징으로 합니다. 웹 디자인에서 "브루탈리스트" 웹사이트는 가능한 한 많은 기본 웹 브라우저 기능을 활용하며, 필요한 경우에만 자바스크립트나 CSS를 보완하는 웹사이트입니다.

    [미니멀리즘](https://en.wikipedia.org/wiki/Minimalism)은 의도나 메시지를 전달하기 위해 가능한 한 적은 디자인을 사용하는 아이디어입니다. [^1]

    이 웹사이트는 *적당한 디자인*을 사용하여 이 두 사상 사이의 미묘한 균형을 추구합니다. 적지만, 더 나은 것. 글은 종밀하게 작성되므로 가독성을 위해 세리프 글꼴을 선호합니다. 이미지는 내장된 브라우저 기능을 사용하며 자바스크립트가 필요하지 않습니다 - 자바스크립트는 선택적 기능에 사용됩니다 - 이 사이트의 텍스트를 자바스크립트 없이 읽을 수 있습니다. [^2]
3. **가능한 한 적은 계산을 사용하세요**

    컴퓨터는 매우 강력하고 능력이 되었지만, 좋은 디자인은 가능한 한 적은 자원을 사용하려고 노력해야 합니다. 이 디자인 철학은 기능보다 사용의 속도와 효율성을 강조하지만, 이것이 새롭고 실험적인 브라우저 기능을 완전히 활용하지 않는다는 의미는 아닙니다. 이 웹페이지는 터미널 브라우저를 포함한 거의 모든 브라우저에서 열릴 수 있습니다. [^3]

4. **모든 것은 하나의 일만, 그리고 잘해야 합니다**

    멀티태스커는 제 존재의 저주입니다. 스마트폰은 모든 것을 할 수 있지만 모든 것을 제대로 할 수는 없습니다. 모두가 사용할 수 있는 도구를 만들려고 시도할 때, 누구에게나 사용성을 희생하는 무언가를 만들게 됩니다.

    사람들은 종종 이것에 대해 저와 논쟁합니다. "주방 칼은 어때요? 주방 칼은 모든 것을 자를 수 있으며, 많은 상황에서 사용할 수 있으므로 멀티태스커입니다." 아니요. 칼은 (해야 할) 하나의 일만 해야 합니다 - 자르는 것 - 그 이상은 아닙니다. 무엇을 자를지는 최종 사용자에게 달려 있지만, 그 목적은 명확하며 파스타를 끓이는 데 사용할 수 없습니다.

# 기타 원칙

- 클릭할 수 있는 모든 UI 요소는 하이퍼링크와 동일한 방식으로 스타일링되어야 합니다. [^4]
- 정보는 SEO를 희생하더라도 가능한 한 간결하게 전달되어야 합니다. [^5]
- 저자보다 정보.
- 당신이 만드는 모든 것은 해당 카테고리에서 가장 작은 기기에서 작동해야 합니다.
- 당연시되는 모든 것은 검토되어야 합니다.
- 당신이 만드는 기기에 실제로 시계 표시가 필요한지 강력하게 고려해야 합니다.

# 디자인 영감

- [도널드 노먼](https://en.wikipedia.org/wiki/Donald_Norman)
- [마리에 콘도](https://konmari.com/)
- [디터 람스](https://en.wikipedia.org/wiki/Dieter_Rams)
- [마쓰시타 고노스케](https://en.wikipedia.org/wiki/K%C5%8Dnosuke_Matsushita)

# 각주 

[^1]: 이 정의에 대해 끝없이 저와 논쟁할 수 있지만, 매우 간결하고 모든 것을 포괄하지 않는 정의라는 것을 이해합니다.
[^2]: 이것은 거짓말입니다; MathJax를 사용하는 페이지는 자바스크립트가 필요하지만 - 자바스크립트 없는 솔루션이 개발 중입니다.
[^3]: NetSurf에서는 작동하지 않습니다. NetSurf는 모든 HTML5 사양을 지원하지 않으며 CSS3도 지원하지 않기 때문입니다. 이것은 저에게 있어 거부 조건이며, 저는 웹사이트를 조정하여 이를 수용하려 하지 않을 것입니다.
[^4]: 버튼은 예외로, 그 제공성이 충분히 명확한 스키포믹 디자인이기 때문입니다.
[^5]: 당신을 보고 있어요, 모든 레시피 웹사이트들.