컴퓨터와 게임의 역사 속으로 ‘넥슨 컴퓨터 박물관’

 

 

안녕하세요.

알씨타운입니다. 혹시 넥슨이라는 회사를 아시나요?.

우리나라의 게임 역사에 빠질 수 없는 회사이죠.

이런 넥슨이 2013년 150억을 투자해 만든 아시아 최초의 컴퓨터 박물관을 소개합니다.

현재 제주도에 있습니다. 저는 제주도는 방문이 어려우니, 사이트 분석이라도 하겠습니다. 😭

​

​

​

[넥슨 컴퓨터 박물관 사이트 바로 가기]

https://computermuseum.nexon.com/

​

​

​

​

접속화면

로딩 화면입니다.

사이트가 아무래도 인터랙티브 웹이라 로딩 속도가 느려질 수 있어서 메인 로딩 화면을 넣었습니다.

도트로 디자인된 캐릭터와 로고는 고전 게임 캐릭터 느낌을 주네요.

​

❓인터랙티브 웹이란❓

단순히 만들어진 이미지나 데이터를 보여주는 형태에서 벗어나

실시간으로 데이터를 입력하고 활용할 수 있도록 인터페이스를 통해 사용자와 호흡할 수 있는 홈페이지

​

​

​

​

화면구성

헤더 부분은 예약 바로 가기로 구성되었습니다.

메인은 총 3개의 섹션으로 나눠서 사용하고 있습니다.

각 섹션에는 처음 접속 시 보이는 섹션, 링크 이동 섹션, 소식 제공 섹션 3개로 나누었습니다.

푸터는 회사 주소와 간단한 링크 SNS 접속 링크를 제공하고 있습니다.

​

​

​

​

헤더

헤더 부분입니다. 형광색을 사용하였네요. 보통 잘 사용하지 않는 색상이죠?

에너지가 넘치는 색상이기에 강조할 때 사용해 디자인이 재미있고 활기찬 느낌을 줍니다.

경고 테이프 같은 느낌을 받지 않으셨나요?

경고 테이프 느낌과 애니메이션 효과를 주어 동적으로 움직여 재미 요소와 집중도를 높였습니다.

​

​

​

​

메인의 첫 번째 섹션

 

메인 페이지 안에 내비게이션을 배치하였습니다.

상단의 메뉴 아이콘을 누르면 전체 화면으로 보여주고 있으며 4가지의 메뉴와 하위 메뉴가 있는 2뎁스 형식입니다.

오른쪽에는 다른 사이트로 이동할 수 있는 링크를 제공하고 있습니다.

50px 27px 20px 14px 정도의 픽셀을 사용하였습니다.

​

넓은 전체 화면에 적은 내용, 큰 폰트를 사용하여 여유 있어 보이는 구성을 하였네요.

​

사이트에 접속하면 가장 처음 보이는 화면입니다.

역시 동적인 움직임을 보여주고 있습니다.

큰 텍스트로 사용자의 시선을 주목시키고 몇몇 단어에 마우스를 호버 할 경우

마우스 포인터를 중심으로 이미지를 보여주고 마우스 포인터의 움직임을 감지하여

움직임이 멈추면 선명한 이미지를,마우스가 움직이면 흐릿한 이미지를 보여주고 있습니다.

​

스마일 이미지에 마우스를 호버 할 경우 포인터 이미지 변화와 숨겨놓았던 이미지가 마우스를 따라다니는 모습을 볼 수 있습니다.

​

스크롤 아이콘을 배치해 아래쪽에 내용이 더 있음을 알리고 있습니다.

​

왼쪽 하단에 동영상을 배치하였습니다.

상단의 몇 개의 동영상이 있는지 표현해 주었고 이전, 다음, 멈춤, 큰 화면, 작은 화면을 볼 수 있게 버튼을 배치하였고

작은 화면의 경우 메인 페이지 안에서 꺼지지 않고 계속 시청할 수 있게 되어있습니다.

​

​

​

​

메인의 두 번째 섹션

스크롤이 일정 위치에 도착하면 배경 화면은 픽스되고 하위 메뉴만 스크롤 됩니다. 메뉴는 총 4개로 구성되어 있으며

3개의 메뉴는 링크를 이동시키는 메뉴이며 마우스 호버시 이미지 스케일 조절과 텍스트에 라인을 주는 애니메이션을 넣어주었습니다.

​

오른쪽 하단의 이미지는 동영상을 플레이시켜줍니다.

뱅글뱅글 도는 이미지의 경우 글씨 이미지 + (컴퓨터 이미지* 2)를 이용해

글씨 이미지는 로테이션 애니메이션을 주어 뱅글뱅글 돌게 만들고

컴퓨터 이미지는 2개의 이미지를 번갈아 보여주는 애니메이션을 만들어 주었네요.

​

​

​

​

메인의 세 번째 섹션

​

소식을 제공하는 섹션입니다.

메뉴를 선택하면 마치 게임 메뉴를 고르는 느낌을 받습니다.

​

메뉴마다 보여주는 페이지를 다르게 보여주는 탭 형식인 줄 알았으나 아니었습니다.

하나의 긴 리스트를 만들고 책갈피처럼 위치를 정해두어 메뉴의 아이콘을 누를 때마다 각 정해진 위치로 이동하는 형식이었습니다.

​

좌우로 마우스를 가져가면 양옆으로 이동할 수 있는 화살표 포인터로 변하며 화살표 포인터일 때 클릭하면 좌우로 이동할 수 있습니다.

​

메뉴의 아이템에 마우스를 호버 하면 스케일이 커지며 블랙에서 컬러로 바뀌는 애니메이션 효과를 넣었습니다.

​

​

뉴스나 프로그램 탭의 아이템은 마치 흑백 사진을 보는 느낌을 받기도 하였습니다.

​

아이템의 크기가 각자 다 다르지만, 상단 정렬과 각 아이템간 간격을 적절하게 주어 잘 정렬된 느낌을 주었습니다.

​

​

​

​

푸터

개인 정보 처리 방침, 회사의 위치, 저작권 표시와

관람안내, 이달의 프로그램, 새 소식을 다시 한번 링크로 보여주고 있으며

SNS 링크 이동 부분을 보여주고 있습니다.

​

​

​

​

이런 인터랙티브 웹 같은 경우는 보통 높이를 기준으로 스크롤바의 위치에 따른 계산을 하게 됩니다.

​

그러나 웹사이트 창은 크기가 매우 가변적이다 보니 계산식을 만들어서 표현하는 게 쉽지만은 않습니다.

화면이 작아지거나 커지게 된다면 고정적인 값으로는 표현을 할 수가 없다 보니 일반 사이트 작성보다 시간도 많이 들고 정성도 많이 들어갑니다.

​

그런데도 인터랙티브 웹을 사용하는 이유는

매우 독창적이고 창의적인 디자인이 나올 수 있다는 점입니다.

​

이런 인터랙티브 기술을 잘 쓰는 사이트로는 애플 사이트가 대표적입니다.

마우스 휠 움직임에 따라 영상이 재생되는 듯한 표현을 잘하는 사이트죠.

( 피씨 큰 화면에서만 인터랙티브 웹이 보입니다. )

​

https://www.apple.com/kr/iphone-13-pro/

​

애플과 같은 사이트는 한 페이지에서 보여주는 이미지의 양이 많기 때문에

반응형으로도 인터랙티브 하게 움직인다면 연산이 많아지고 속도 저하도 올 것입니다.

다시 화면을 읽어오는 상황을 피하기도 어려울 것이고요.

그래도 애플은 하려면 하겠지만 안 하는 데는 이유가 있겠지요?

 

넥슨 컴퓨터 박물관 사이트 구경은 어떠셨나요?

매우 독특한 사이트 아니었나요?

​

다음에는 더 흥미로운 사이트로 찾아뵙겠습니다.

​

오늘도 행복하세요.

여기까지 알씨타운이었습니다 : )

​

​

​

​

​