본문으로 바로가기

반응형 웹 디자인(RWD) 기초 다지기

category StyleSheet/CSS 2016. 9. 30. 08:06

Responsive Web Design

웹 디자이너는 760픽셀 폭의 노트북 화면에서부터 데스크톱 모니터에 이르기까지, 다양한 크기의 디스플레이를 지원하는 문제로 항상 이슈가 생겼습니다. 게다가 스마트폰과 태블릿의 등장으로, 고려해야 하는 디스플레이 크기는 더 다양해졌습니다.

그래서 어떤 회사는 모바일 브라우저와 별도의 웹 사이트를 구축하기도 합니다.

하지만 두 가지 종류의 사이트와 웹 서버 프로그램을 동시에 개발하여, 단말 종류에 따라 다른 사이트가 전송되도록 할 시간, 돈, 인력등이 충분하지 않다면 모바일 전용 웹 사이트를 구축하기는 아마 어려울 것입니다.

다행히도, 하나의 웹 사이트로 다양한 크기의 디스플레이를 지원할 또 다른 방법이 있는데, 이 디자인(설계) 기법의 이름은 '반응적 웹 디자인'으로 몇 가지 테크닉을 사용하여 브라우저 화면의 폭에 따라 페이지 레이아웃이 변화도록 합니다.

예를 들어, 스마트폰 브라우저에는 화면 폭에 적합하게 1단 레이아웃으로 더 넓은 디스플레이는 다단 레이아웃을 사용하는 것입니다.





반응적 웹 다지인의 기초

이던 마코트(Ethan Marcotte)라는 웹 디자인 선구자가 이름 지은 '반응형 웹 디자인(Responsive Web Design)'이라는 기법은 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술입니다.

반응적 웹 디자인은 약자로 RWD 라고도 하며, 디스플레이 크기에 맞는 가장 읽기 쉬운 레이아웃의 페이지를, 여러 버전의 사이트를 만들지 않고도 사용자에게 제공할 수 있도록 합니다.

RWD는 하나의 기술로 이루어진 디자인 기법이 아니며, 몇 가지 CSS와 HTML 기술을 결합하여 화면 크기에 맞는 레이아웃의 페이지를 생성할 수 있도록 합니다.


RWD에는 세 가지 개념이 결합되어 있습니다.

  • 레이아웃에는 유연한 격자(flexible grid)를 사용한다. 
  • 이미지와 비디오에는 유연한 미디어(flexible media)를 사용한다.
  • 화면 너비에 맞는 스타일을 만드는 부분은 CSS 미디어 질의(media query)를 통해 해결한다.


유연한 격자를 사용하게 되면 고정폭 레이아웃은 만들지 않습니다. 스마트폰 화면은 크기가 다양하므로, 고정폭 레이아웃웃 전혀 어울리지 않기 때문입니다. 대신, 디스플레이 크기에 맞게 페이지를 키우거나 줄일 수 있어야 합니다.

이는 유동적 레이아웃 개념과 관련있습니다.

그리고 유연한 미디어는 이미지나 비디오가 주어진 영역에 맞게 표시될 수 있도록 해야합니다. 

즉, 큰 모니터에는 사진을 크게 출력하고, 작은 화면에는 작게 출력하는 것입니다.

마지막으로, 미디어 질의는 브라우저에 보내는 스타일을 현재 상태에 따라 달라 할 수 있는 CSS 테크닉입니다.

예를 들어, 창의 너비가 480픽셀 이하일 때는 특정한 스타일이 렌더링되도록 하고 760픽셀 이상일 때에는 그와는 다른 스타일이 적용되도록 할 수 있습니다.  게다가, 폭만을 기준으로 삼을 수 있는 것은 아닙니다. 태블릿이 가로보기 모드일 때 적용되는 스타일과, 아이폰이나 아이패드에 사용된 레티나 디스플레이처럼 픽셀 집적도가 높은 디스플레이에 적용될 스타일도 구별할 수 있습니다.




RWD에 사용할 웹 페이지의 뷰포트

이 글에서 뷰포트를 상세히 다루지 않고 간단한 팁만 제공합니다.

html
<meta name="viewport" content="width=device-width" />

HTML의 메타 태그는 페이지 내용에 대한 부가 정보를 전달하며, <head> 영역,즉 <title> 태그 위쪽에 넣으면 적당합니다.

그리고 이 메타 태그는 브라우저에게 페이지를 어떻게 표시하라는 지시를 내리는데 사용할 수 있습니다.

여기서 뷰포트(viewport)는 브라우저의 화면을 나타내며, content 속성은 브라우저 창의 폭을 디스플레이 너비와 일치시킵니다.

다시 말해, 위의 메타 태그는 모바일 부라우저에게 화면을 축소하는 대신 브라우저 화면의 너비를 디스플레이의 실제 너비와 일치시키도록 합니다.


메타 viewport 태그를 사용하지 않고도 페이지 축소 표시를 방지하고 항상 100% 배율로 표시하는 방법이 있습니다.

CSS 표준화 기구는 @viewport 규칙을 CSS에 포함시켰습니다.

이 규칙을 사용하면 메타 viewport 태그가 하는 일을 스타일시트 안에서 전부 처리할 수 있습니다.

따라서 HTML 페이지마다 <meta> 태그를 추가하는 일을 피할 수 있습니다.

주 스타일시트에 @viewport 규칙을 추가하기만 하면 됩니다.

css
@viewport { width: device-width; }

이 규칙을 스타일시트 맨 위에, 다른 모든 스타일 앞에 두면 됩니다.

하지만, 불행히도 현재로서는 모든 브라우저가 이 규칙을 지원하지 않으며, 지원하는 브라우저에서도 제조사 접두어를 사용해야 정상적으로 동작합니다.

아래의 링크를 참고 바랍니다.





Media Query(미디어 질의)

CSS3에는 미디어 질의(media query)라는 개념이 도입되었습니다.

페이지가 전송될 브라우저의 너비와 높이에 맞는 스타일을 선택할 수 있도록 하는 기술로 이를 사용하면 스마트폰에 맞는 스타일과 태블릿에 맞는 스타일, 데스크톱 브라우저에 적합한 스타일을 별도로 만들어서 디스플레이에 최적인 형태로 웹 페이지를 표시할 수 있습니다.

반응적 디자인의 목표는 사이트 방문자가 가장 읽기 편한 페이지를 보여주는 것입니다. 보통은 브라우저 너비에 따라 최적의 디자인을 결정하는 것을 의미합니다.

스마트폰, 태블릿, 그리고 데스크톱 모니터가 웹 브라우징에 가장 보편적으로 사용되므로, 이 세 종류의 디스플레이를 가장 먼저 떠올릴 것입니다.

그러나 이들 장치에도 수많은 변종들이 있습니다.

작은 스마트폰도 있고, 큰 스마트폰도 있으며 7인치, 10인치 태블릿도 있습니다. 그리고 폭은 기기별로 다릅니다.

그러니 목표가 무엇인지 상기해야 합니다.

반응적 디지인의 목표는 창의 너비에 따라 읽기 좋도록 변화하는 페이지를 만드는 것입니다. 

그러니 언제 1단이나 2단 레이아웃이 보고 좋으며 언제 4단 레이아웃이 보기 좋은지 알려면, 창의 너비와 레이아웃을 달리하면서 시험해 보아야 할 것입니다.




미디어 쿼리 사용 전략

디스플레이 크기에 따라 레이아웃을 어떻게 변화시키는 것이 좋은지는 시행착오(trial-and-error)를 거쳐 확인하는 것이 가장 좋다고 추천하기도 하지만, 미디어 쿼리의 결과로 레이아웃을 변화시킬 때 일반적으로 하게 되는 일이 몇 가지 있습니다.


단 수를 조정하라

다단 레이아웃은 큰 모니터나 태블릿 가로보기 모드에서는 보기 좋지만 스마트폰에서는 아닙니다.

태블릿도 세로보기 모드라면 4단 구성은 지나친 구성이 될 수 있습니다. 대개 2단,3단 구성으로 바꾸는 것이 좋습니다.

또한 모바일 단말에서는 float 스타일을 피하는 것이 좋습니다.

float 스타일을 피하게 되면 내용을 담은 컨테이너 태그들이 수직 방향으로 차례로 나열되도록 할 수 있습니다.


유동폭(flexible width) 디자인을 사용하라

데스크톱 브라우저가 대상이라면 고정폭 디자인을 사용해도 좋지만 태블릿과 스마트폰의 좁은 화면에는 고정폭 디자인은 적합하지 않습니다.

960픽셀 고정폭 페이지는 스마트폰의 320 또는 480픽셀 화면에는 너무 클 것입니다. 따라서 스마트폰이나 태블릿에는 내용이 담긴 요소의 width를 auto나 100%로 지정하는 것이 좋습니다. 그렇게 하면 고정폭 디자인은 유동적 디자인으로 변경됩니다.

다시 말해, 폰 화면의 크기가 얼마이건 간에 요소의 폭은 화면 너비에 맞게 늘거나 줄어들 것입니다.


여백을 줄여라

표제어와 이미지 등등의 페이지 요소 사이에 공백을 넣으면 23인치 모니터에서는 여유로워 보여서 좋을 것입니다.

하지만 스마트폰의 작은 화면에서 여백은 산만한 디자인으로 이어지고 공간을 낭비하게 됩니다. 즉, 스크롤하는 수고만 늘어날 뿐입니다.

마진과 패딩값을 줄이면 작은 화면에 더 많은 것을 담을 수 있습니다.


서체 크기를 조정하라

데스크톱 모니터에서는 표제어를 큼지막하게, 그리고 일반 텍스트는 작게 표시하면 보기 좋습니다.

하지만 스마트폰과 같은 휴대기기에서는 표시어를 너무 크게 표시하면 화면 가시성을 낭비할 뿐만 아니라 가독성도 떨어지게 됩니다.

반드시 미디어쿼리 스타일을 작성할 때에는 서체 크기에 유의하시기 바랍니다.


내비게이션 메뉴를 변경하라

화면 폭이 좁은 디스플레이에서는 내비게이션의 공간 차지가 문제가 될 여지가 많기 때문에 메뉴 구성을 달리해야 합니다.

일반적으로 이러한 메뉴 구성은 자바스크립트를 사용해 동적으로 변경하게 하여 내비게이션 메뉴가 점유하는 공간을 줄이는 방법을 많이 사용합니다.


휴대용 기기에서는 불필요한 내용을 숨겨라

데스크톱에서는 여러 단으로 구성된 다량의 텍스트는 읽을만 하겠지만 스마트폰 화면에서는 부담스러울 뿐입니다.

CSS를 사용하면 모바일 사용자에게 불필요하다 생각되는 정보는 display: none; 으로 지정하여 감춰줄 수 있도록 합니다.

하지만 내용을 감춘다는 것은 결국 방문자가 사이트에 담긴 정보를 보지 못하게 된다는 것을 의미합니다.

처음에는 데스크톱으로 방문했던 사이트를 나중에 스마트폰으로 다시 방문했을 때 찾았던 정보가 사라져 버린다면 방문자는 난감해 할 수도 있습니다.

거기다 CSS로 감추었다 하더라도 HTML 코드는 남아있기 때문에 표시하지도 않을 정보를 다운받느라 사용자의 대역폭만 낭비되는 셈이 될 것입니다.

이러한 문제점은 사이트의 콘텐츠가 많은 경우에 해당되며 갑론을박의 여지가 남아 있습니다.


배경 이미지를 사용하라

페이지에 너비 960픽셀짜리 배너를 넣어 놓으면 어떤 스마트폰이라도 그 페이지를 축소 표시할 것입니다.

이미지를 스마트폰 화면에 맞도록 작게 표시하는 방법은 CSS 배경 이미지를 사용하는 것입니다.

적당한 미디어 쿼리에 배경이미지를 다르게 사용합니다.

css
.logo {
    width: 980px;
    height: 120px;
    background-image: url('images/large_logo.png');
}

.logo {
    width: 320px;
    height: 60px;
    background-image: url('images/small_logo.png');
}



Breakpoint(변경지점) 정의

미디어쿼리 기술을 사용하면 화면 너비에 맞는 스타일 집합을 브라우저에 전송할 수 있습니다.

보통은 세 개의 변경지점을 사용하여 세 개의 미디어 질의를 만듭니다.

하나는 스마트폰용, 하나는 태블릿용, 그리고 나머지 하나는 데스크톱 모니터용입니다. 정확한 변경지점 값은 디자인마다 다르며, 장치마다 다릅니다.

하지만 보통은 480픽셀 이하의 화면에는 스마트폰용 스타일을 적용하고, 481부터 768픽셀 너비의 브라우저에는 브라우저에는 태블릿용 스타일을 사용하며, 너비가 769픽셀 이상인 화면에는 데스크톱용 스타일을 적용합니다.

하지만 최종 결정은 사이트의 디자인에 따라서 다를 것입니다. 즉, 사용자의 몫입니다.



미디어 쿼리 생성

질의(query)는 웹 브라우저에게 묻는 것입니다. 

"지금 브라우저 폭이 480입니까?" 만일 맞다면 브라우저는 바로 그 크기에 맞는 스타일시트를 불러옵니다.

일반 외부 스타일시트를 사용하는 방법과 크게 다르지 않습니다.

html
<link rel="stylesheet" href="css/mobile.css" media="(width:480px)" >

이 표준 스타일시트 링크에 media 라는 속성이 추가되었음을 볼 수 있습니다.

브라우저가 스타일시트를 고를 때 사용하는 조건을 지정하는 속성입니다. 위의 예제에서는 브라우저는 사용자가 그 폭을 480픽셀로 놓고 페이지를 보게 되면 외부 스타일시트 mobile.css를 로드합니다.

그리고 질의(쿼리)는 반드시 괄호로 감싸야 합니다. 괄호를 생략하면 브라우저는 쿼리를 무시합니다.

그리고 위 예제의 480은 너무 구체적인 값입니다. 만약 사용자의 화면 폭이 그보다 더 작다면 어떻게 대응해야 할까요? 그러니, 미디어 쿼리를 사용할 때에는 값을 범위(range)로 지정하는 것이 좋습니다.

html
<link rel="stylesheet" href="css/mobile.css" media="(max-width:480px)" >

(max-width: 480px) 이라는 값은 "화면 너비가 480픽셀일 때까지는"이라는 의미입니다.

따라서 브라우저 너비가 480픽셀이거나 320픽셀이거나 200픽셀일 때는 mobile.css 파일 안에 있는 스타일이 적용될 것입니다.


min-width 옵션도 있습니다. 

브라우저의 최소 너비를 지정할 때 사용하는 옵션으로 스마트폰이나 태블릿보다 큰 화면에 적용할 스타일을 지정할 때 유용할 수 있습니다.

예를 들어, 상당수 태블릿의 너비인 768픽셀보다 넓은 화면에 적용할 스타일은 다음과 같이 지정할 수 있습니다.

html
<link rel="stylesheet" href="css/desktop.css" media="(min-width:769px)" >

따라서 desktop.css 에 정의된 스타일이 적용되려면 브라우저 너비가 최소 768픽셀보다 1픽셀 더 큰 값인 769픽셀은 되어야 합니다.


마지막으로 min-widthmax-width 는 동시에 사용이 가능합니다.

따라서 화면 폭이 스마트폰보다는 크고 데스크톱 모니터보다는 작은 디바이스에 적용할 스타일을 적용할 수 있습니다.

예를 들어, 아래의 코드는 화면 너비가 768픽셀인 태블릿에는 tablet.css 에 정의된 스타일을 적용하는 것입니다.

html
<link rel="stylesheet" href="css/tablet.css" media="(min-width:481px) and (max-width:768px)" >

위 코드는 브라우저 너비가 최소 481픽셀부터 최대 768픽셀일 때까지는 tablet.css 에 정의된 스타일을 적용하라는 의미입니다.


모바일 브라우저와 대부분의 데스크톱 브라우저가 미디어 쿼리를 인식하지만 IE8을 비롯한 그 이전 버전의 브라우저는 미디어쿼리를 지원하지 않는다. 이에 대한 지원 방법은 다음의 링크를 참고바랍니다.

respond.js





스타일시트 안에서 @import 지시어 사용하는 방법

@import 지시어를 사용하면 내부 스타일시트나 외부 스타일시트 안에서 다른 외부 스타일시트를 로드할 수 있습니다.

이를 이용하면 @import에도 미디어 쿼리를 적용할 수 있습니다.

@import 지시어를 다음과 같이 사용하면 됩니다.

css
@import: url(css/mobile.css) (max-width: 320px);

하지만 불행히도 IE8을 비롯한 구버전 IE는 앞서 언급했던 respond.js 를 사용해야만 미디어쿼리를 인지한다. 그런데 이 repond.js 는 @import 지시어에 사용된 미디어 쿼리와는 연동되지 않습니다.

따라서 @import 에 미디어 쿼리를 적용해 스타일시트를 로드하게 되면 구 IE에서는 이해하지 못합니다.

그러나 이 문제는 그렇게 심각한 이슈는 아닙니다. 데스크톱 브라우저는 반드시 미디어쿼리를 사용할 필요가 없기 때문입니다.


@import 지시어는 스타일시트 맨 처음에 두어야 한다. 다른 스타일 뒤에 두면 안된다.

따라서 하향법칙에 따른 문제가 생길 여지가 있다.

@import 로 불러들인 스타일이 그 뒤에 나오는 스타일에 의해 재정의될수 있기 때문이다.

이런 문제는 @import 지시어만 들어 있는 외부 스타일시트를 두면 해결할 수 있다.

첫 번째 @import 는 모든 장치에 적용될 기본 스타일 시트를 불러들이고, 두 번째와 세 번째 @import 는 미디어 쿼리를 사용해 스타일시트를 불러들이도록 하는 것이다.

css
@import url(css/base.css); /* 미디어 쿼리가 없으므로 모든 장치에 적용된다 */
@import url(css/medium.css) (min-width: 481px) and (max-width: 768px);
@import url(css/small.css) (max-width: 480px);




모바일 단말 우선 전략을 취할 경우

모바일 단말 우선 전략을 취한다면 우선 모바일 브라우저에 맞는 스타일을 만들어야 합니다.

그런 다음 미디어 쿼리를 사용해 태블릿과 데스크톱 브라우저에 맞도록 디자인을 수정해야 합니다.

모바일 단말 우선 전략을 취할 때 사용하는 스타일시트의 기본 구조는 다음과 같이 작성될 수 있습니다.

css
/* CSS 초기화 스타일은 여기에 작성 */
/* 모바일 단말을 비롯한 모든 장치에 적용될 기본 스타일은 여기에 작성 */
body {
    /* body 에 적용될 속성 선언 */
}

/* 중간 크기 디스플레이에 적용될 스타일 정의 */
@media (min-width: 481px) and (max-width: 768px) {
    body {
        /* 태블릿에만 적용될 속성 선언 */
    }
}

/* 큰 디스플레이에 적용될 스타일 정의 */
@media (min-width: 769px) {
    body {
        /* 큰 모니터에만 적용될 속성 선언 */
    }
}




유동 이미지의 단점

유동 이미지 사용방법에 대한 정보는 쉽게 얻을 수 있기 때문에 이 글에서는 유동 이미지에 대한 단점에 대해 알아봅니다.

유동 이미지에는 몇 가지 문제를 가지고 있습니다.

첫 번째는, 이미지를 단 폭을 기준으로 자동으로 확대시키다 보면 이미지의 원래 폭 이상으로 늘어나서 화질이 저하될 수 있다는 것입니다.

가령 폭이 200픽셀인 이미지를 사이드바에 넣었다고 가정해 봅니다. 그리고 이 페이지를 큰 모니터로 본다고 해 봅니다.  그리고 그 결과로 사이드바 너비가 300픽셀로 늘어났다고 해 봅니다.

만약 이미지 폭을 100%로 해 두었다면 결국 그 이미지도 300픽셀로 확대될 것입니다.

그런데 원래 이미지의 폭보다 더 크게 늘어났으므로, 이미지는 모자이크 처리된 사진처럼 픽셀이 심하게 도드라져 보이게 될 것입니다.

따라서 그 이상으로 확대되지 않도록 해야 합니다.

두 번째 문제는, 페이지를 스마트폰으로 보면 각 단과 이미지 너비가 데스크톱에서보다 훨씬 작게 줄어든다는 것입니다.

따라서 이미지는 스마트폰으로 보면 모니터로 보는 것보다 작아지게 됩니다. 

이미지 품질 저하 문제는 생기지 않지만, 사용자 입장에서는 크게 볼 수도 없는 고품질 이미지를 다운받느라 사용자 대역폭을 낭비하게 되는 셈입니다.

불행히도, 이 문제에 대한 좋은 해결책은 아직 없습니다.

사실, 반응적 웹 디자인의 선구자들은 이것이야 말로 RWD의 가장 큰 문제라고 보고 있습니다.

W3C 표준화 기구는 이 문제를 HTML을 통해서 해결하려고 하고 있습니다.

그 진척상황은 이곳에서 확인할 수 있습니다. 

아직 이 시점에서는 링크에 언급된 테크닉이 확정되지 않을 뿐더러 지원하는 브라우저도 미흡한 상황이지만 이 해결책 이외에 다른 방법을 사용할 수 있습니다.

바로 적응형 이미지(adaptive image)라는 다소 복잡한 해결책을 사용하는 것도 한가지 방법입니다.

이 기술은 자바스크립트와 PHP를 이용하여 디바이스에 맞는 크기의 이미지를 전송하도록 하는 방법입니다.

따라서 작은 디바이스에서는 작은 화면에 맞는 작은 이미지 파일을 받게 되고, 데스크톱 브라우저는 대형 화면에 맞는 큰 이미지를 받게 되도록 하는 것입니다.

적응형 이미지 기술에 대해 참고 바랍니다.





비디오와 플래시

HTML5의 video 태그나 내장형 Flash를 사용해야 할 때도 max-width를 사용하여 그 바깥 태그 너비에 맞게 크기를 조정할 수 있습니다.

아래의 스타일을 추가하면 가능합니다.

css
img, video, embed, object {
    max-width: 100%;
}


불행히도, 이 스타일은 iframe을 사용해 삽입된 비디오에는 효과가 없습니다.

iframe은 유투브 비디오나 Vimeo 비디오를 페이지에 넣을 때 흔히 사용되는 태그이기도 합니다.

유투브 비디오를 삽입하려 한다면 자바스크립트를 이용하거나 CSS를 좀 더 활용해할 것입니다.



픽셀이 픽셀이 아니라는 것은..

사람들은 대부분의 픽셀이 화면 또는 모니터 상의 한 점이라고 생각한다.

그렇다. 하지만 애플의 레티나 디스플레이와 같은 고집적(high-density) 디스플레이 기술 덕분(?)에 생각을 조금 달리할 필요가 생겼다.

아이폰 5같은 기기는 1136픽셀 * 640픽셀 해상도를 지닌다. 이는 굉장히 많은 픽셀이다. 아이폰은 이 많은 픽셀을 작은 공간 안에 우겨 넣었다. 그 밀도는 1인치당 326픽셀에 달한다.

따라서 아이폰의 인치당 픽셀 수는 데스크톱 모니터의 1인치당 픽셀수의 세 배에 달한다. 그 결과로 선명하고 또렷한 이미지를 표시할 수 있다.

하지만 이런 디스플레이는 웹 디자이너에게 문제다.

서체 크기를 16픽셀로 잡았다고 가정해 보자.

데스크톱 모니터에서는 괜찮게 보이겠지만(픽셀의 높이가 0.16인치 정도이다), 하지만 애플의 레티나 디스플레이상에서는 거의 읽을 수가 없을 것이다.(높이가 0.04인치에 불과하다)

다행히도, 고집적 디스플레이 상에서는 브라우저는 그런 식으로 페이지를 표시하지 않는다.

실제로는 하나의 CSS 픽셀이 화면상의 몇 개 픽셀을 커버하도록 표시한다. 따라서 16픽셀로 설정된 텍스트는 실제로는 16픽셀 이상으로 표시된다.

고집적 디스플레이를 갖춘 스마트폰이나 휴대 단말은 장치 픽셀(device pixel)과 CSS 픽셀을 분명히 구분하고 있다.

CSS 픽셀은 화면의 픽셀 밀도와 사용자와 디스플레이 사이의 거리를 고려하여 계산되는 값이다.  

스마트폰을 볼 때에는 모니터를 볼 때보다 가까운 거리에서 보게 되기 때문에, 모니터로 볼 때 보다 크게 보인다.

아이폰에서 1 CSS 픽셀은 실제로는 4개의 device pixel 이다. 

따라서 16픽셀 높이의 텍스트 실제 높이는 32 장치 픽셀(device pixel)이다.

안드로이드 스마트폰과 같은 장치의 픽셀 밀도는 아이폰과는 다르므로, CSS 픽셀은 아이폰과는 다르게 계산된다.



Jaehee's WebClub