나는 최근 웹앱을 재미로 만들고 있다. 나는 본격적인 코딩을 시작하기 전, 이 서비스의 화면을 디자인하기 위해 피그마를 이용했다.
오늘은 내가 직접 만든 UI를 같이 만들어 보면서 피그마 사용법을 익혀보겠다. 10분이면 충분하니 천천히 따라오길 바란다. 디자인을 잘 못하는 나도 만들었으니 어렵지는 않을 것이다. 혹시 어려운 부분이 있다면 댓글로 남겨주길 바란다.
1. 만들어 볼 화면
내가 만든 화면은 아래와 같다. 나도 디자이너가 아니기 때문에 크게 예쁜 화면은 만들지 못했다. 하지만 초보자들이 따라 만들면서 기본 기능을 익히기에는 오히려 더 좋을 것이다. 이 화면을 만들면서 우리는 요소 삽입 방법, 속성 변경 방법, 중복된 작업 없애는 방법, 간격 자동 맞춤 방법을 익힐 것이다.
이 정도면 10분 정도만 투자해도 피그마 사용법을 익힐 수 있을 것이다. 다만 아무리 쉬운 사용법이라도 직접 해봐야 늘기 때문에, 이 글은 직접 따라하며 읽기를 바란다.
2. 피그마 사용법
프로젝트에 따라 순서가 약간씩 차이가 날 수는 있지만, 피그마 사용법은 다음 과정에 따라 이루어진다.
- 파일 생성하기
- 화면 프레임 만들기
- 화면 안에 요소 삽입하기
- 삽입한 요소들의 속성 변경하기
각 단계에 대해 하나씩 자세히 알아보자.
2.1. 파일 생성
가장 먼저 파일을 만들어야 한다. 오른쪽 상단의 ‘Design File‘을 클릭하면 새로운 파일을 만들 수 있다.
지금은 간단한 실습이니 아무렇게나 파일을 만들어도 상관없다. 하지만 나중에 파일이 많아지거나 팀 프로젝트를 하면 파일을 잘 관리해야 한다. 파일 이름, 폴더 위치를 가독성 있게 정리하는 습관을 들이자. 이런 사소한 부분이 쌓여서 실력 격차가 벌어진다.
2.2. 화면 프레임 만들기
파일을 만들었다면 화면 프레임을 만들어야 한다. 우리는 데스크탑 또는 모바일 크기의 프레임을 먼저 만들어 두고, 이 안에 여러 버튼이나 텍스트를 채워가며 화면을 만들어 나갈 것이다. 프레임을 따는 방법은 간단하다.
- 왼쪽 위 툴바에서 우물 모양의 아이콘을 클릭한 후 [Frame] 버튼을 누른다. (단축키는 F)
- 그 후 오른쪽 디자인 창에서 원하는 크기의 프레임을 선택하면 된다. 우리는 PC 화면을 구성할 것이므로 [Desktop] 버튼을 클릭하자.
2.3. 화면 안에 요소 삽입하기
이제 프레임 안에 다양한 요소들을 채워 넣어야 한다. 사실 간단한 UI 프로토타입은 사각형, 선, 텍스트, 원 정도의 요소만 활용하면 대부분 만들 수 있다. 실제로 우리가 직접 방문한 여러 사이트를 떠올려 보면, 대부분 위 4가지 요소로 이루어져 있음을 알 수 있다. 물론 아이콘을 직접 그려서 삽입하면 더 다채롭게 화면을 꾸밀 수 있다. 하지만 초보자에겐 조금 어려울 수 있으니 오늘은 생략한다.
요소를 넣는 방법은 간단하다.
- 위에 있는 툴바에서 사각형 모양 아이콘을 클릭한다.
- 삽입하고 싶은 도형을 선택한다.
- 원하는 크기만큼 화면에 드래그 한다.
오늘은 만들 화면에는 다음과 같은 요소를 삽입해야 한다. 어렵지 않으니 천천히 배치해보자. 아무리 쉬워보여도 직접 해봐야 자신의 것으로 만들 수 있다.
- 화면 상단의 네비게이션 바가 되어 줄 사각형 1개
- 왼쪽 버튼이 되어줄 사각형 (원하는 개수만큼)
- 체크박스 역할을 사각형 (원하는 개수 만큼)
- 지정된 위치에 들어가는 텍스트 (아직 안채워도 된다.)
우선 지금은 아래 화면처럼만 나오면 된다. 요소 간 간격이나 비율, 색상은 맞지 않아도 괜찮다. 이 과정은 다음 단계에서 진행할 것이다.
2.4. 삽입한 요소들의 속성 변경하기
이제 좀 더 다채롭게 화면을 꾸며볼 것이다. 방금 삽입한 요소들의 색깔도 바꾸고, 글자 폰트도 바꾸고, 외곽선도 진하게 할 것이다. 이와 같은 속성 변경 과정은 화면 오른쪽의 디자인 창에서 이루어진다.
하나씩 자세히 알아보자.
2.3.1. 색상 변경
먼저 화면 위 네비게이션바의 색상을 변경해보겠다. 네비게이션바를 클릭하고 오른쪽 디자인 창을 확인해보자. 오른쪽 화면에 [Fill] 이라는 메뉴가 있을 것이다. 여기서 네모칸을 클릭하면 도형 안의 색상을 변경하는 창이 나온다.
나는 색상코드 ‘2A1AE4’를 적용했다. 비슷한 색상이라도 오묘하게 다른 색상이 많아서, 평소 자신이 자주 사용하는 색상의 색상 코드를 메모하고 있으면 용이하다. 이 코드를 색상 코드 칸에 붙여넣고 엔터를 누르면 해당 색상으로 색이 바뀐다.
주의할 점이 있다. [Fill] 메뉴에서 눈 모양 아이콘의 눈이 항상 떠진 상로 있어야 한다. 이 눈 모양 아이콘을 클릭하면 눈이 감기는데, 이 상태에선 사각형 자체가 숨김 표시되어 보이지 않는다.
2.3.2. 사각형 모서리 둥글게 만들기
이제 버튼을 만들 것이다. 버튼은 사각형의 끝을 둥글게 만들어 줘야 예쁘다. 여기서는 사각형의 끝을 둥글게 만드는 법을 배울 것이다.
방금 삽입했던 사각형을 클릭하면 아래 사진과 같은 화면을 볼 수 있을 것이다. 사진에서 빨간 네모가 있는 부분이 사각형의 끝을 얼마나 둥글게 하는지 결정하는 곳이다. 보통 30정도로 설정하면 딱 예쁘게 사각형의 네 모퉁이가 둥글어진다.
2.3.3. 도형 외곽선 따기
버튼이 될 도형의 외곽선을 따면 버튼의 형태가 더 잘 드러난다. 외곽선 역시 화면 오른쪽 디자인 창에서 딸 수 있다. 디자인 창의 [Fill] 밑에 있는 stroke를 클릭해서 만들 수 있다. 빨간 상자가 있는 부분의 숫자를 바꾸면 외곽선의 두께가 바뀐다.
여기까지 따라했다면 제법 그럴듯한 버튼 껍데기가 나왔을 것이다. 위와 동일한 방식으로 다른 사각형 모양 요소들도 변경시킬 수 있다. 다른 부분은 직접 실습삼아 해 보길 바란다.
2.3.5. 텍스트 채우기
이제 텍스트를 배치할 차례다. 오른쪽 T 모양 아이콘을 클릭한 뒤 원하는 위치에 마우스를 드래그하면 텍스트가 나온다. 여기서 원하는 텍스트를 입력하면 된다. 텍스트도 마찬가지로 오른쪽 디자인 창에서 색상이나 폰트, 굵기, 투명도를 변경할 수 있다.
오늘 만들 화면을 만들기 위해서는 네비게이션 바 내부, 버튼 내부, 체크박스 옆 등에 텍스트를 배치하면 된다. 텍스트의 속성은 다음과 같이 설정하면 꽤 깔끔하다. 만약 평소 자주 사용하는 폰트나 글자 크기가 있다면 그걸 사용해도 된다.
- 기본 폰트 : Noto Sans KR
- 글자 크기: 메인 질문은 70, 버튼 안에 들어가는 버튼은 35, 선택지의 글꼴은 30
- 투명도: 메인 질문의 투명도를 60% 정도로 설정
2.5. 반복 작업 없애기 : 컴포넌트 사용하기
실습을 하면서 느꼈을 텐데, 화면 하나를 만들기 위해 반복적인 작업을 많이 해야 한다. 버튼의 크기, 체크 박스의 크기, 글자 크기 등 모두 비슷한 요소가 많다.
이 요소를 하나하나 바꿔주려면 시간이 많이 든다. 이때는 일괄적으로 요소를 일괄적으로 바꿔주는 기능을 사용하면 편하다. 이때 사용할 수 있는 것이 ‘컴포넌트‘라는 기능이다. 컴포넌트를 사용하는 방법은 다음과 같다.
- 일괄 작업을 적용할 원본 객체를 선택한다.
- 마우스 우클릭 후, ‘Create Component’를 클릭한다. (단축키는 Alt + Ctrl + K)
- 원본 객체를 복사하여 사용한다. (Alt를 누른 채 드래그하면 복사된다.) 이렇게 복사된 객체들을 ‘인스턴스’라고 한다.
- 이제 원본 컴포넌트를 변경하면 변경 사항이 모든 인스턴스에 한 번에 적용된다. (인스턴스를 변경해도 원본에 영향을 주진 않는다.)
2.6. Auto Layout
화면을 만들면서 버튼이나 텍스트나 요소의 간격을 맞추는 것이 굉장히 번거로웠을 것이다. 이럴 때 쓸 수 있는 기능이 바로 Auto Layout이다. Auto Layout 기능은 다음과 같이 사용할 수 있다.
- 간격을 맞출 요소들을 드래그하여 한 번에 선택한다.
- 화면 오른쪽에서 ‘Auto Layout’을 클릭한다.
- 화살표 방향을 선택하여 수직 정렬을 할 것인지, 수평 정렬을 할 것인지 선택한다.
- 숫자를 변경하면 요소 간 간격을 변경할 수 있다.
3. 피그마를 잘 쓰려면
실습을 하면서 느꼈을 테지만, 피그마의 기능 자체는 단순하다. 설령 모르는 기능이 있더라도 chatgpt에게 물어보면 필요한 기능을 잘 설명해준다.
중요한 것은 디자인 감각이다. 가령 색상을 변경하는 법 자체는 어렵지 않으나, 이 위치에 어떤 색상을 적용해야 깔끔한 UI가 나올지 아는 것은 쉽지 않다.
이런 센스는 약간은 타고난 부분이다. 하지만 끊임없는 반복 연습과 피드백, 벤치마킹을 통해 디자인 감각을 개선할 여지는 있다. 나도 디자인 재능이 없기 때문에, 90% 이상의 디자인을 다른 사이트에서 벤치마킹한다.
디자이너가 아니라 pm이라면, 디자인 감각보다는 협업 능력이 중요하다. 피그마를 활용해서 개발자, 디자이너들과 원활히 소통할 수 있어야 한다. 이 부분도 마찬가지로 기능을 얼마나 잘 쓰는지 보다는, 평소 커뮤니케이션 실력이나 프로젝트 리딩 실력에 따라 좌우된다.
결론적으로 피그마를 잘 쓰는 건 어렵지 않다. 중요한 건 피그마를 잘 쓰기 위해 얼마나 자신의 본질을 날카롭게 갈고 닦았느냐가 중요하다.