본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

모바일에서 핀치, 확대/축소, 좌우 스크롤을 하던 시대는 지났습니다. 오늘날 사용자들은 모바일에서의 매끄러운 경험을 기대합니다. 이 글에서는 Framer가 코드 수정 없이도 사용자에게 완벽한 경험을 제공하는 방법을 보여줍니다.

반응형 디자인의 진화

반응형 웹디자인은 어떤 기기나 브라우저에서도 자동으로 맞춰지는 웹사이트를 의미합니다. 스마트폰을 사용하든 데스크톱 컴퓨터를 사용하든 고객은 일관된 경험을 할 수 있습니다.

반응형 디자인 초창기에는 웹 디자이너들이 데스크톱 버전으로 시작하여, 모바일과 태블릿에 맞춰 디자인을 조정했습니다. 데스크톱, 모바일, 태블릿에 대한 breakpoint를 사용하는 것은 여전히 반응형 디자인의 핵심이지만, 요즘은 기기 유형이 너무 다양해서 모든 해상도에 맞춰 디자인하는 것은 현실적으로 불가능합니다.

2018년에는 가장 널리 사용되는 해상도(360x640)를 사용자의 23%가 사용했지만, 현재는 단일 해상도의 시장 점유율이 8%를 넘지 않습니다.

출처: Statcounter

스택을 이용한 자동 크기 조정이 한 가지 대안입니다. 디자인을 스택으로 변환하면 레이아웃이 변경 사항에 따라 자동으로 조정되므로 수동으로 breakpoint를 조정할 필요가 없습니다. 유동 그리드 레이아웃, 상대적인 위치 지정, 반응형 이미지 및 타이포그래피와 같은 도구도 이러한 환경에 사용할 수 있습니다.

Framer로 반응형 웹사이트 제작하기

Framer는 반응형 디자인을 보다 직관적으로 구현할 수 있도록 제공해주는 다양한 기능을 만나보세요.

1. 와이어프레임부터 시작하기

Framer의 와이어프레임 제작은 기존 디자인 도구와 다릅니다. 다양한 화면 크기에 맞춰 나중에 다시 만들어야 하는 목업 프레임을 만드는 대신, Framer의 컴포넌트는 처음부터 반응형으로 제작됩니다.

플랫폼의 구성 요소 라이브러리에는 다양한 화면 크기에 자동으로 적응되는 미리 구축된 요소가 있습니다.

• 네비게이션은 모바일 뷰에 맞게 자동으로 변환 가능

• 히어로 섹션은 화면 크기에 맞춰 자동적으로 조정 가능

• 콘텐츠 블록은 여유 공간에 맞춰 재배치 가능

와이어프레임을 구축할 때는 아래의 사항을 고려하여 제작해보세요.

• 탐색 기능을 간단하고 직관적으로 만들어 보기

• 사용자가 먼저 무엇을 보아야 하는지 고민하고, 콘텐츠 계층 구조에 초점을 맞추기

• 작은 화면에서 요소가 어떻게 쌓이고 다시 재배치 되는지 생각해보기

• 프로세스 속도를 높이기 위해 Framer에 구축되어있는 구성 요소를 사용해보기

기본적인 콘텐츠 블록으로 시작하여 점차 복잡성을 더하는 방식으로 이를 제작하는 것이 좋습니다.

이렇게 하면 기술적인 세부 사항에 얽매이지 않고 디자인의 구조와 계층 구조에 집중할 수 있습니다. 또한 내비게이션은 모바일과 데스크톱 환경에서 차이가 크므로, Framer를 사용하면 다양한 화면 크기에 맞춰 다양한 버전을 쉽게 제작해보는 것을 추천합니다.

2. 반응형 디자인의 기본, 브레이크포인트 설정하기

브레이크포인트는 반응형 디자인의 핵심입니다. 하지만 CSS 미디어 쿼리를 다루어 본 사람이라면 누구나 알다시피, 브레이크포인트는 다루기 까다로울 수 있습니다. 정확히 768px에서는 괜찮아 보이는 것이 767px나 769px에서는 깨질 수 있다는 것이죠.

Framer는 이러한 기존의 기술적인 프로세스를 직관적이고 시각적인 경험으로 전환할 수 있습니다. 예를 들어, Framer의 브레이크포인트 편집기를 사용하면 핸들을 드래그하여 중단점을 설정하고, 디자인이 실시간으로 변경되는 것을 확인할 수 있습니다. 또한 Framer의 반응형 미리보기 모드를 사용하면 다양한 화면 크기에서 디자인이 어떻게 보이는지 즉시 확인할 수 있습니다.

Framer의 가장 강력한 기능 중 하나는 브레이크포인트가 변경될 시 자동 적용된다는 것입니다. 작동 방식은 다음과 같습니다. 기본 레이아웃을 변경하면 해당 변경 사항이 다른 화면 크기에도 자동으로 적용되어 반복적인 작업을 크게 줄여줍니다.

3. 모바일에 우선적으로 접근하기

모바일 트래픽이 웹 트래픽의 61%를 차지하면서, 이젠 데스크톱을 먼저 디자인하는 기존 방식이 더 이상 의미가 없습니다. 대신, 모바일을 먼저 디자인하고 나중에 데스크톱에 맞춰 디자인을 조정하는 것이 좋습니다. 작은 화면용으로 디자인하면 나중의 공간이 부족해지기 때문에 디자인 과정 초기부터 무엇을 포함할지 전략적으로 결정해야 합니다.

Framer를 사용하면 모바일을 기본 레이아웃으로 간편하게 설정한 다음, 더 큰 화면에 맞춰 디자인을 점진적으로 향상시킬 수 있습니다. 아래와 같은 사항을 참고해보세요.

• 단일 열 레이아웃을 여러 열로 확장 가능

• 더 큰 화면에서 추가 콘텐츠를 표시

• 데스크톱 사용자를 위한 더욱 정교한 상호작용 기능 추가

• 모바일 네비게이션을 데스크톱 친화적으로 변환

• 가독성을 높이기 위해 타이포그래피 크기를 화면별로 조정

• 다양한 화면 크기에 맞게 이미지 레이아웃과 자르기 최적화

모바일 반응형 디자인에서 네비게이션은 가장 까다로운 부분 중 하나이지만, Framer를 사용하면 손쉽게 관리할 수 있습니다. 햄버거 메뉴나 하단 네비게이션 바와 같은 모바일 패턴을 데스크톱에서 전체 메뉴 바로 쉽게 구현할 수 있으며, 브랜드 일관성과 사용자 경험도 그대로 유지할 수 있습니다.

4. 유동적인 그리드 레이아웃 만들기

Framer의 Grid 기능은 반응형 그리드 시스템을 직관적으로 제공합니다. 자동 레이아웃 기능을 활용해 간격, 요소 간 일관된 간격 유지, 레이아웃 크기 조절 시 적절한 정렬 유지 등 반응형 디자인에서 흔히 발생하는 여러 문제를 자동으로 처리합니다.

Framer의 그리드 시스템을 사용하면 다음을 수행할 수 있습니다.

• 다양한 브레이크포인트별 열 개수 지정 가능

• 요소가 열에 걸쳐 어떻게 확장 될지 조정 가능

• 요소 흐름과 크기 조절 관리 가능

• 간격 자동 조정 가능

Framer 그리드 시스템의 가장 강력한 기능 중 하나는 CMS 컬렉션, 사용자 제작 콘텐츠, 동적 이미지와 같은 동적 콘텐츠를 처리할 수 있다는 것입니다. 새 항목을 업로드할 때 Framer의 그리드 시스템은 레이아웃을 처음 디자인했을 때와 동일하게 유지해 줍니다.

5. 스택과 상대적 위치 활용하기

그리드가 전반적인 페이지 구조를 처리하는 반면, Framer의 스택은 해당 구조 내의 요소가 서로 어떻게 관련되는지 관리합니다. 스택은 요소 간의 간격과 정렬을 자동으로 처리하는 지능형 컨테이너입니다. 요소를 가로(행) 또는 세로(열)로 배열할 수 있으며, 화면 크기가 변경되어도 스택은 적절한 간격을 유지합니다.

핵심은 상대적 위치 지정입니다. 요소를 특정 좌표에 고정하는 대신, 스택을 사용하면 요소가 컨테이너와 인접한 요소에 따라 위치를 조정할 수 있습니다.

스택의 일반적인 사용 상황은 다음과 같습니다.

• 데스크톱과 모바일에서 원활하게 전환되는 탐색 메뉴

• 콘텐츠에 관계없이 일관된 간격을 유지하는 카드 레이아웃

• 입력과 라벨을 완벽하게 정렬하는 폼 인터페이스

• 모든 화면 크기에 깔끔하게 적용되는 콘텐츠 섹션

스택의 진정한 힘은 서로 중첩될 때 발휘됩니다. 가로 및 세로 스택을 결합하여 정교한 레이아웃을 만들 수 있으며, 각 스택에는 "컨테이너 채우기" 및 "컨텐츠 감싸기"와 같은 자체 자동 레이아웃 속성이 있습니다. 스택과 그리드의 차이점에 대해서는 Framer's Academy 에서 자세히 알아볼 수 있습니다 .

6. 이미지와 타이포그래피 최적화

Framer의 반응형 이미지 접근 방식은 단순한 크기 조정을 넘어섭니다. 지연되는 로딩을 통해 이미지 전달을 최적화하여 성능을 향상시키고, 반응형 이미지 소스 세트를 자동적으로 생성하며, 이미지 크기 조절 시 주요 부분에 초점을 맞춰주는 자동 자르기 도구를 사용할 수 있습니다.

Framer의 도구는 다음과 같은 기능을 통해 어떤 크기에서도 이미지가 멋지게 보이도록 도움을 줍니다.

• 다양한 장치에 적합한 이미지 크기 제공

• 가능하면 SVG를 사용하여 크기를 선명하게 조정

• 조정 가능한 위치와 크기를 제공

• 디바이스별 적절한 이미지 크기 제공

• SVG 활용으로 선명한 스케일링 지원

• lazy loading과 동적 크롭 기능 제공

Framer의 타이포그래피 시스템을 사용하면 다양한 브레이크포인트에서 글꼴 크기, 줄 간격, 간격을 관리할 수 있습니다. 또한 글꼴 로딩을 최적화하여 레이아웃 변화를 방지하고, 사용자 지정 글꼴이 로딩되는 동안에도 텍스트의 가독성을 유지합니다.

반응형 디자인 관련 문제를 방지하려면 부드럽게 확장되는 유동적 글꼴 크기를 설정할 수 있습니다. 또한, 최소 및 최대 크기를 활성화하여 텍스트가 너무 작거나 커지지 않도록 할 수 있습니다. Framer의 텍스트 맞춤 기능을 사용하면 브라우저나 섹션에 맞춰 크기가 조절되는 눈길을 끄는 헤더와 문단을 디자인할 수 있습니다.

출시 전 반응형 테스트

Framer는 출시 전에 사이트의 반응성을 테스트할 수 있는 두 가지 강력한 방법을 제공합니다.

1. 미리보기 모드: 내장된 미리보기 모드를 사용하면 편집기를 벗어나지 않고도 다양한 기기에서 디자인을 확인할 수 있습니다. 다양한 디바이스 환경을 에디터 내에서 즉시 확인 가능

2. 실제 기기 테스트: Framer의 공유 링크를 통해 스마트폰, 태블릿, 모니터 등 다양한 환경에서 직접 테스트할 수 있습니다. 다양한 스마트폰, 태블릿, 모니터에서 디자인 작업을 진행하면 모든 것이 예상대로 작동하는지 확인하고 새 웹사이트를 세상에 공개하기 전에 버그를 발견할 수도 있습니다.

모든 화면에서 아름답게 작동하는 웹사이트 만들기

반응형 웹디자인은 필수적인 요소가 되었으며, Framer는 이를 손쉽게 구현할 수 있는 도구를 제공합니다. 정적인 레이아웃이 아닌, 유연하고 확장 가능한 웹사이트를 제작해보세요.

Framer의 템플릿을 살펴 보고 반응형 디자인을 시작하세요. 갤러리를 방문하여 다른 사용자가 만든 반응형 웹사이트를 살펴보고, Framer 무료 계정에 가입하여 오늘 바로 반응형 웹사이트 구축을 시작해보길 바랍니다.

본 글은 Framer 공식 블로그의 ‘How to design responsive websites without code’를 번역·각색한 콘텐츠입니다.