기본 레이아웃 기준
로고 및 메뉴 영역 : 약 80px 높이
메뉴 구성 : 텍스트 + 아이콘 혼합 사용
반응형 기준 : 중앙 정렬 구조
1620 / 1440 / 1280 기준으로 설계
폰트 기준
공통 폰트 : Noto Sans KR / Pretendard
Header 설계
메뉴
폰트 사이즈 : 16 ~ 22px (기본 18px 권장)
굵기 : Bold
자간 : 과하지 않게 자연스럽게
기준 : 사람이 읽기 편한 시선 흐름 유지
정리 기준
포토샵 사용 시 레이어 구조 명확히 정리
그룹화 및 네이밍 필수
아이콘 및 그래픽
로그인 아이콘
일러스트로 제작 후 활용
스마트 오브젝트로 변환 후 재사용 가능
배경 이미지 적용
크리핑 마스크(Clipping Mask) 활용
영역에 맞게 이미지 제한
흰색 텍스트 처리
배경 위에 검은색을 낮은 투명도로 깔아서 가독성 확보
섹션(본문 영역)
문단 텍스트 : 16 ~ 24px (권장 18~20px)
타이틀
본문보다 강조되도록 설정
색상은 너무 강하지 않게 조절하여 계층 구조 형성
인터랙션
인터랙티브 요소 필수
버튼 Hover 효과
클릭 시 반응
스크롤 시 변화
목적
사용자의 행동 유도
단순 시각이 아닌 사용 경험 설계
핵심 정리
디자인은 단순히 배치하는 것이 아니라
가독성, 구조, 반응성까지 포함한 사용자 경험 설계다.
로고 및 메뉴 영역 : 약 80px 높이
메뉴 구성 : 텍스트 + 아이콘 혼합 사용
반응형 기준 : 중앙 정렬 구조
1620 / 1440 / 1280 기준으로 설계
폰트 기준
공통 폰트 : Noto Sans KR / Pretendard
Header 설계
메뉴
폰트 사이즈 : 16 ~ 22px (기본 18px 권장)
굵기 : Bold
자간 : 과하지 않게 자연스럽게
기준 : 사람이 읽기 편한 시선 흐름 유지
정리 기준
포토샵 사용 시 레이어 구조 명확히 정리
그룹화 및 네이밍 필수
아이콘 및 그래픽
로그인 아이콘
일러스트로 제작 후 활용
스마트 오브젝트로 변환 후 재사용 가능
배경 이미지 적용
크리핑 마스크(Clipping Mask) 활용
영역에 맞게 이미지 제한
흰색 텍스트 처리
배경 위에 검은색을 낮은 투명도로 깔아서 가독성 확보
섹션(본문 영역)
문단 텍스트 : 16 ~ 24px (권장 18~20px)
타이틀
본문보다 강조되도록 설정
색상은 너무 강하지 않게 조절하여 계층 구조 형성
인터랙션
인터랙티브 요소 필수
버튼 Hover 효과
클릭 시 반응
스크롤 시 변화
목적
사용자의 행동 유도
단순 시각이 아닌 사용 경험 설계
핵심 정리
디자인은 단순히 배치하는 것이 아니라
가독성, 구조, 반응성까지 포함한 사용자 경험 설계다.
#기본 레이아웃 기준