참고 문헌
이 책이 근거로 삼은 외부 자료입니다. 모두 Leysys 정본 문서가 공식 출처로 인용한 것이고, 오른쪽 열은 그 자료를 쓴 장입니다.
Leysys 내부 정본(leysys-design과 Leysys Docs)은 각 장 끝의 「정본」에 있습니다. 외부 자료의 내용은 정본 문서가 확인한 시점의 것이며, 이후 바뀌었을 수 있습니다.
디자인 시스템과 UI 라이브러리
| 자료 | 주소 | 장 |
|---|---|---|
| shadcn/ui | https://ui.shadcn.com (새 탭) | 1, 2, 3, 4, 5, 7, 12, 14, 15, 24 |
| shadcn/ui Registry | https://ui.shadcn.com/docs/registry (새 탭) | 15 |
| Nuxt UI | https://ui.nuxt.com (새 탭) | 2, 3, 4, 5, 7, 8, 9, 12, 15 |
| Nuxt UI Components | https://ui.nuxt.com/docs/components/ (새 탭) | 13, 15 |
| Material Design 3 | https://m3.material.io (새 탭) | 2, 3, 4, 15 |
| Atlassian Design System | https://atlassian.design (새 탭) | 4, 11, 15 |
| Primer | https://primer.style (새 탭) | 2, 4, 7, 11, 13 |
| Tailwind CSS | https://tailwindcss.com/docs (새 탭) | 2, 7, 8, 9, 10, 11, 12, 13, 14, 16, 20 |
| Tailwind Catalyst | https://catalyst.tailwindui.com (새 탭) | 15 |
| Reka UI | https://reka-ui.com (새 탭) | 3, 4, 7, 8, 12, 13, 14, 15, 17 |
| Radix UI | https://radix-ui.com (새 탭) | 3, 7, 13, 14, 17 |
| Base UI | https://base-ui.com (새 탭) | 7, 13, 14, 17 |
| Headless UI | https://headlessui.com (새 탭) | 7 |
| Vue 3 | https://vuejs.org (새 탭) | 1, 14 |
색 강도와 형태 속성 이름의 근거 (9장)
| 자료 | 주소 |
|---|---|
| shadcn/ui Button | https://ui.shadcn.com/docs/components/base/button (새 탭) |
| Nuxt UI Button | https://ui.nuxt.com/docs/components/button (새 탭) |
| Ant Design Button | https://ant.design/components/button (새 탭) |
| Primer Button | https://primer.style/product/components/button (새 탭) |
| Radix Themes Button | https://www.radix-ui.com/themes/docs/components/button (새 탭) |
| Vue — Fallthrough Attributes | https://vuejs.org/guide/components/attrs (새 탭) |
| HTML Standard — Form controls | https://html.spec.whatwg.org/multipage/form-elements.html (새 탭) |
구조 컴포넌트 어휘의 근거 (13장)
| 자료 | 주소 |
|---|---|
| shadcn/ui Card | https://ui.shadcn.com/docs/components/base/card (새 탭) |
| shadcn/ui Sheet | https://ui.shadcn.com/docs/components/base/sheet (새 탭) |
| shadcn/ui Sidebar | https://ui.shadcn.com/docs/components/radix/sidebar (새 탭) |
| shadcn/ui Resizable | https://ui.shadcn.com/docs/components/base/resizable (새 탭) |
| Nuxt UI Dashboard template | https://github.com/nuxt-ui-templates/dashboard-vue (새 탭) |
| Primer PageLayout | https://primer.style/product/components/page-layout/ (새 탭) |
| Primer Stack | https://primer.style/product/components/stack/ (새 탭) |
| Primer Card | https://primer.style/product/components/card/ (새 탭) |
| Primer Overlay | https://primer.style/product/components/overlay/ (새 탭) |
미리보기 카드를 쓰지 않은 근거 (17장)
| 자료 | 주소 |
|---|---|
| Radix Hover Card | https://www.radix-ui.com/primitives/docs/components/hover-card (새 탭) |
| Reka UI HoverCard | https://reka-ui.com/docs/components/hover-card (새 탭) |
| Base UI Preview Card | https://base-ui.com/react/components/preview-card (새 탭) |
관례 비교에 쓰는 디자인 시스템 (4장)
검증 원칙의 관례 정합(P-CONVENTION)은 아래 16개 디자인 시스템 가운데 맥락이 같은 것의 다수 규칙을 기준으로 삼습니다.
| 디자인 시스템 | 맥락 | 주소 |
|---|---|---|
| Material Design | 웹·모바일 | https://m3.material.io (새 탭) |
| Human Interface Guidelines | 모바일 | https://developer.apple.com/design/human-interface-guidelines (새 탭) |
| Fluent | 웹·모바일 | https://fluent2.microsoft.design (새 탭) |
| Carbon | 웹 | https://carbondesignsystem.com (새 탭) |
| Polaris | 웹 | https://polaris.shopify.com (새 탭) |
| Lightning | 웹 | https://www.lightningdesignsystem.com (새 탭) |
| Atlassian Design System | 웹 | https://atlassian.design (새 탭) |
| Primer | 웹 | https://primer.style (새 탭) |
| Spectrum | 웹·모바일 | https://spectrum.adobe.com (새 탭) |
| Base Web | 웹 | https://baseweb.design (새 탭) |
| Ant Design | 웹 | https://ant.design (새 탭) |
| Chakra UI | 웹 | https://chakra-ui.com (새 탭) |
| shadcn/ui | 웹 | https://ui.shadcn.com (새 탭) |
| Nuxt UI | 웹 | https://ui.nuxt.com (새 탭) |
| Material UI (MUI) | 웹 | https://mui.com (새 탭) |
| Toss MDS | 모바일 | https://tossmini-docs.toss.im/tds-mobile/ (새 탭) |
웹 표준과 접근성
| 자료 | 주소 | 장 |
|---|---|---|
| W3C WCAG 2.2 | https://www.w3.org/TR/WCAG22/ (새 탭) | 9, 10, 12, 17 |
| Understanding WCAG 2.2 SC 2.5.8 Target Size (Minimum) | https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html (새 탭) | 10, 17 |
MDN <dialog> | https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog (새 탭) | 14 |
| web.dev — dialog와 popover | https://web.dev/articles/baseline-in-action-dialog-popover (새 탭) | 14 |
| MDN Top layer | https://developer.mozilla.org/en-US/docs/Glossary/Top_layer (새 탭) | 14 |
| CSS Transforms Level 2 — individual transforms | https://drafts.csswg.org/css-transforms-2/#individual-transforms (새 탭) | 14 |
CSSOM View — scrollIntoView | https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview (새 탭) | 17 |
| W3C PROV-DM | https://www.w3.org/TR/prov-dm/ (새 탭) | 16, 22 |
글꼴
| 자료 | 주소 | 장 |
|---|---|---|
| Noto fonts | https://github.com/notofonts (새 탭) | 11 |
| Noto CJK | https://github.com/notofonts/noto-cjk (새 탭) | 11 |
| Google Sans Flex | https://fonts.google.com/metadata/fonts/Google Sans Flex (새 탭) | 11 |
| Cinzel | https://github.com/google/fonts/blob/main/ofl/cinzel/METADATA.pb (새 탭) | 11 |
| Poppins | https://github.com/google/fonts/blob/main/ofl/poppins/METADATA.pb (새 탭) | 11 |
| SIL Open Font License FAQ | https://openfontlicense.org/ofl-faq/ (새 탭) | 11 |
업무 기록 패턴 (16장)
| 자료 | 주소 |
|---|---|
| HubSpot — Associate activities with records | https://knowledge.hubspot.com/records/associate-activities-with-records (새 탭) |
| HubSpot — View record property history | https://knowledge.hubspot.com/records/view-record-property-history (새 탭) |
| Pipedrive — How is Pipedrive data organized | https://support.pipedrive.com/en/article/how-is-pipedrive-data-organized (새 탭) |
| Microsoft Dynamics 365 — Manage activities | https://learn.microsoft.com/en-us/dynamics365/sales/manage-activities (새 탭) |
| Atlaskit profilecard | https://atlaskit.atlassian.com/packages/people-and-teams/profilecard (새 탭) |
| Fluent 2 Persona | https://fluent2.microsoft.design/components/web/react/core/persona/usage (새 탭) |
접근 권한과 계정 (22장)
이름과 인프라 (19장)
| 자료 | 주소 |
|---|---|
| RFC 1035 — Preferred name syntax | https://www.rfc-editor.org/rfc/rfc1035.html#section-2.3.1 (새 탭) |
| RFC 9525 — TLS wildcard matching | https://www.rfc-editor.org/rfc/rfc9525.html#section-6.3 (새 탭) |
| AWS Certificate Manager — Wildcard certificate | https://docs.aws.amazon.com/acm/latest/userguide/acm-concepts.html#wildcard-certificate (새 탭) |
| Azure Architecture Center — Backends for Frontends | https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends (새 탭) |
| Microsoft — Customer portal administration | https://learn.microsoft.com/en-us/dynamics365/supply-chain/sales-marketing/customer-portal-user-admin (새 탭) |
| Microsoft — Manage customers in Partner Center | https://learn.microsoft.com/en-us/partner-center/customers/manage-user-accounts (새 탭) |
법령 (23장)
| 자료 | 주소 |
|---|---|
| 법제처 찾기쉬운 생활법령정보 — 신용카드 가맹점 | https://easylaw.go.kr/CSP/CnpClsMain.laf?popMenu=ov&csmSeq=585&ccfNo=3&cciNo=2&cnpClsNo=1 (새 탭) |