[UI/UX] 로그인 성공 페이지(home.html) 디자인 및 기능 개선 #10

New Issue

kyy · 2026-04-10T11:12:02+09:00

kyy commented

2026-04-10 11:12:02 +09:00

로그인 성공 후 표시되는 홈 화면의 UI/UX를 개선하여 사용자에게 더 나은 경험과 정보를 제공하고자 합니다.

현재 상태 (Current State)

중앙 정렬된 단순한 박스 형태의 레이아웃.
기본 정보(ID, 이름, 로그인 시간)만 텍스트로 표시.
부가적인 기능이나 시각적 요소 부족.

개선 제안 (Proposed Improvements)

대시보드 스타일 레이아웃 도입
- 단순한 정보 표시를 넘어 대시보드 형태의 현대적인 레이아웃으로 변경.
- 상단 내비게이션 바(헤더) 추가 (사용자 이름, 간단한 프로필 아이콘 포함).
시각적 요소 강화
- 사용자 이름 이니셜을 이용한 아바타 표시.
- 카드(Card) 디자인을 활용하여 각 섹션(로그인 정보, 시스템 상태 등) 구분.
- 세련된 색상 조합(Primary Color 강조) 및 둥근 모서리 적용.
추가 정보 표시
- server.js에서 제공하는 '인증 방식(사번 SSO 또는 전화번호 SSO)'을 화면에 명시.
UX 편의성 개선
- 페이지 로딩 시 부드러운 애니메이션(Fade-in) 적용.
- 로그아웃 버튼의 가독성 및 접근성 향상.
- 모바일 환경에서도 최적화된 반응형 디자인 강화.

할 일 (To-Do)

public/home.html 구조 리팩토링
public/styles.css에 대시보드 관련 스타일 추가
fetchUserInfo 함수에서 인증 방식(method) 정보를 가져와 표시하도록 수정
반응형 테스트 수행

로그인 성공 후 표시되는 홈 화면의 UI/UX를 개선하여 사용자에게 더 나은 경험과 정보를 제공하고자 합니다. #### 현재 상태 (Current State) - 중앙 정렬된 단순한 박스 형태의 레이아웃. - 기본 정보(ID, 이름, 로그인 시간)만 텍스트로 표시. - 부가적인 기능이나 시각적 요소 부족. #### 개선 제안 (Proposed Improvements) 1. **대시보드 스타일 레이아웃 도입** - 단순한 정보 표시를 넘어 대시보드 형태의 현대적인 레이아웃으로 변경. - 상단 내비게이션 바(헤더) 추가 (사용자 이름, 간단한 프로필 아이콘 포함). 2. **시각적 요소 강화** - 사용자 이름 이니셜을 이용한 아바타 표시. - 카드(Card) 디자인을 활용하여 각 섹션(로그인 정보, 시스템 상태 등) 구분. - 세련된 색상 조합(Primary Color 강조) 및 둥근 모서리 적용. 3. **추가 정보 표시** - `server.js`에서 제공하는 '인증 방식(사번 SSO 또는 전화번호 SSO)'을 화면에 명시. 4. **UX 편의성 개선** - 페이지 로딩 시 부드러운 애니메이션(Fade-in) 적용. - 로그아웃 버튼의 가독성 및 접근성 향상. - 모바일 환경에서도 최적화된 반응형 디자인 강화. #### 할 일 (To-Do) - [ ] `public/home.html` 구조 리팩토링 - [ ] `public/styles.css`에 대시보드 관련 스타일 추가 - [ ] `fetchUserInfo` 함수에서 인증 방식(`method`) 정보를 가져와 표시하도록 수정 - [ ] 반응형 테스트 수행

kyy added the

상태

개발진행

label 2026-04-10 11:12:10 +09:00

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

kyy commented

2026-04-10 11:18:47 +09:00

로그인 성공 페이지(home.html) UI/UX 개선 작업을 완료했습니다.

주요 작업 내역:

레이아웃 개편: 단일 박스 형태에서 벗어나 헤더(상단 내비게이션 바)와 메인 콘텐츠 영역을 분리한 대시보드 레이아웃 적용.
시각적 요소 추가:
- 상단 헤더에 사용자 이름 첫 글자를 활용한 프로필 아바타 추가.
- '내 계정 정보'와 '시스템 상태'를 구분하는 카드(Card) 디자인 도입.
- 화면 진입 시 부드럽게 나타나는 fadeIn 애니메이션 적용.
데이터 바인딩 강화: fetchUserInfo 함수를 수정하여 server.js에서 세션에 저장한 user.method(사번 SSO 또는 전화번호 SSO 인증) 값을 뱃지(Badge) 형태로 화면에 표시하도록 구현.
반응형 최적화: 모바일 화면에서도 카드가 세로로 자연스럽게 배치되도록 grid 레이아웃 및 미디어 쿼리 적용.

코드 변경 사항은 public/home.html에 반영되어 있습니다. 브라우저에서 직접 테스트하시고 피드백이 있으시면 언제든 말씀해 주세요!

로그인 성공 페이지(`home.html`) UI/UX 개선 작업을 완료했습니다. **주요 작업 내역:** 1. **레이아웃 개편:** 단일 박스 형태에서 벗어나 헤더(상단 내비게이션 바)와 메인 콘텐츠 영역을 분리한 대시보드 레이아웃 적용. 2. **시각적 요소 추가:** * 상단 헤더에 사용자 이름 첫 글자를 활용한 프로필 아바타 추가. * '내 계정 정보'와 '시스템 상태'를 구분하는 카드(Card) 디자인 도입. * 화면 진입 시 부드럽게 나타나는 `fadeIn` 애니메이션 적용. 3. **데이터 바인딩 강화:** `fetchUserInfo` 함수를 수정하여 `server.js`에서 세션에 저장한 `user.method`(사번 SSO 또는 전화번호 SSO 인증) 값을 뱃지(Badge) 형태로 화면에 표시하도록 구현. 4. **반응형 최적화:** 모바일 화면에서도 카드가 세로로 자연스럽게 배치되도록 `grid` 레이아웃 및 미디어 쿼리 적용. 코드 변경 사항은 `public/home.html`에 반영되어 있습니다. 브라우저에서 직접 테스트하시고 피드백이 있으시면 언제든 말씀해 주세요!

kyy commented

2026-04-10 14:07:17 +09:00

로그인 성공 페이지(Dashboard) UI/UX 개선 사항 정리

로그인 페이지와 로그인 성공 페이지 간의 테마 일관성을 확보하고, 시인성을 높이기 위해 다음과 같은 작업을 수행했습니다.

디자인 테마 통일
- 로그인 페이지(index.html)와 동일한 다크 그린 & 아이보리 테마를 home.html에도 적용했습니다.
- app-shell, system-header, login-panel 등 공통 CSS 클래스를 사용하여 레이아웃 구성을 일치시켰습니다.
레이아웃 확장 및 시인성 개선
- 대시보드 패널의 너비를 확장(800px -> 1000px)하여 더 넓고 쾌적한 화면 구성을 구현했습니다.
- 정보 카드 및 텍스트 크기를 키워 주요 정보가 한눈에 들어오도록 개선했습니다.
- 환영 메시지를 보다 정중한 문구로 업데이트했습니다.
인증 방식 강조
- '사용된 인증 방식' 뱃지를 테마 컬러(다크 그린 배경, 흰색 텍스트)로 강조하고 크기를 키워 사용자가 어떤 방식으로 로그인했는지 명확히 인지할 수 있도록 했습니다.
사용자 경험(UX) 세부 조정
- 배경 이미지 변경: 로그인 전/후의 분위기를 전환하기 위해 대시보드 전용 오피스 배경 이미지를 적용했습니다.
- 로그아웃 버튼 스타일 조정: 로그인 버튼과 동일한 스타일을 적용하되, 입력 전 버튼처럼 초기에는 반투명하게 유지하다가 마우스 오버 시 선명해지도록 처리하여 일관성을 높였습니다.
코드 구조 최적화
- home.html에 포함되어 있던 인라인 스타일을 styles.css로 분리하여 코드 유지보수성을 향상시켰습니다.

### 로그인 성공 페이지(Dashboard) UI/UX 개선 사항 정리 로그인 페이지와 로그인 성공 페이지 간의 테마 일관성을 확보하고, 시인성을 높이기 위해 다음과 같은 작업을 수행했습니다. 1. **디자인 테마 통일** - 로그인 페이지(`index.html`)와 동일한 다크 그린 & 아이보리 테마를 `home.html`에도 적용했습니다. - `app-shell`, `system-header`, `login-panel` 등 공통 CSS 클래스를 사용하여 레이아웃 구성을 일치시켰습니다. 2. **레이아웃 확장 및 시인성 개선** - 대시보드 패널의 너비를 확장(800px -> 1000px)하여 더 넓고 쾌적한 화면 구성을 구현했습니다. - 정보 카드 및 텍스트 크기를 키워 주요 정보가 한눈에 들어오도록 개선했습니다. - 환영 메시지를 보다 정중한 문구로 업데이트했습니다. 3. **인증 방식 강조** - '사용된 인증 방식' 뱃지를 테마 컬러(다크 그린 배경, 흰색 텍스트)로 강조하고 크기를 키워 사용자가 어떤 방식으로 로그인했는지 명확히 인지할 수 있도록 했습니다. 4. **사용자 경험(UX) 세부 조정** - **배경 이미지 변경:** 로그인 전/후의 분위기를 전환하기 위해 대시보드 전용 오피스 배경 이미지를 적용했습니다. - **로그아웃 버튼 스타일 조정:** 로그인 버튼과 동일한 스타일을 적용하되, 입력 전 버튼처럼 초기에는 반투명하게 유지하다가 마우스 오버 시 선명해지도록 처리하여 일관성을 높였습니다. 5. **코드 구조 최적화** - `home.html`에 포함되어 있던 인라인 스타일을 `styles.css`로 분리하여 코드 유지보수성을 향상시켰습니다.

kyy added

and removed

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

Sign in to join this conversation.