국민은행 홈페이지 제작방식을 알아보자!

국민은행 홈페이지 제작방식을 알아보자!

 

 

[intro]

​

세상을바꾸는 금융 국민은행!

국내 대표 금융그룹 중 하나인 국민은행 홈페이지는

어떤형대로 홈페이지 제작되었는지 알아볼까요?

 

 

---

 

 

[main_top]

​

1.

홈페이지 접속 시 보이는 메인화면인데요.

국내 뿐만이 아니라 세계적으로 심각한 문제가 되고 있는

코로나 바이러스로 인한 이용안내 팝업을 페이지 상단에

가장먼저 눈어에 띄게 게시 해 놓았네요.

사용자에게 중요한 안내사항을 홈페이지 접속 시

바로 확인할 수 있도록 했습니다.

이런 사용자를 위한 안내사항은 홈페이지제작 시

중요한 부분이기도 합니다.

​

2.

안내팝업 밑으로 스크롤을 내리면

현재 진행하고 있는 이벤트 또는 행사를

슬라이드 배너를 삽입하여 게시했는데요.

현재 국내에서 인기를 얻고 있는 펭수를 모델로 하여

진행하고 있는 이벤트 또한 슬라이드 배너에 삽입하여

사용자로 하여금 시선을 유도 하고 있습니다.

이런 부분에서 사용자가

현재 무엇을 선호하고 트렌드가 무엇인지

홈페이지 제작 시 정확하게 파악하는 것도 중요한 점인것 같네요.

​

3.

은행 홈페이지에서 사용자가

가장 많이 사용하는 카테고리를

슬라이드 배너 하단 서브메뉴로 삽입하여

사용자가 해당 메뉴를 찾는 어려움 없이

이동할수 있게 배치했는데요.

홈페이지 제작시 사용성을 중시하는 ux,ui는

아주 중요한 부분임을 다시 한번 깨닫게 됬습니다.

​

point1

kb브랜드 스토리보드 보기를 클릭하면

해당 페이지로 이동하는데요

 

1.

이미지와 기업이 추구하는 메세지를

이미지위에 삽입하여

사용자에게 기업의 브랜드 스토리를

전하고 있습니다.

슬라이드 이미지로 시간 차를 두고

이미지가 슬라이드 되기도 하지만

직접 tab하여 다음 이미지로 이동 할 수도 있네요.

 

[main_bottom]

​

1.

은행 홈페이지에서 사용자가

가장 많이 사용하는 카테고리를

슬라이드 배너 하단 서브메뉴로 삽입하여

사용자가 해당 메뉴를 찾는 어려움 없이

이동할수 있게 배치했는데요.

홈페이지 제작시 사용성을 중시하는 ux,ui는

아주 중요한 부분임을 다시 한번 깨닫게 됬습니다.

​

2.

새소식과 이벤트와 같은 공지성 카테고리는

간략하게 text 표형식으로 제작되었는데요.

최신글 같은 경우에는 title옆에 new버튼을 색상으로

강조하여 사용자에게 더욱 효과적으로

홍보하고 있습니다.

​

3.

해당 컨텐츠 같은 경우에는

현재 기업에서 추천하고 있는 상품 또는

서비스를 안내하고 있는데요.

접속하려는 컨텐츠에 마우스를 가져다대면

그림자효과가 나타나 사용자에게

본인이 어떤 컨텐츠를 선택하고 있는지 알려주고있네요.

이런 작은 효과들 또한 홈페이지 제작시

놓쳐서 안되는 부분인거 아시죠?

​

point1

단조로워 보일 수 있는 은행 홈페이지에

귀엽고 간단한 아이콘으로 제작 된

tab 또한 소소한 부분이지만

저에게는 또하나의 포인트였습니다.

​

 

 

[subpage1]

​

1.

첫번째 서브 페이지에서는

해당 페이지에 존재하는 하위 카테고리들을

이동하려는 버튼에 마우스를 가져다대면

하위로 나열되는데요.

​

2.

서브페이지의 메인베너는

케이봇 쌤이라는 프로그램을 안내하고있는데요.

사람들에게 다소 생소할 수있는 신규 시스템을

메인배너를 통해 소개하는 부분이

기업에서 홈페이지 제작시

많은 고민을 했을 것 같다는 생각이 드네요.

그럼 해당 페이지로 한번 이동해볼까요?

 

 

point1

페이지 이동을 하게되면 보시는 것과 같이 먼저

단순해 보일수 있는 박스에 막대그래프와 같은 부분이

시간차를 두고 반복하여 박스라인을 따라 움직이는데요.

이런 소소한 애니메이션이 사용자의 시선을 유도하고

지루함을 방지할수 있습니다.

 

페이지 하단으로 이동하여

컨설팅을 할수 있는 버튼을 누르고 내용을 입력하면

위와같은 화면으로 이동하는데요.

​

point1

페이지가 오픈되면 해당 그래프가

원으로 한바퀴 돌면서 등장합니다.

간단하지만 이런 소소한 애니메이션들이

사용자에게는 작은 재미를 주기도 합니다.

홈페이지 제작 시 사용자가 단순히 스크롤을 통해서

홈페이지 사용을 하는 것이 아닌

다양한 애니메이션효과 또는 움직을 제공하여

사용자에게 또다른 흥미를 유발하는 것 또한

중요한 부분임을 생각하게되네요.

​

point2

애니메이션효과를 준 그래프 하단에

사용자가 의미를 컨텐츠의 의미를 한눈에

파악할 수 있는 아이콘을 텍스트와

삽입하여 텍스트만 명시했을 경우의

단조로움을 탈피하고

홈페이지 분위기를 살려주고 있네요.

홈페이지 제작 시 이러한

다양한 방식으로 사용자에게 재미를 주고

시선을 사로잡는 것 또한

홈페이지 제작자에게 요구되는 중요한 부분이겠죠?

​

point3

사용자에게 다양한 정보를 전달하기 위해

애니메이션 효과 컨텐츠 하단에

깔끔한 레이아웃으로 컨텐츠를 진열한 것도

저에게는 인상적으로 느껴졌습니다.

 

 

[sub page2]

​

1.

다른 서브페이지로 이동해서

금융 홈페이지 답게 홈페이지 사용자가

요구하는 정보를 전달하기 위해

계산하기와 같은 프로세스가 구현되어 있는데요.

​

POINT1

사용자 본인이 알고자하는 정보를

본인의 입력값을 입력하여

정보를 전달해주는 프로세스가

저에게는 신선하고 홈페이지제작 시

배워야할 것이 많다는 것을

다시한번 되새기게 되었습니다.

 

 

[footer]

​

국민은행의 푸터 영역은

다른 홈페이지들과 비슷하게

심플하게 구성되어있는데요.

사용자에게 필요한 전화번호,이메일 주소와같은

안내 정보는 리스팅을 통해 전달하고

sns버튼을 삽입하고 sns로도 쉽게 연동할 수 있게 했네요.

 

 

마치며

금융홈페이지는 사용자에게 정확한 정보전달을 해야하고

접근성 또한 쉽게해야되는데요.

금융 홈페이지 뿐만이 아니라 다른 홈페이지제작 시에도

중요하게 여겨져야되는 부분이라고

개인적으로 생각됩니다.

또 홈페이지는 중요한정보를 편리하게 안내하고

웹은 그걸 빠르게 도와주는거라고 생각합니다.

홈페이지 제작,앱제작 시

이러한 부분을 면밀하게 고려하여 제작한다면

더욱 좋은 홈페이지,앱이 제작되겠죠?