8.0 KiB

Raw Blame History

모던 CSS로 은행 앱 스타일링하기

프로젝트 개요

기능적인 은행 애플리케이션을 시각적으로 매력적이고 전문적인 웹 앱으로 변환하세요. 현대적인 CSS 기법을 사용하여 사용자 경험을 향상시키면서 접근성과 반응형 디자인 원칙을 유지하는 일관된 디자인 시스템을 만듭니다.

이 과제는 최신 웹 디자인 패턴을 적용하고, 일관된 시각적 정체성을 구현하며, 사용자가 매력적이고 직관적으로 탐색할 수 있는 인터페이스를 만드는 도전을 제공합니다.

지침

1단계: 스타일시트 설정하기

CSS 기초 만들기:

프로젝트 루트에 styles.css라는 새 파일을 만드세요.
index.html 파일에 스타일시트를 연결하세요:
```
<link rel="stylesheet" href="styles.css">
```

CSS 리셋과 현대적인 기본값으로 시작하세요:

/* Modern CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

2단계: 디자인 시스템 요구사항

다음 필수 디자인 요소를 구현하세요:

색상 팔레트

기본 색상: 버튼과 하이라이트에 적합한 전문적인 색상 선택
보조 색상: 강조 및 보조 동작을 위한 보색
중립 색상: 텍스트, 테두리, 배경에 사용할 회색
성공/오류 색상: 성공 상태에 녹색, 오류에 빨강색 사용

타이포그래피

헤딩 계층 구조: H1, H2, H3 요소 간 명확한 구분
본문 텍스트: 읽기 쉬운 글자 크기(최소 16px)와 적절한 줄 높이
폼 라벨: 명확하고 접근성 높은 텍스트 스타일링

레이아웃 및 간격

일관된 간격: 8px, 16px, 24px, 32px 스케일 사용
그리드 시스템: 폼과 콘텐츠 섹션을 위한 체계적인 레이아웃
반응형 디자인: 모바일 우선 접근법과 브레이크포인트 적용

3단계: 컴포넌트 스타일링

다음 특정 컴포넌트를 스타일링하세요:

폼

입력 필드: 전문적인 테두리, 포커스 상태, 유효성 검사 스타일링
버튼: 호버 효과, 비활성 상태, 로딩 표시기
라벨: 명확한 위치 지정과 필수 입력 표시기
오류 메시지: 눈에 띄는 오류 스타일과 유용한 메시지

콘텐츠 영역

섹션: 서로 다른 영역 간 명확한 시각적 구분
카드: 카드 기반 레이아웃 사용 시 그림자와 테두리 포함
배경: 적절한 여백과 은은한 배경 활용

4단계: 고급 기능 (선택 사항)

다음 고급 기능 구현을 고려하세요:

다크 모드: 밝은 테마와 어두운 테마 간 전환
애니메이션: 부드러운 전환 및 마이크로 인터랙션
로딩 상태: 폼 제출 중 시각적 피드백
반응형 이미지: 다양한 화면 크기에 최적화된 이미지

디자인 영감

모던 은행 앱 특징:

깔끔하고 미니멀한 디자인과 충분한 여백
전문적인 색상 조합(파랑, 녹색 또는 세련된 중립색)
명확한 시각적 계층 구조와 눈에 띄는 CTA 버튼
WCAG 기준을 충족하는 접근성 대비 비율
모든 기기에서 작동하는 모바일 반응형 레이아웃

기술 요구 사항

CSS 구성

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

접근성 요구사항

색상 대비: 일반 텍스트에 대해 최소 4.5:1 비율 보장
포커스 표시기: 키보드 네비게이션을 위한 명확한 포커스 상태
폼 라벨: 입력 요소와 적절히 연관
반응형 디자인: 320px에서 1920px 너비 화면에서 사용 가능

평가 기준

기준	우수(A)	보통(B)	발전(C)	부족(F)
디자인 시스템	색상, 타이포그래피, 간격을 일관성 있게 적용한 포괄적인 디자인 시스템 구현	명확한 디자인 패턴과 좋은 시각적 계층 구조로 일관된 스타일링 사용	일부 일관성 문제 또는 디자인 요소 누락이 있는 기본 스타일링 적용	최소한의 스타일링으로 일관성 없거나 상충하는 디자인 선택
사용자 경험	뛰어난 사용 편의성과 시각적 매력을 갖춘 직관적이고 전문적인 인터페이스 생성	명확한 내비게이션과 읽기 쉬운 콘텐츠를 제공하여 좋은 사용자 경험 유지	일부 UX 개선이 필요한 기본적인 사용성	사용성이 부족하여 탐색이나 읽기 어려움
기술 구현	현대적인 CSS 기법 사용, 잘 조직된 코드 구조, 모범 사례 준수	적절한 기법과 좋은 조직으로 CSS 효과적 구현	CSS는 작동하지만 조직과 현대적 접근법 부족	기술적 문제나 브라우저 호환성 문제를 포함한 열악한 CSS 구현
반응형 디자인	모든 기기 크기에서 완벽하게 작동하는 완전한 반응형 디자인	일부 화면 크기에서 경미한 문제를 제외한 좋은 반응형 동작	일부 레이아웃 문제를 포함한 기본 반응형 구현	반응형이 아니거나 모바일 기기에서 심각한 문제 존재
접근성	뛰어난 키보드 네비게이션과 스크린 리더 지원으로 WCAG 가이드라인 충족	적절한 대비 및 포커스 표시기로 좋은 접근성 유지	일부 요소 누락이 있는 기본적인 접근성 고려	장애 사용자에게 어려운 부족한 접근성

제출 안내

제출 시 포함할 내용:

styles.css: 완성된 스타일시트
수정된 HTML: 변경한 HTML 파일
스크린샷: 데스크톱 및 모바일에서의 디자인 이미지
README: 디자인 선택과 색상 팔레트에 대한 간단한 설명

보너스 점수:

유지 관리가 쉬운 테마 적용을 위한 CSS 사용자 정의 속성
그리드, 플렉스박스 또는 CSS 애니메이션과 같은 고급 CSS 기능
최적화된 CSS 및 최소 파일 크기 등 성능 고려사항
다양한 브라우저 간 호환성 테스트

💡 전문가 팁: 모바일 디자인부터 시작한 후, 큰 화면에 맞게 향상시키세요. 이 모바일 우선 접근법은 모든 기기에서 앱이 잘 작동하도록 보장하며 최신 웹 개발 모범 사례를 따릅니다.

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확한 부분이 있을 수 있음을 유의해 주시기 바랍니다. 원본 문서는 해당 언어의 원문이 권위 있는 출처로 간주되어야 합니다. 중요한 정보에 대해서는 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 인해 발생하는 오해나 오해에 대하여 당사는 책임을 지지 않습니다.

8.0 KiB Raw Blame History