본문 바로가기
내일배움캠프 UXUI디자인 1기/사전캠프

[UXUI 사전캠프 4주차] UX/UI디자인 4주차 WIL.

by 아습희린 2023. 12. 15.

사전캠프의 마지막 주차였던 4주차에는 2주차와 3주차 때 선정하여 클론 디자인을 한 웹사이트와 앱 서비스를 가지고 개선할 점을 찾아 디자인에 적용시켜 보는 시간을 가졌다.


01 ㅣ  웹사이트 개선

 

1. 개선 사유

공식 뮤직비디오 배너를 누르면 바로 유튜브 링크로 연결되어서, 이어폰을 끼고있다가 사운드가 너무 커서 이용에 불편함을 느낀 점

[개선방안]

1) 모달창을 한 번 더 띄워줌으로써 사용자가 선택하게 한다.
-이 때, 오른쪽에 수락 버튼을 둠으로써 링크 연결이 좀 더 쉽도록 디자인하였다.
But, 기업에서는 더 많은 조회수를 원하기 때문에 니즈 충족이 조금 어려워 보인다.

 

모달창으로 개선한 방법 디자인 예시

 


2) 컴포넌트 영역에 영상이 바로 재생됨을 알 수 있도록 재생 버튼을 호버링시킨다.
-호버링 디자인이라 마우스를 가져가야 보이기 때문에 기업과 고객 양쪽의
니즈를 가장 잘 충족시킬 수 있는 방법이라고 생각한다.

 

동영상이 재생됨을 알리기 위해 예시로 만들어 본 호버링 디자인.

 

 

2. 개선 사유

업데이트 안내 버튼이 너무 작아 기능이 잘 보이지 않는다.

[개선방안]

1) 게임 업데이트 버튼 호버링 시 서식을 좀 더 가시성 좋게 수정하고, ‘업데이트 확인하기’ 문구로 변경시킨다.

 

가시성 좋게 개선한 호버링 디자인.

 

 


2)하단에 버튼을 만들어 추가한다.

 

하단에 새롭게 디자인한 업데이트 버튼.

 

 

 


 

02 ㅣ  앱 서비스 개선

 

1. 개선 사유

간편한 SNS 로그인을 유도하기 위해 메인 페이지로 꺼내보았다.


[개선방안]

1) 넥슨플레이의 로그인 화면을 레퍼런스 삼아 깔끔하고 통일성 있게 개선해 보았다.

 

기존 화면과 레퍼런스 화면을 비교하여 개선한 간편로그인 화면 디자인 예시.

 

 

 

2. 개선 사유

사용자들의 편안한 눈을 위한 다크모드 개선.

[개선방안]

1) 다크모드에 알맞게 박스들의 색감을 통일하고 수정해보았다.

 

기존의 라이트한 화면
다크모드 디자인 예시.