홍익대학교 반응형 사이트를 살펴보자. 리사이징 개념의 웹사이트 자료

 반응형 관련 홍익대학교 졸업전시회 사이트

 

  | 브라우저 창크기와 관련하여 유연하게 변형이 되는 반응형 웹사이트에 대해서 적어보았다. 

 

 

 

 

|홍익대학교는 매년 이러한 졸작을 웹사이트를 구현하여 전시를 하는것 같다.

  웹 카다로그 개념으로, 졸작에 작품과 관련 컨텐츠를 웹으로 구현하였다.

 

 지난 2008년, 2011년, 그리고 내가 지금 포스팅을 하려는 2012년 일자이다.

 

 

 

 

| 처음 메인페이지에 들어가면 일단 시각적인 효과가 눈앞에 펼쳐진다.

  우측에 작은 썸네일들이 일정한 효과를 주며 구현이 된다.

 

 

 

 

 

| 브라우저 창 크기를 가로폭을 좁히게 되면 우측 썸네일들이 비율이 일정하게 축소되며 밀리게 되는 현상을 볼 수 있다.

   전체적으로 %를 활용하여 크기에 민감하게 반응하도록 한 것 같다.

 

 

 

| 썸네일을 오버했을시 관련 컨텐츠가 타이틀과 부연설명으로 구현이 된다.

   롤오버시 구현되는 썸네일 설명 창도 일정한 효과를 적용하였다. 이 썸네일 오버시 나타나는 문구들을 주의깊게 보자.

   (*후반부와 비교)

 

 

| 클릭시 들어가는 서브페이지에도 반응형으로 구축되어 있는것을 볼수가 있다.

   맨 상단프레임에 보통 영상과, 제이쿼리 슬라이드가 있는데, 이것 또한 창크기를 가로로 줄이게 되면

   이에 맞게 비율을 유지하며 축소되는 것을 볼 수 있다.

 

   하단에 풀어지는 문구는 일부 마진값에 반응하여 크기에 맞게 밀리게 되는 것을 알 수 있다.

   그 아래 이미지들도 일정비율을 유지하며 동일하게 축소된다.

 

 

 

| 이것은 어느정도 가로로 창크기를 줄였을떄 구현되는 사이트의 화면이다.

   좌측에 붙어있던 GNB와 로고가 상단에 걸리면서 자연스레 썸네일은 하단에 정렬하게 된다.

 

   메뉴 오버시 효과는 여전히 동일하게 적용되고 있다.

 

 

 

 

    | 이것은 2단계로 더 가로사이즈를 축소하였을떄 또 한번 변경

       하는 사이트의 모습이다.

    

      상단의 메뉴가 한줄로 나란히 정렬되었다면, 이번경우에는

      각 메뉴타이틀이 한개씩 아래로 떨어져 배치되는것을 확인할 수

      있다. (로고 또한 동일하게 일정크기가 축소된다.)

 

 

 

                         

                                        | 아까 위에서 주의깊게 보라던 부분!

                                           썸네일을 오버했을시 뜨는 창에 문구가 달라진것을 확인할 수 있다.

 아무래도 브라우져 창 크기의 축소로 인해 전체적으로 컨텐츠가

 작아져, 부연설명도 타이틀로만 간결하게 표현되는 것을 볼 수 있다.

 

현재 다루고 있는 홍익대학교 졸업전시회 웹사이트를 볼떄 유의할점이

있다. 바로 익스플로어로 저버전에서는 GNB이 변형을 보기 힘들어,

크롬이나 고버전의 익플로 보기를 추천한다.

 

 

http://hongikdmd.com/meme/

 

:meme
2012 홍익대학교 디지털미디어디자인전공 졸업전시회 웹사이트