아토믹 디자인: 맞춤형 병원 웹사이트 제작이 일관성을 잃지 않는 법
브래드 프로스트의 아토믹 디자인은 화면을 원자→분자→유기체로 조립하는 설계 방법론입니다. '맞춤'과 '일관성'이 충돌하지 않게 만드는 이 접근은, 페이지가 수십 장으로 늘어나는 병원 사이트에서 특히 값집니다.
맞춤의 함정: 페이지마다 다른 사이트
맞춤 제작이 잘못 흐르면 페이지마다 규칙이 다른 사이트가 됩니다. 버튼 모양이 세 가지, 제목 크기가 다섯 가지로 제각각이면 사용자는 페이지를 넘길 때마다 새로 학습해야 하고, 유지보수 비용은 페이지 수에 비례해 커집니다.
원자에서 시작하는 맞춤
아토믹 디자인의 답은 부품 단위의 맞춤입니다. 색·타이포·버튼 같은 원자를 병원의 브랜드로 먼저 정의하고, 그 조합으로 카드·폼(분자), 섹션(유기체)을 조립합니다. 이러면 진료과 페이지가 열 장으로 늘어도 전부 '같은 병원'으로 보입니다.
맞춤형 병원 웹사이트 제작에서는 '컴포넌트 목록이 있습니까?'라고 확인해야 합니다. 부품 목록 없이 페이지를 낱장으로 그리는 곳은, 열 페이지째부터 일관성이 무너집니다.
이 사이트도 같은 방식으로
저희 사이트의 랜딩 9종이 스탯 카드·체크 칩·FAQ·관련 글 같은 공통 부품의 조합으로 만들어진 것도 같은 원리입니다. 내용은 진료과마다 다르지만 문법은 하나입니다. 그래서 페이지를 늘리는 비용이 낮고, 사용자는 어디서든 길을 잃지 않습니다.
참고 자료
사례와 실측 데이터로 보기홈페이지 제작