반응형 웹 디자인 기초: 모바일 및 태블릿 화면 완벽 대응하기

바로 속도감 있게, 하지만 절대 놓쳐서는 안 될 핵심만 짚어서 **[레슨 8]**을 진행하겠습니다.

30년 전 제가 웹을 처음 시작했을 때만 해도 모니터(PC) 화면 하나만 예쁘게 만들면 끝이었습니다. 하지만 지금은 어떤가요? 웹사이트 방문자의 60~70%가 스마트폰으로 접속합니다. PC에서 아무리 화려하고 멋진 사이트라도, 모바일에서 글씨가 깨지고 이미지가 화면 밖으로 튀어나가면 방문자는 3초 만에 뒤로 가기를 누릅니다.

이번 **[레슨 8: 반응형 웹 디자인 기초]**에서는 PC, 태블릿, 모바일 기기에 맞춰 레이아웃과 크기가 카멜레온처럼 변하는 ‘반응형(Responsive)’ 세팅의 비밀을 파헤쳐 보겠습니다.

엘리멘터가 전 세계 1위 페이지 빌더가 된 가장 큰 이유가 바로 이 반응형 작업이 믿을 수 없을 만큼 직관적이고 쉽기 때문입니다. 코딩 한 줄 없이 스마트폰 화면을 완벽하게 통제해 봅시다.

1. 반응형 모드 (Responsive Mode) 켜기

작업 중인 엘리멘터 화면 상단 툴바의 가운데를 봐주세요.

1. 화면 최상단 가운데에 [PC] – [태블릿] – [모바일] 아이콘이 있니다.

2. 여기서 ‘모바일’ 아이콘을 클릭해 보세요. 넓었던 캔버스가 스마트폰 세로 화면 크기로 좁아지는 것을 볼 수 있습니다.

2. 반응형 디자인의 절대 원칙: “폭포수(상속)의 법칙” ⭐⭐⭐

이 법칙을 모르면 모바일 화면을 고치다가 PC 화면까지 다 망가뜨리는 대참사가 일어납니다. 반드시 기억하세요!

• 디자인은 항상 PC ➔ 태블릿 ➔ 모바일 순서로 흘러내립니다.

• PC 화면에서 글자 크기를 50px로 바꾸면, 태블릿과 모바일도 기본적으로 50px이 됩니다.

• 하지만, 모바일 화면 모드에서 글자 크기를 20px로 줄이면? 그 변경 사항은 모바일에만 적용되며, 상위 단계인 PC나 태블릿 화면에는 절대 영향을 주지 않습니다.

3. 모바일 화면 최적화 실전 3단계

자, 모바일 모드를 켜둔 상태에서 다음 세 가지를 수정해 보겠습니다.

Step 1: 폰트 크기와 여백 줄이기

• 캔버스의 제목 위젯을 클릭하고 좌측 패널의 [스타일] -> [타이포그래피]로 갑니다.

• ‘크기(Size)’ 항목 옆에 작은 스마트폰 아이콘이 켜져 있는지 확인하세요. (이 아이콘이 켜져 있어야 모바일에만 적용된다는 뜻입니다.)

• 모바일에 맞게 줄여줍니다.

• 지난 레슨에서 배운 [고급] 탭의 마진과 패딩도 모바일에서는 너무 넓으면 화면을 낭비하므로, 숫자를 확 줄여줍니다.

Step 2: 컨테이너 방향 바꾸기 (Flexbox 핵심)

• PC에서는 두 개의 상자가 좌우(→)로 나란히 있던 2단 구조를 떠올려 보세요. 모바일의 좁은 화면에서는 두 개가 나란히 있으면 너무 비좁습니다. 최신 버전의 엘리멘터에서는 기본적으로 모바일에서 레이아웃 방향을 세로로 변경합니다. 그러나 특별한 경우 좌우 또는 상하 배열을 강제로 지정해야 할 경우가 있으니 이런 기능이 있구나 정도만 알아두세요. 자세한 내용은 중급편에서 다루겠습니다.

• 부모 컨테이너 왼쪽 모서리 회색 사각형를 클릭하고 [레이아웃] 탭을 봅니다.

• ‘방향(Direction)’ 설정을 가로(→)에서 **세로(↓)**로 바꿔주세요. 위젯들이 위아래로 차곡차곡 예쁘게 떨어지는 것을 볼 수 있습니다!

Step 3: 모바일에서 불필요한 요소 숨기기

• PC에서는 멋지게 보이던 무거운 배경 동영상이나 큰 이미지가 모바일에서는 데이터만 잡아먹고 스크롤만 길어지게 만드는 골칫거리가 될 수 있습니다.

• 숨기고 싶은 위젯이나 컨테이너를 클릭하고, 좌측 패널의 [고급] -> [반응형(Responsive)] 탭을 엽니다.

• ‘모바일에서 숨기기(Hide On Mobile)’ 스위치를 켭니다.

• 편집 화면에서는 회색 빗금 처리되어 희미하게 보이지만, 실제 방문자의 스마트폰에서는 아예 감쪽같이 사라집니다.

💡 시니어 개발자의 실무 팁 (작업 순서) 초보자분들은 PC 화면을 페이지 끝까지 다~ 만들고 나서야 모바일 화면을 확인하곤 합니다. 그러면 수정할 양이 너무 많아져서 금방 지칩니다. **실무에서는 “섹션(또는 컨테이너) 하나를 만들면, 바로 모바일 모드를 켜서 확인하고 수정한다”**는 생각으로 작업하셔야 합니다. 하나의 블록을 완벽하게 만들고 다음 블록으로 넘어가는 습관을 들이세요!

완벽합니다! 이제 여러분은 어떤 화면 크기에서도 깨지지 않는, 단단하고 유연한 반응형 웹사이트를 만들 수 있는 기술을 터득하셨습니다.

지금까지는 우리가 하나하나 수작업으로 벽돌을 쌓고 색을 칠했다면, 다음 [레슨 9]에서는 이 과정을 마법처럼 단축시켜 줄 ‘템플릿 라이브러리 활용법’을 배우겠습니다. 프로 디자이너들이 만들어둔 수천 개의 고퀄리티 페이지를 단 5분 만에 내 사이트로 복사해 오는 방법입니다.