#design-principles
노트 5개
Frontend
Frontend Architecture폴더 구조, 의존성, SOLID, Feature-Sliced Design처럼 프론트엔드 코드를 어떻게 나누고 어디에 두는지에 관한 설계 원칙 모음.
Frontend › Architecture
추상화 계층과 데이터 흐름요구사항을 데이터로 표현하면 구현이 되고, 구현에 알맞은 수준의 이름을 붙이면 추상화가 된다. 잘 변하지 않는 추상화가 쌓여 계층이 되고, 계층 사이를 사용자 중심으로 순환하는 데이터 흐름이 코드의 자리를 정한다. 요구사항을 이 계층과 흐름의 구간으로 쪼개 채우는 사고법(그라데이션 사고)을 정리한다.
Frontend › Architecture
프론트엔드에서 관심사의 분리관심사의 분리는 한 단위가 하나의 선명한 기준으로 구분되게 해 인지 부하를 줄이는 일이다. 프론트엔드는 역할(HTML·CSS·JS) → 기능(컴포넌트) → 컴포넌트 안의 다시 계층으로 분리 축을 바꿔 왔고, 관심사는 모듈·레이어·데이터 흐름 여러 방향이 있어 프로젝트 시기마다 우선순위가 달라진다.
Frontend › UI Design
나쁜 아이콘과 좋은 아이콘: 아이콘 사용성아이콘은 잘 만들면 텍스트보다 빨리 읽히지만, 의미가 모호하면 퍼즐이 되고 시각적 잡음이 된다. 나쁜 아이콘의 다섯 가지 유형, 아이콘의 비용과 이점, 좋은 아이콘의 조건을 정리했다. 결론은 투자할 여력이 없으면 텍스트 링크가 낫다는 것이다.
Frontend › UI Design
인터페이스 심리학: 지각·인지·감정·사회적 반응사용성은 사람의 지각·인지 특성에 맞출 때 생긴다. 순서 있는 값은 밝기로·범주는 색상으로 보여 주는 지각 원리, 청킹, 어포던스, 재인과 회상, 초보자와 숙련자를 위한 여러 경로, 감성 컴퓨팅, 컴퓨터 매개 소통과 시선, 의인화와 불쾌한 골짜기, 그리고 설계가 사람에게 미치는 영향의 윤리를 정리한다.