롤 밴픽 페이지 만드는 과정에서 웹 디자인부터 시작했다.
현재 웹 디자인 툴 중 협업에서 가장 많이 쓰이는 것이 피그마이기에, 피그마를 통해 직접 웹 디자인을 해보려고 한다.

피그마

피그마 (Figma)

: 스마트폰 애플리케이션 또는 웹사이트 등을 디자인할 때 사용하는 UI TOOL로 무료로도 사용가능하다.

찾아보니, 현재 피그마가 많이 활용되는 이유는 협업 가능성 때문이다. 공동으로 온라인에서 편집하는 것이 가능하기에 협업에 용이하다.

요금제가 종류별로 존재하지만, 나는 혼자 활용할 것이고, 프로젝트는 1개만 만들것이기에 무료인 Starter 요금제를 사용한다.

버전도 데스크톱 버전과 온라인 버전 두 종류가 있는데, 이는 종류의 특징을 찾아 선택하면 될 것 같다. 혼자 작업하기에 데스크톱 버전을 사용하기로 결정했다.

피그마 설치부터 계정 생성 및 프로젝트 생성까지의 과정은 아래와 같다.

1) 피그마 설치 : 피그마 다운로드 페이지에서 OS에 맞추어 다운로드하면 된다.

2) 계정이 없으면, 피그마 홈페이지에서 계정을 생성하면 된다. 구글계정 연동도 가능하다.

3) 이후, 팀명, 사용 목적, 요금제, 디자인 용도(핸드폰인지 데스크탑인지 등)을 결정한다.

4) 피그마 Desktop App으로 로그인한다.

5) Project가 생성되어 있는지 확인한다.

프로젝트명과 팀명을 Rename하여 설정을 마무리했다.
(dl-00-e8 팀의 LoLBP라는 이름의 프로젝트가 생성되어 있다.)

위 사진에서 New desing File을 클릭하여 새로운 디자인 파일을 만들고 디자인을 시작하면 된다.

피그마 사용한 단축키 정리

피그마 모든 단축키 확인하는 법

위 사진처럼 디자인 페이지의 우측 하단 물음표를 클릭하면,

위 사진처럼 되고, 이중 Keyboard shortcuts를 클릭하면 용도별 단축키가 정리되어 있다.

F : Frame 설정
R : Rectangle 모양 사용
T : Text 사용
[ : Send to back
] : Bring to front

디자인

나는 처음 접속했을 때의 안내 페이지인 First Page와 밴픽을 직접적으로 진행하는 Main Page로 크게 두 페이지를 디자인하기로 했다.

• First Page : 페이지 접속 시 첫 화면으로, 팀명을 정하고 밴픽을 시작하도록 안내
• Main Page : 밴픽을 직접적으로 진행하는 화면

First Page

Frame : Desktop - Desktop (1440x1024)
Background-color : 272323 / 100%
"League of Legends Ban Pick System" : Text (Jost, Regular, 65, F5F5F5)
"Blue Team" : Text (Jost, Regular, 30, 6472F3)
Blue Team : Rectangular
"Red Team" : Text (Jost, Regualr, 30, BC2B2B)
Blue Team : Rectangular
"Start" : Text (Jost, Regular, 30, 000000)
Button : Rectangular (5E6A62)

Main Page

Frame : Desktop - Desktop (1440x1024)
Background-color : 272323 / 100%
Pick : Rectangular (D9D9D9 / 50%)
Ban : Rectangular (D9D9D9 / 100%)
Undo & Pick : Rectangular (5E6A62)
ChampionList : Rectangular (D9D9D9 / 100%)
Blue Team Name & Red Team Name : First Page의 색상 동일

경험

밴픽 페이지 디자인은 특별하게 할 만한 점이 존재하지 않아서, 피그마로 UI를 디자인하는 걸 체험하는 정도의 수준으로만 진행했다. Rectangular 모형을 세부적으로 다듬거나 하는 작업은 아예 안했다.
해보면서 느낀 점은, 내 미적 감각은 존재하지 않는다는 거다.
디자이너들을 존경하게 된다.