Skip to main content
marmosetmusic

반응형 웹 제작사례

반응형 웹 제작사례 2016 버전 업데이트
헬로웹에서 제작한 2015~2016년까지의 반응형 웹 제작사례 포스트를 개시했습니다.
 
반응형웹 2016 제작사례 보러가기 >>

 

반응형 웹 제작사례

 
반응형 웹은 2~3년 전부터 웹 관련 업계의 뜨거운 이슈로 떠올랐는데요,

스마트폰부터 스마트TV 까지, 웹을 이용하는 사용자에게 최상의 웹 서비스는 반응형 웹 입니다.

이번엔 해외 및 국내 반응형 웹 제작사례를 소개합니다.

우선 반응형 웹 해외 제작 사례를 먼저 소개하겠습니다.

일반 서비스부터 학교, 공공기관, 브랜드 사이트 등 다양한 분야의 반응형 웹 사이트를 선정했습니다.

아래 사이트들을 보실때 브라우저 사이즈를 줄여보시면 스마트폰에서 어떻게 보이는지 확인하실 수 있습니다.

 

1. MailChimp

반응형 웹 제작사례 - 메일침프(MailChimp)

이메일 서비스로 유명한 메일침프(MailChimp) 입니다.

Chimp 의 이름에서 만들어진 침팬치 아이콘이 눈에 먼저 들어옵니다.

웹사이트 제작 기획을 하고 있는 상황이라면 한번쯤 봐볼만한 웹 사이트 입니다.

 


 

2. MARMOSET

반응형 웹 제작사례 - marmosetmusic

풀사이즈 동영상이 젤 먼저 눈에 띄는 웹 사이트 입니다.

스크롤을 내려보면 풀 사이즈 이미지와 함께 각각의 아티스트 음악을 들어볼 수도 있습니다.

 


 

 3.PETER-PAN

반응형 웹 제작사례 - ristorante-peterpan

일본에 위치한 이탈리안 레스토랑 입니다.

실제 Lunch, Dinner 페이지 디자인이 실제 메뉴판 처럼 디자인 되어 있고 예약 기능도 있습니다.


 

4.tile

반응형 웹 제작사례 - thetileapp

tile 제품에 대한 소개와 회사소개를 같이 하고 있는 웹 사이트 입니다.

풀 사이즈 이미지를 잘 활용한 것 같습니다.

우측 상단 메뉴 영역에 마우스 오버시 펼쳐지는 내비게이션이 인상적입니다.


 

 5.Visit LONDON

반응형 웹 제작사례 - visitlondon

런던을 홍보하는 웹 사이트 입니다.

비지니스, 학업, 여행지 등 다양한 정보를 제공합니다.

공식적인 런던 홍보 회사라고 하네요. 아쉽게도 visitseoul.com 은 없네요.

 


 

 6.Karma

반응형 웹 제작사례 - yourkarma

Karma 제품에 대한 브랜드 홍보 사이트 입니다.

감성적인 영상으로 시작되는 이 웹 사이트는 붉은 색과 푸른 색의 적절히 조화되어 있고

심플하면서 고급스럽게 디자인 되어 있습니다.

브랜드 사이트 런칭을 고민중인 마케터, 기획자  혹은 디자이너 분들은 보시면 도움이 될 수 있을것 같습니다.


 

7. HARVARD UNIVERSITY

반응형 웹 제작사례 -  harvard university

하버드 대학교 웹 사이트 입니다.

굉장히 많은 정보를 포함하고 있는 웹 사이트 임에도 불구하고 반응형 웹 으로 제작을 했습니다.


 

 8.Inky

반응형 웹 제작사례 - inky

Inky 라는 이메일 관련 소프트웨어 웹 사이트 입니다.

파란색, 검정, 흰색 3가지 색으로 디자인 되어 있습니다.

제품에 대한 매력적인 요소들을 적절히 배치시켜 보여줌으로써 매력도를 높여주고 있습니다.


 

9.DIESEL GYM

반응형 웹 제작사례 - DIESEL-GYM

영국에 있는 종합격투기 체육관 입니다.

반응형 웹 디자인을 적용했으며, 워드프레스로 제작이 되었네요.

 


 

 국내 반응형 웹 제작사례

 

해외 반응형 웹 제작사례에 이어서 국내 제작사례를 소개하겠습니다.

국내에서도 반응형 웹에 대한 관심이 증가하고 있고 많은 제작사례가 보이고 있습니다.

먼저 타사에서 제작한 반응형 웹 제작사례 몇가지를 소개하겠습니다.

해외 제작사례와 마찬가지로 브라우저 가로 사이즈를 줄여보시면서 보시면 스마트폰에서 보이는 화면을 보실 수 있습니다.

 

1. 삼성엔지니어링

반응형 웹 제작사례 - samsungengineering 삼성엔지니어링

삼성엔지니어링 웹 사이트 입니다.

좌측 상단 로고 아래에 Korean 클릭시 한국어로 보실 수 있습니다.

반응형으로 사이즈를 줄이면 좌측에 있던 메뉴바가 없어지고 상단에 메뉴바가 생깁니다.

삼성엔지니어링 홈페이지 또한 하버드 홈페이지처럼 많은 양의 컨텐츠를 반응형 웹으로 구현한 예시가 될 수 있을것 같네요.


 

 

2. 현대차 기업문화 홍보 사이트

반응형 웹 제작사례 - hyundai 현대차 홍보사이트

현대차 기업문화 홍보 사이트 입니다.

2012년에 제작 완료하면서 국내 웹 디자인에 많은 영향을 미친것 같습니다.

4개의 영역으로 구분된 컨텐츠 영역이 사이즈를 줄이면서 3개,2개,1개로 바뀌는 것을 보실 수 있습니다.

2012년 웹 어워드 시상식에서 종합 최고 대상을 차지한 웹 사이트 입니다.


 

 

3. 유니온스틸

반응형 웹 제작사례 - unionsteel

유니온스틸 웹 사이트 입니다.

 


 

헬로웹 반응형 웹 제작사례

다음으로 저희 헬로웹에서 제작한 사례 입니다.

워드프레스 및 헬로웹 CMS 를 이용하여 제작하였습니다.

 

1. 카페로베로즈

반응형 웹 제작사례 - cafelofbergs 카페로베로즈

워드프레스로 제작한 카페로베로즈 브랜드 사이트 입니다.


 

 

2. 차상훈 성형외과

반응형 웹 제작사례 - chasanghoon 차상훈 성형외과

워드프레스로 제작한 차상훈 성형외과 웹 사이트 입니다.


 

 

3. 라이나금융서비스

반응형 웹 제작사례 - linafs 라이나금융서비스

 

라이나금융서비스 웹 사이트 입니다.

헬로웹 CMS 로 제작되었습니다.


 

 

4. 디자인공간사랑

반응형 웹 제작사례 - lovingspace 디자인공간사랑

 

디자인공간사랑 웹 사이트 입니다.

헬로웹 CMS 로 제작되었습니다.


 

 

5. 마리아바이오텍

반응형 웹 제작사례 - mariabiotech 마리아바이오텍

 

마리아바이오텍 웹 사이트 입니다.

헬로웹 CMS 로 제작되었습니다.


 

 

6. 더트루노스

반응형 웹 제작사례 - thetruenorth

 

더트루노스 웹 사이트 입니다.

헬로웹 CMS 로 제작되었습니다.


 

 

7. 사계디자인

반응형 웹 제작사례 - designjange

 

사계디자인 웹 사이트 입니다.

워드프레스로 제작되었습니다.

Pinterest UI 를 적용하여 포트폴리오 위주의 웹사이트에 유용하도록 제작되었습니다.


 

 

8. 포도인커뮤니케이션

반응형 웹 제작사례 - podoincom

포도인커뮤니케이션 입니다.

헬로웹 CMS 를 통해 제작되었습니다.

 


 

 

이외에도 반응형 웹 제작 사례는 무수히 많습니다.

간단히 구글 검색을 해봐도 찾으실 수 있을텐데요, 이러한 제작 사례를 모아놓은 링크를 소개합니다.

http://www.ugurus.com/responsive-design-examples

 

FacebookTwitterGoogle+Share