오즈코딩스쿨 새싹반 - 모든 표현의 기본은 프레임이다 (2회차)

새싹반 두 번째 수업은 피그마로 직접 손을 움직이는 시간이었다. 레이아웃을 잡는 법부터 정렬, 그래픽을 직접 그리고 이미지를 다루는 것까지, 기본기에 해당하는 내용을 한 번에 훑었다. 솔직히 분량이 많았고 뒤로 갈수록 속도가 붙었지만, 강사님이 처음부터 끝까지 반복한 말 하나는 분명했다. 모든 표현의 기본은 프레임이고, 무엇을 어디에 담느냐를 정확히 해야 나중에 헤매지 않는다는 것.

이 말이 묘하게 익숙했다. 간호할 때도 그랬다. 같은 정보라도 정해진 자리에 정확히 기록해두지 않으면, 다음 근무자가 그걸 찾느라 헤맨다. 도구를 배우는 첫 단추가 '올바른 그릇에 담기'라는 게 그래서 더 와닿았다.

모든 표현의 기본은 프레임이다

수업은 레이아웃을 만드는 법에서 출발했다. 거의 모든 디자인 툴은 요소를 묶는 기능으로 레이아웃을 제어하는데, 피그마에서 그 기준이 되는 게 프레임이다.

강사님은 프레임을 '틀'에 비유했다. SNS 배너나 카페 대문 이미지처럼, 만들기 전에 크기와 규격을 정해두는 틀이 있어야 그 안에 내용을 배치할 수 있다는 것. 피그마에서 이 틀을 만들어주는 친구가 프레임이고, 단축키 F로 만든다. 프레임을 만든 뒤 우측 패널에서 **스트로크(Stroke)**를 추가하면 영역 경계가 눈에 보여서 작업하기 편하다.

요소를 프레임 안에 넣는 건 좌측 레이어 패널에서 드래그로 한다. 이미지·제목·본문을 가져와 프레임 하위로 끌어넣고, 배치 순서를 바꿔보면 읽히는 방식이 달라진다. 이미지를 먼저 보여주면 분위기로 먼저 접근하게 되고, 제목을 먼저 두면 제목이 중심이 되고 이미지가 그 하위 요소처럼 읽힌다. 텍스트 박스나 이미지 크기를 과감하게 바꿔보는 것만으로도 느낌이 확 달라졌다. 강사님은 '안 예쁘니까 안 된다' 식의 피드백은 하지 않는다며, 대신 의도를 살리는 방향으로 과감하게 시도해보라고 했다.

모든 표현 요소의 기본은 프레임이다. 여기서부터 시작하는 버릇을 들여야 한다.

왜 이렇게까지 프레임을 강조하는지는 협업 이야기에서 분명해졌다. 프레임이 들어가야 할 자리에 그룹이나 다른 요소가 섞여 있으면 다른 작업자가 힘들어진다고 했다. 우리가 하는 일은 결국 '틀에 배치하는 일'이라는 걸 잊지 말라는 당부였다.

정렬과 간격 — 초보를 벗어나는 가장 중요한 기능

배치를 했으면 정렬을 맞춰야 한다. 강사님은 이 정렬이야말로 제일 많이 쓰면서 제일 까다로운, 초보를 벗어나는 핵심 기능이라고 못 박았다.

여러 요소를 Shift + 클릭으로 다중 선택하면 우측 레이아웃 영역에 간격(Spacing) 옵션이 활성화된다. 선택한 상태에서 Alt를 누르면 간격 수치를 바로 조회할 수 있고, 요소 사이의 선을 잡고 조절하면 간격이 바뀐다. 순서를 바꾸고 싶으면 가운데 동그란 원을 잡고 옮기면 된다.

정렬 단축키는 외워두면 작업 속도를 크게 좌우한다. 묘하게도 게임의 WASD 키와 같은 구조라 손에 금방 붙었다.

단축키동작

Alt + W	위로 정렬
Alt + A	왼쪽 정렬
Alt + S	아래로 정렬
Alt + D	오른쪽 정렬
Alt + H	수평(Horizontal) 가운데
Alt + V	수직(Vertical) 가운데

수평 가운데와 수직 가운데가 처음엔 헷갈렸는데, 영어 Horizontal·Vertical의 앞 글자를 딴 거라고 생각하니 정리가 됐다.

요소가 하나씩 짝을 이루는 1:1 관계라면 그냥 정렬하면 되고, 여러 개가 늘어선 1:다 관계라면 분배 기능을 쓴다. 같은 가로 간격, 같은 세로 간격으로 한 번에 맞출 수 있다. 여러 개를 선택했는데 정렬이 안 맞으면 우측 구석에 자동 정렬(Tidy up) 버튼이 뜨는데, 이걸 누르면 알아서 같은 간격으로 정돈된다.

초반에 정렬을 소홀히 하면 생각보다 나중에 고생한다.

이 말이 간호 기본기와 똑같이 들렸다. 처음에 대충 넘어간 기본기는 꼭 나중에 발목을 잡는다.

다섯 가지 담는 그릇 — 섹션·프레임·그룹·마스크·불리언

오늘 수업에서 별 두 개, 가장 중요하다고 강조한 부분이다. 피그마에는 여러 요소를 묶는 '상위 레이어 요소'가 다섯 가지 있는데, 각각 쓰임이 다르다. 핵심은 다수의 요소를 하나의 기준으로 정렬해 묶어 쓰는 것, 이게 거의 모든 그래픽 디자인 툴의 가장 중요한 기능이라는 점이었다.

그릇단축키주 용도

섹션(Section)	Shift + S	모든 내용을 담아 보여주는 작업 구역(대시보드처럼)
프레임(Frame)	F / Ctrl + Alt + G	디자인 결과물을 담는 틀
그룹(Group)	Ctrl + G	그래픽 요소의 묶음
마스크(Mask)	Ctrl + Alt + M	특정 영역만 보여줄 때
불리언(Boolean)	툴바 → 합치기	도형을 합쳐 하나의 개체로 (아이콘 등)

해제는 대부분 Ctrl + Shift + G로 한다. 다만 마스크는 예외라, 해제하려면 다시 들어가 Ctrl + Alt + M을 한 번 더 눌러 토글로 꺼야 한다.

이 다섯 가지를 특징에 맞게 구분해서 쓰는 게 왜 중요한지, 강사님은 솔직하게 말했다. 회사에 들어가면 '여기서는 이걸 써야 한다'는 기준이 보통 정해져 있고, 그걸 틀리지 않는 게 협업의 기본이라는 것. 다른 사람이 내 작업을 열어봤을 때 문제가 안 생기게 하는 일이기도 했다.

여기서 또 간호가 겹쳤다. 같은 내용이라도 정해진 양식의 맞는 칸에 적어야 다음 사람이 바로 찾는다. 화면을 묶는 그릇을 약속대로 쓰는 일이, 차트를 규칙대로 쓰는 일과 다르지 않았다.

그래픽 직접 만들기 — 펜 툴과 도형

후반부는 그래픽을 직접 만드는 방법이었다. 디자이너는 텍스트와 이미지를 배치만 하는 게 아니라 직접 그래픽을 생산해야 할 때도 있으니까. 만드는 길은 크게 두 가지, 펜 툴로 그리거나 도형으로 만드는 것이었다.

**펜 툴(단축키 P)**은 클릭으로 점을 찍어 모양을 만든다. 기본은 직선이고, 점을 찍을 때 드래그하면 핸들이 생기면서 곡선이 된다. 이 곡선을 베지어 곡선이라고 했다. 더블클릭으로 패스 편집 모드를 드나들 수 있고, 편집 모드에서 선 위에 점을 추가해 가운데를 나누면 화살표 꼭지나 지그재그, 물결 같은 형태를 만들 수 있다. 다만 펜 툴은 익숙해지는 데 시간이 꽤 걸린다며, 베지어 게임 같은 외부 자료로 따로 연습하길 권했다. 예전엔 배경을 따는 누끼 작업이 펜 툴 연습의 좋은 교보재였는데, 요즘은 그걸 AI가 대신해줘서 일부러 연습할 일이 줄었다는 이야기도 곁들였다.

도형은 더 직관적이다. 다만 렉탱글(사각형)은 프레임과 다르다. 사각형은 그래픽적으로 합성할 수 있지만 편집 모드로는 들어갈 수 없고 크기만 조절된다. 즉 틀로 쓰는 프레임과 그래픽으로 쓰는 도형은 구분해야 한다. 도형마다 숨은 옵션도 있었다.

도형옵션만들 수 있는 것

렉탱글	둥글리기	모서리 둥근 사각형
원(Ellipse)	아크(Arc)	파이·도넛 차트 모양
다각형(Polygon)	카운트(Count)	삼각형·오각형 등 다각형
별(Star)	카운트 + 비율(Ratio)	별, 말풍선, 뾰족한 형태

모서리 둥글리기는 모든 도형에 공통으로 쓰이고, 카운트와 비율 값을 바꿔가며 노는 과정에서 다양한 그래픽이 나왔다. 색을 다르게 입히고 도형을 섞으면 자주 쓰는 패턴도 만들 수 있었다.

손으로 만드는 게 부담스러우면 플러그인도 있다. 단축키로 플러그인 창을 열어 'Wave' 같은 걸 검색하면 다양한 그래픽 형식을 자동으로 만들어준다. 특히 랜딩 페이지에서 배경 그래픽으로 자주 쓰인다고 했다.

이미지 다루기와 효과

이미지는 피그마 안에서 Unsplash를 검색해 외부 이미지를 바로 가져올 수 있었다. 여기서 강사님이 거듭 강조한 게 저작권이었다. 옵션에서 반드시 **Free(무료)**로 설정해야 하고, Unsplash Plus(유료) 이미지는 쓰면 안 된다고 못 박았다. 직접 구매할 게 아니라면 무료 이미지만 쓰는 버릇을 지금부터 들이라는 당부였다.

배경 제거도 피그마 자체 기능으로 됐다. 이미지를 선택하면 뜨는 메뉴에서 Select Area로 영역을 지정하고 Isolate를 누르면, 피그마가 배경을 분리해준다.

효과(Effects)는 종류별로 쓰임이 달랐다.

효과핵심쓰임

드롭 섀도우(Drop Shadow)	블러 수치가 낮을수록 단단한 그림자	입체감, 카드 그림자
레이어 블러(Layer Blur)	개체 자체를 흐리게	자유 그라디언트 효과
백그라운드 블러(Background Blur)	투명도 옵션이 필수	뒤 배경을 흐리게 비추기
글래스(Glass)/글래스모피즘	배경 블러 + 유리 질감	애플식 유리 효과
안쪽 그림자(Inner Shadow)	안으로 들어간 그림자	뉴모피즘

드롭 섀도우에 배경색을 더하면 흔히 보는 입체 이미지가 나오고, 색을 넣은 원형에 레이어 블러를 주면 자유 그라디언트 배경이 된다. 백그라운드 블러는 투명도를 먼저 준 뒤 적용해야 뒤 이미지가 흐려져 비치는데, 애플의 글래스모피즘이 나오기 전부터 쓰이던 방식이라고 했다. 안쪽 그림자와 바깥 그림자를 함께 응용한 게 한때 유행한 뉴모피즘이다. 효과는 하나만 쓰기보다 여러 개를 쌓을수록 디자인 임팩트가 커진다.

마지막으로 프레임의 **클립 컨텐츠(Clip Content)**도 짚었다. 켜두면 프레임 영역 바깥으로 삐져나간 요소가 잘려서, 화면을 프레임 안으로 깔끔하게 가둘 수 있다.

정리하며

오늘 한 일을 한 줄로 줄이면, 도구의 기본기를 손에 붙이는 시간이었다. 프레임으로 틀을 잡고, 정렬로 줄을 맞추고, 올바른 그릇에 담고, 그 위에 펜 툴·도형·이미지·효과로 표현을 얹는 것. 강사님 말처럼 결국 핵심은 의도에 맞는 표현을 만드는 일이고, 그러려면 이 기본기들이 손에 익어 있어야 했다.

분량이 많고 뒤로 갈수록 빨라져서 그래픽·효과 부분은 시연 위주로 빠르게 지나갔다. 그래서 펜 툴이나 효과는 오늘 배운 걸 바탕으로 따로 손에 익히는 시간이 필요할 것 같다.

기본기를 강조하는 수업이 간호 초년의 기억과 자꾸 겹쳤다. 정렬 하나, 그릇 하나를 약속대로 정확히 해두는 일이 당장은 사소해 보여도, 나중에 다른 사람과 일할 때 그게 다 표시 난다는 걸 안다. 그래서 오늘만큼은 화려한 결과물보다 프레임부터 정확히 잡는 버릇을 들이는 데 집중하기로 했다. 펜 툴은 베지어 게임으로 따로 연습해두고, 다음 수업 전까지 정렬 단축키부터 손에 완전히 붙여놔야겠다.