웹 서비스의 진입점인 로그인 화면을 HTML과 CSS로 구현했다.
깔끔하고 직관적인 레이아웃 구성에 집중했다.
Flexbox를 활용한 중앙 정렬
로그인 박스를 화면 중앙에 배치하기 위해 CSS Flexbox를 사용했다.
.login-container {
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 세로 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 설정 */
background-color: #f0f2f5;
}
.login-form {
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 입체감 부여 */
}
사용자 경험(UX) 요소
- 시각적 집중:
box-shadow를 적용하여 로그인 박스를 강조하고 사용자의 시선을 유도했다. - 입력 안내:
<input>태그에placeholder를 설정하여 입력 정보를 안내하고,required속성으로 데이터 입력을 강제했다. - 반응형 대응: 모바일 환경에서도 레이아웃이 유지되도록
width: 100%와max-width를 조합하여 설계했다.
UI 설계의 중요성
입력 필드 간격, 버튼 색상, 폰트 크기 등 시각적 요소가 서비스 신뢰도에 영향을 미친다는 것을 확인했다.
직관적인 UI는 서비스의 첫인상을 결정한다.
향후 화면 설계 시에도 사용자 중심의 깔끔한 스타일 유지가 필요하는 것 같다.
