자유롭지만 단단한 디자인을 위해

392
0

오랜 시간 동안 많은 디자이너들과의 커뮤니케이션을 통해 느낀 점 중의 하나는 자유로운 레이아웃이라는 권한을 주었을 때 오히려 제작을 힘들어한다던가, 아니면 일정 기준이 없어 어려워하는 경우를 자주 겪곤 했습니다. 그런데 이 자유로운 레이아웃이라는 개념이 사용된 곳이 생각보다 굉장히 많습니다. 이커머스의 룩북, 매거진은 물론 개인 포트폴리오, 미술관 전시 소개 화면등에서 특히 자주 쓰입니다. 바로 아래 이미지와 같은 경우를 예로 들 수 있습니다. 이런 형태를 범용적으로 Freeform 레이아웃이라는 용어로 불립니다.

사실은 그리드가 존재합니다.


Freeform 레이아웃(Non Grid 레이아웃)

Freeform 레이아웃은 말 그대로 형식과 구조에 얽매이지 않고 자유로운 표현을 할 수 있는 레이아웃을 의미합니다. 자유롭게 배치하니 이거 참 웬 꿀이냐라고 할 수 있겠지만 사실 굉장히 어렵습니다. 말 그대로 그리드 시스템이 존재하지 않는다는 것을 의미하기 때문이죠. 기준이 없으니 결과물에 대한 확신도 없고 매우 주관적인 판단으로 디자인을 할 수밖에 없습니다. 그렇다고 모든 디자이너들이 균형과 배치에 타고난 감각을 갖고 있는 것도 아닐 테니 말입니다.

그래서,

그리드 시스템을 활용하여 자유로운 배치를 할 수 있는 방법에 대해 연재를 하고자 합니다. 아래 이미지를 통해 알 수 있듯이 왼쪽 레이아웃에서 오른쪽 레이아웃으로 가는 다양한 과정을 익히실 수 있습니다.

균일한 컬럼 그리드를 활용한 두 가지 레이아웃

이 시리즈를 통해 매거진, 룩북, 갤러리, 포트폴리오 등을 제작하실 때 많은 참고가 되었으면 하는 바람입니다. 

목차는 아래와 같습니다.

1. 균일한 컬럼 그리드를 활용한 자유로운 배치 방법(수평 그리드, 거터, Grouping에 대해 익힙니다.)

2. 균일하지 않은 그리드를 활용한 자유로운 배치 방법(직접 그리드를 만들어 볼 수 있습니다.)

3. Overlapping 레이아웃의 이해와 적용 방법(이미지가 겹치는 배치에 대해 익힙니다.)

4. Typography와 조화롭게 배치하는 방법(글과 조화롭게 배치되는 방법에 대해 익힙니다.)

5. 다양한 Shape의 활용 방법(조형원리 중 변화, 강조에 대해 익힙니다.)

추가로 해당 연재분에 대한 피그마 파일도 공유 예정입니다. 읽어주셔서 감사합니다.

다양한 글을 더 보시려면 👉 https://brunch.co.kr/@jisungmin

포트폴리오 👉 https://www.behance.net/sungminn

링크드인 👉 https://www.linkedin.com/in/sungminji

지성민
글쓴이

지성민

UI / GUI / BX 디자이너, 디자인 성장을 돕고자 합니다.

큐레이션된 정보를 전달드립니다. 

합격보상금 100만원

Acquisition Strategy Lead (Marketing)

브레이브모바일(숨고,Soomgo)

상시

합격보상금 100만원

[인턴][아누아 ANUA] 한국사업부 전략 RA

더파운더즈

상시

합격보상금 100만원

그로스 마케터(그로스해커), 서울

페이타랩(패스오더)

상시

합격보상금 100만원

CRM 그로스 매니저 (2년 이상)

마카롱팩토리

상시

합격보상금 100만원

브랜드 마케터

데이비드

상시

합격보상금 100만원

엔터프라이즈 CRM 마케팅 솔루션 PO

플레어랩스

상시

출처: 원티드

답글 남기기

ㅛ

지성민

Manager

다른 아티클 보기

AI로 라벨이 있는 제품과 모델을 합성하는 방법(2)

무료 강의를 진행하고자 합니다.

전문가 특강을 무사히 마쳤습니다.

아직 구독 전이신가요?
구독하고 더 많은 콘텐츠를 확인해보세요.

이름/회사명

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요