FlutterProject [Happy-Drip] 4일차 - 기본 UI Design Figma 구현 준비 중 [Season 1]

[김건우]

안녕하세요. 이번 시간에는 제가 현재 제작 중인 Happy-Drip 이라는 Application 진행 상황 및 여러 기능, 그리고 Figma 에서 진행되고 있는 Design 진행 상황에 대해 소개드리고자 간략하게 Blog 에 Posting 해봅니다.

지난 1주일 중 저번 주 수요일부터 회사 일이 생겨서 HappyDrip Design 작업을 제대로 진행해보지 못했습니다. 그리고 금요일 이후로 어제까지 연휴 기간이라 집에서 간략하게 알고리즘 공부만 해왔습니다..ㅎㅎ 조금 많이 후회하고 있습니다.

출처 : https://jjalbot.com/tags/%ED%9B%84%ED%9A%8C

암튼 연휴도 끝났으니 오늘은 한 번 Figma 를 활용하여 간략한 Design 을 꾸며볼까 합니다.

우선 제가 Figma 사용이 처음이라 간략한 Layout 을 한 번 제작 중에 있습니다.

Figma 기초 익히기

사내 프로젝트 진행 시 Figma 를 정말 많이 사용했었던 것 같은데, 그 Figma 를 활용하여 본인이 직접 디자인하게 된다고 생각하니 감개무량하지만 좀 많이 불안했습니다. Figma 디자인을 활용하여 구성하는 법을 알고는 있었지만, 정작 제가 어떻게 Design 을 구성할지에 대해선 생각을 해본 적이 없었습니다.

Layout 만들기

우선 Layout 입니다.

다시 Figma 를 보니 이렇게 깔끔하고 보기 좋은 Tool 인줄 모르고 있었습니다.

그런데 옆의 메뉴를 확인해보니..

출처 : https://m.blog.naver.com/sukkie6598/221990775912

이럴 수가... iPhone 위주로 Menu 가 구성되어 있더라고요.. 이 App 이 동양쪽 국가에서 만들어진 것이 아니고 미주, 유럽쪽에서 만들어진 Design Tool 이라고 해도 Android 관련 Menu 가 저기 빨간 직사각형 안에 단 2개 밖에 없다는 것이 조금 안타까웠습니다.

암튼 메뉴는 상단과 같이 여러 기종들을 선택하여 Design 작업을 할 수가 있고, 본인이 원하면 Design 을 자유자재로 바꿀 수 있습니다.

그럼 Layout 은 아무거나 선택 후, 간단한 Design 을 진행해보도록 하겠습니다.

우선 # 표시의 Button 을 Click 후, Frame 을 Click 합니다.

그 다음, 원하는 기종 중 하나를 선택합니다.

제가 사용하고 있는 기종은 Android 계열이지만, 여기서는 iPhone 이 좀 더 종류가 많고 다양성이 넘쳐나기 때문에 iPhone 13 Pro Max 를 선택하도록 하겠습니다.

짜잔!! Layout 하나가 생성되었습니다. 이제 여기에다 간략한 Design 을 입혀보는 작업을 해보도록 하겠습니다.

Layout Color

그 다음은 Layout Color 을 설정해보도록 하겠습니다.

오른쪽 Design 밑에 Fill 밑에 있는 FFFFFF 를 클릭합니다.

선택하면 본인이 원하는 색상을 직접 입력하여 선택할 수 있습니다. 

직접 입력하는 것이 조금 불편하다면 Solid 옆에 붙어 있는 흰색 동그라미 아이콘을 마우스로 끌어당기며 원하는 색상을 선택하시면 편리합니다.

저는 원하는 색상을 E0C2C2 로 선정하였습니다. 한 번 확인해보니 다른 색상들은 너무 눈의 피로를 유발시키는 것 같아서 제가 보기에 눈에 피로를 유발하지 않는 색상을 선택하였습니다.

Figma Text

이번엔 Text 를 활용하여 간단한 Text 를 Layout 상에 적어보도록 하겠습니다.

먼저 T 라고 적혀 있는 Menu 를 Click 합니다.

선택하고 Layout 을 Click 하면 (여기 사진에서는 깜빡이지는 않지만) 화면에서 깜빡이면서 글씨 입력을 요구할 겁니다.

실제로 위 Image 처럼 Text 만 만들어놓고 입력하지 않고 그냥 다른 화면이나 다른 창으로 이동한다면 제대로 입력되지 않은체 투명한 모습으로 우리에게 보일겁니다.. 

마치 노홍철씨가 없는 홍철팀처럼 말이죠..ㅎㅎ

출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dkgoggog21&logNo=221413283891

다시 본론으로 돌아와 Text 를 만들고 한 번 크기 조절과 글꼴 (Font) 을(를) 바꿔보도록 하겠습니다.

현재 Cursor 가 깜빡이고 있는 지점에서 Ctrl + A 를 누릅니다.

Ctrl + A 를 누르면 하단과 같이 Text 전체를 선택할 수 있게 됩니다.

전체 선택을 한 후, 우측 하단에서 Text Tab 으로 들어갑니다.

여기서는 글꼴 (Font) 과(와) 글꼴 굵기, 그리고 글꼴 Size 뿐만 아니라 좌측 정렬, Text 배치 위치 등 다양한 메뉴를 선택할 수 있습니다.

저는 여기서 글꼴과 Size 만 우선적으로 선정하도록 하겠습니다.

글꼴 굵기는 Bold, 글꼴 Size 는 30으로 선택하였습니다.

그리고 상하 글자 간 자간 간격은 Default 값인 36에서 45로 변경하였습니다.

변경한 Design 은 다음과 같이 나옵니다. 기존 자간보다는 좀 더 넓은 느낌을 제공해줍니다.

왼쪽 Image -> 기존 자간 36                                                            오른쪽 Image -> 새로 변경한 자간 45

Banner

이번엔 Banner 를 만들어 보도록 하겠습니다. 상단에 Text 만 있으니 뭔가 휑하다는 느낌이 좀 많이 강합니다. 한 번 수정해보도록 하겠습니다.

상단에서 직사각형 모양의 Icon 을 Click 후, Rectangle 을 선택합니다.

하단의 Image 와 같이 Banner 를 한 번 그려보았습니다.

Banner 에 색상을 한 번 입혀보도록 하겠습니다.

색상은 CFBFDC 로 설정하였습니다.

Banner Title 를 입력합니다.

글꼴 (Font) 굵기는 Semi Bold, 글꼴 Size 는 21 로 설정하였습니다.

이제 한 번 이 Banner 의 내부를 장식하는 Image 를 담을 직사각형 하나 만들어보도록 하겠습니다.

먼저 Rectangle 을 선택 후, Drag 하여 화면에 표시합니다.

그 다음, 모서리가 둥근 직사각형으로 모양을 한 번 변형해보도록 하겠습니다.

직사각형만 있는 것이 뭔가 칙칙해 보이기도 하고 딱딱하게 보이는 느낌도 어지간히 있기 때문에 한 번 변경해보도록 하겠습니다.

방금 새로 만든 직사각형 도형에 갔다 대시면 o 라는 기호가 총 4곳이 보입니다. 이 o 라는 기호를 활용하여 모서리가 둥근 직사각형을 만들어보도록 하겠습니다.

Radius 값은 26으로 설정하였습니다.

Display 되는 순서를 조절하여 지금까지 가려졌던 Text 를 Display 되도록 바꿔보겠습니다.

다음과 같이 바뀐 것을 확인할 수 있습니다.

쓰다보니 너무 길어지는 것 같아서 Series 별로 나누어 작성해볼까 합니다.

뒷 이야기는 다음 편에서 이어서 작성해 나가도록 하겠습니다.

오늘은 여기까지입니다. 감사합니다!!!