우서 프로젝트 - smile project:D

Live Demo

💡프로젝트 소개

간편인증(민간인증서)를 우리금융그룹 스타일로 클론 코딩한 프로젝트입니다.
실행 화면 보러가기

👨‍💻팀원 소개

팀장 신원섭	팀원 오선민	팀원 유승아
본인인증 정보 입력 HTML, CSS 구현 문자인증 기능 구현	민간 인증서 선택 HTML, CSS 구현 보안키보드 기능 구현	서비스 이용 동의 HTML, CSS 구현 인증 정보 유효성 검사 기능 구현

🖼️UI 스타일 가이드라인

폰트 서체 및 사이즈

우리다움체 사용

font-family	font-size
WooridaumB	17
WooridaumL	15, 13

컬러 배색

포인트 색상

main-color	#253a71
sub-color	#0067ac

기본 색상

main-color	#222222
sub-color	#5A5A5A
sub2-color	#f2f2f2

여백 및 정렬 여부

페이지 전체 크기	w: 838px(좌 338px + 우 500px) h: 642px
테두리 여백	padding: 20px
정렬	기본 좌측 정렬 민간인증서 리스트는 가운데 정렬

ESLint

추가한 Rules	설명	적용한 이유
no-var	var 키워드로 변수를 선언하는 것을 금지	더 안전하고 예측 가능한 코드를 작성하도록 함
id-length	식별자(identifier) 이름 길이를 제한	코드의 가독성과 유지보수성을 높임
dot-notation	대괄호 표기법(obj['property'])보다는 점 표기법(obj.property)을 사용하도록 강제	더 간결하고 명확하게 작성하여 코드의 가독성을 높임

⚙️구현 특이 사항

변수사용

컬러 변수를 선언하여 사용하여, 컬러 지정 및 변경의 편의성을 높임

:root {
  --main-color: #253a71;
  --sub-color: #0067ac;
  --sub2-color: #f2f2f2;
  --font-main-color: #222222;
  --font-sub-color: #5a5a5a;
}


div{
  background-color: var(--main-color);
}

html 팝오버

약관 확인을 위한 토글을 Javascript 없이 HTML 태그로 구현

<button popovertarget="personalInformationAgreementPopover">></button>
<div id="personalInformationAgreementPopover" popover>
  우리FISA 3기에 오신걸 환영합니다 ^^
</div>

이미지 색상 변경

CSS filter를 통한 이미지 색상 변경

.img{
  filter: invert(51%) sepia(97%) saturate(1765%) hue-rotate(157deg) brightness(89%) contrast(101%);
}

before   after

생년월일 유효성 검사

Moment.js를 사용하여 입력 받은 생년월일이 유효한 날짜인지 검사

<!-- CDN 선언(.html) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

// 사용(.js)
if(!moment(생년월일).isValid()) 생년월일을 다시 입력하여 주십시오;

📊Lighthouse를 통한 성능 개선

Performance

각자의 구현 영역을 별도의 html 파일에 작성 후 index.html에 iframe 태그를 통해 병합하는 방식으로 구현	index.html에 코드 병합

Accessibility

• li 태그를 ol 태그나 ul 태그와 함께 사용하지 않음 -> ul 태그로 감싸줌
• img 태그 alt 속성 수정
• png 파일 압축

수정 전	수정 후