<aside> 📃

목차

</aside>

1. 폰트

• 나눔고딕: 현대적이고 간결한 디자인
• 나눔스퀘어: 모던하면서도 단단한 인상을 주어, 버튼이나 헤드라인에 활용
• Pretendard: 자주 사용되는 추천 글꼴

2. 색상 활용 (다크모드)

• #1C2137: 메인 배경색으로 사용되어 전체적인 다크모드의 기반이 됩니다.
• #094AF9: 강조가 필요한 요소나 주요 액션 버튼에 사용되는 브랜드 컬러입니다.
• #F0F4FA: 부드러운 텍스트나 보조 요소에 사용되어 가독성을 높여줍니다.
• #FFFFFF: 주요 텍스트 색상으로 사용되어 높은 대비를 제공합니다.
• 추가 활용 색상:
  • rgba(240, 244, 250, 0.05): 카드 배경에 사용되어 깊이감을 제공합니다.
  • rgba(9, 74, 249, 0.2): 테두리나 구분선에 사용되어 요소간 경계를 부드럽게 표현합니다.
  • rgba(9, 74, 249, 0.1): 헤더 배경이나 hover 효과에 사용되어 미묘한 상호작용을 표현합니다.
• 상호작용 효과:
  • Hover 시 배경색: rgba(240, 244, 250, 0.08)
  • 그림자 효과: rgba(9, 74, 249, 0.2)
  • 테두리 강조: rgba(9, 74, 249, 0.3)

3. 웹 사이트 전체 좌우 크기

• width: 90vw

4. 간격 (Padding/Margin)

최근 트렌드는 넓은 여백을 활용하여 깔끔한 레이아웃을 구성하는 것입니다. 추천하는 간격 세팅은 다음과 같습니다:

• 본문 Padding: 40 ~ 60px
• 컴포넌트 간격: 16 ~ 24px

5. Radius

컴포넌트는 모서리가 둥근것이 필수