[UI/UX] 로그인페이지 디자인 및 기능 개선 #11

New Issue

kyy · 2026-04-10T13:34:52+09:00

kyy commented

2026-04-10 13:34:52 +09:00

목표

로그인 페이지의 전반적인 UI/UX를 개선하여 현대적이고 전문적인 디자인을 적용하고, 사용자 편의성을 높입니다.

작업 계획

디자인 테마 변경
- 바탕색을 총괄기획실 브랜드 컬러인 다크 그린(#0f3d2e)으로 변경
- 중앙 이미지 컨테이너(App Shell) 도입 및 입체적인 레이어 구조 구현
- 이미지 박스에 두꺼운 아이보리 테두리(8px) 및 부드러운 곡률(20px) 적용
콘텐츠 및 타이틀 개선
- 시스템 상단 타이틀 추가: '총괄기획실', '기술기획팀 PM Login Demo'
- 로그인 카드 내 타이틀 및 설명 문구 간소화 ('로그인', 입력값 자동 감지 안내)
레이아웃 및 반응형 최적화
- 로그인 카드 크기 확대 및 여백 조정으로 가독성 향상
- 화면 크기에 따른 상하좌우 배경 여백 균형 최적화 (97vw, 96vh 적용)
- 모바일 환경에서의 곡률 및 테두리 굵기 세부 조정
기능적 개선 (향후)
- 입력값(숫자/문자)에 따른 로그인 필드 전환 애니메이션 강화
- 상태 표시 카드(Status Card) 스타일 최적화

### 목표 로그인 페이지의 전반적인 UI/UX를 개선하여 현대적이고 전문적인 디자인을 적용하고, 사용자 편의성을 높입니다. ### 작업 계획 1. **디자인 테마 변경** - 바탕색을 총괄기획실 브랜드 컬러인 다크 그린(#0f3d2e)으로 변경 - 중앙 이미지 컨테이너(App Shell) 도입 및 입체적인 레이어 구조 구현 - 이미지 박스에 두꺼운 아이보리 테두리(8px) 및 부드러운 곡률(20px) 적용 2. **콘텐츠 및 타이틀 개선** - 시스템 상단 타이틀 추가: '총괄기획실', '기술기획팀 PM Login Demo' - 로그인 카드 내 타이틀 및 설명 문구 간소화 ('로그인', 입력값 자동 감지 안내) 3. **레이아웃 및 반응형 최적화** - 로그인 카드 크기 확대 및 여백 조정으로 가독성 향상 - 화면 크기에 따른 상하좌우 배경 여백 균형 최적화 (97vw, 96vh 적용) - 모바일 환경에서의 곡률 및 테두리 굵기 세부 조정 4. **기능적 개선 (향후)** - 입력값(숫자/문자)에 따른 로그인 필드 전환 애니메이션 강화 - 상태 표시 카드(Status Card) 스타일 최적화

kyy added the

상태

개발진행

label 2026-04-10 13:35:10 +09:00

kyy self-assigned this 2026-04-10 13:35:12 +09:00

kyy commented

2026-04-10 13:36:02 +09:00

작업 완료 보고 (중간 보고)

현재까지 진행된 UI/UX 개선 사항을 정리하여 보고합니다.

1. 레이어 및 배경 디자인 적용

최하단 레이어: 버튼 컬러와 동일한 다크 그린(#0f3d2e) 배경색 적용.
이미지 컨테이너(App Shell):
- 화면을 거의 가득 채우는 97vw, 96vh 크기의 라운드 박스 구현.
- 8px 두께의 밝은 아이보리 테두리와 20px 곡률을 적용하여 액자 같은 시각 효과 부여.
- 배경 이미지 위에 다크 그린 그라데이션 오버레이를 씌워 가독성 확보.

2. 상단 시스템 타이틀 구현

계층형 타이틀: '총괄기획실'(1.4rem) 및 '기술기획팀 PM Login Demo'(2.8rem) 배치.
스타일: 카드 배경색과 동일한 아이보리색을 적용하고, 텍스트 그림자를 추가하여 선명도 향상.

3. 로그인 카드 최적화

색상 체계: 카드 배경을 아이보리 톤으로 변경하고, 내부의 모든 포인트 컬러(버튼, 라벨, 강조 텍스트 등)를 다크 그린 계열로 통일.
콘텐츠: 타이틀을 '로그인'으로 간소화하고 설명을 한 문장으로 최적화하여 인지 편의성 개선.
반응형: 모바일 기기에서도 일관된 디자인이 유지되도록 테두리 및 여백 자동 조정.

위 내용들은 현재 public/index.html 및 public/styles.css에 모두 반영되었습니다.

### 작업 완료 보고 (중간 보고) 현재까지 진행된 UI/UX 개선 사항을 정리하여 보고합니다. #### 1. 레이어 및 배경 디자인 적용 - **최하단 레이어**: 버튼 컬러와 동일한 **다크 그린(#0f3d2e)** 배경색 적용. - **이미지 컨테이너(App Shell)**: - 화면을 거의 가득 채우는 `97vw`, `96vh` 크기의 라운드 박스 구현. - **8px 두께의 밝은 아이보리 테두리**와 **20px 곡률**을 적용하여 액자 같은 시각 효과 부여. - 배경 이미지 위에 다크 그린 그라데이션 오버레이를 씌워 가독성 확보. #### 2. 상단 시스템 타이틀 구현 - **계층형 타이틀**: '총괄기획실'(1.4rem) 및 '기술기획팀 PM Login Demo'(2.8rem) 배치. - **스타일**: 카드 배경색과 동일한 **아이보리색**을 적용하고, 텍스트 그림자를 추가하여 선명도 향상. #### 3. 로그인 카드 최적화 - **색상 체계**: 카드 배경을 아이보리 톤으로 변경하고, 내부의 모든 포인트 컬러(버튼, 라벨, 강조 텍스트 등)를 다크 그린 계열로 통일. - **콘텐츠**: 타이틀을 '로그인'으로 간소화하고 설명을 한 문장으로 최적화하여 인지 편의성 개선. - **반응형**: 모바일 기기에서도 일관된 디자인이 유지되도록 테두리 및 여백 자동 조정. 위 내용들은 현재 `public/index.html` 및 `public/styles.css`에 모두 반영되었습니다.

kyy added

and removed

labels 2026-04-10 17:01:00 +09:00

Sign in to join this conversation.