Minimalism
"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.
FOR · 브랜드 사이트
브랜드 사이트는 기능을 파는 화면이 아닙니다. 방문자가 여기서 할 일은 대개 몇 개 없고 — 둘러보고, 느끼고, 기억하는 것 — 그래서 성패는 '무엇을 할 수 있는가'가 아니라 '어떤 인상이 남는가'에서 갈립니다. 이 유형에서만큼은 스타일이 곧 콘텐츠입니다.
방향은 브랜드가 서 있는 자리에 따라 갈립니다. 절제로 격을 만드는 브랜드라면 미니멀리즘·모노크롬이, 존재감으로 승부하는 브랜드라면 맥시멀리즘·멤피스 스타일이 맞습니다. 시간의 두께를 팔아야 하는 카페·양조·의류라면 레트로 & 빈티지가, 재료와 지속가능성을 말해야 하면 오가닉 & 내추럴이 이야기를 대신해 줍니다. 추상 & 기하학은 아직 제품 사진이 없는 초기 브랜드가 시각 자산을 스스로 만들어 내는 방법이고, 듀오톤은 출처가 다른 사진들을 브랜드 색 하나로 묶어 캠페인처럼 보이게 만듭니다.
브랜드 사이트에서 디자인 시스템은 표정을 정하는 도구가 아니라 무너지지 않게 받치는 뼈대입니다. 시즌마다 무드를 갈아끼워야 한다면 테마 팩만 바꿔 전체 톤을 전환하는 Astryx가, 페이지 수가 적고 빨리 세워야 한다면 Bootstrap이, 브랜드 사이트에서 제품·서비스 화면으로 이어지는 동선을 한 톤으로 유지해야 한다면 Material Design이 무난한 기준선입니다.
아래 화면은 캡처 이미지가 아니라 지금 이 자리에서 실제로 그려진 화면입니다. 같은 브랜드 사이트 씬에 스타일 규칙만 갈아입혔습니다.
"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.
과거의 디자인 요소를 현대적으로 재해석한 노스탤지어를 자극하는 스타일입니다.
이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다.
1980년대 포스트모던 디자인 운동에서 영감을 받은 대담하고 화려한 스타일입니다.
처음부터 그리지 않아도 되는 부분입니다. 표·폼·내비 같은 기본 부품이 이미 완성돼 있는 시스템을 기준선으로 두면 만들어야 할 목록이 줄어듭니다.
Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다.
세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다.
구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.
둘 다 어울리는데 어느 쪽인지 갈릴 때 — 같은 랜딩 한 페이지에 두 스타일을 나란히 입혀 무드 좌표와 장단점을 대조합니다.
마음에 드는 스타일을 픽에 담아 두면 개발자·디자이너에게 그대로 넘길 수 있는 디자인 브리프로 묶어 드립니다. 아직 고르기 어렵다면 취향 테스트가 여섯 문항으로 셋을 골라 드립니다.