SideProject [Happy-Drip] 5일차 - 기본 UI Design Figma 구현 준비 중 [Season 2] (Image 넣기)

[김건우]

안녕하세요. 오늘도 어김없이 어제 작업 물에 이어서 기본 UI Design Figma 구현을 진행해보도록 하겠습니다.

원래라면 어제 Banner 에 Image 를 넣는 작업까지 진행하고, 시간이 남았다면 하단에 List of Menu 와 ListView Design, 그리고 Footer 까지 Design 까지 해서 진행하려고 했지만 그러지 못했습니다.

출처 : https://mamasuncut.com/sad-meme/

Figma 기초 익히기 - Season 2

어제 진행했었던 Figma 기초 익히기 Season 1 작업에 이어서 오늘은 Figma 기초 익히기 Season 2 작업을 시작합니다.

어제의 Design 과 달리 오늘은 뭔가 Design 이 칙칙하게 보이지 않도록 작업을 진행해보겠습니다.

Main Page 뼈대 Design 소개

일단 Design 을 해야 하는 Page 는 하단의 Image 와 같이 뼈대가 구성되어 있습니다.

Image 의 좌측 상단에는 Design 뼈대를 그린 모습이고, Image 밑에 있는 영어로 된 설명문은 제가 어떻게 Page 를 Design 해나갈건지 작성해 놓은 설명문입니다.

맨 처음 HappyDrip 을 소개하는 글에서도 언급했던 것처럼, HappyDrip Project 는 우울증이나 번아웃을 겪고 있는 사람들이 좀 더 활동적이고, 긍정적인 생활을 할 수 있도록 도와주는 Application 입니다.

다시 간략하게 Application 을 소개하였으니 이제 기본 UI Design Figma 구현을 진행해보도록 하겠습니다.

MainPage Design

현재까지 Design 된 MainPage 는 다음과 같습니다.

현재까지 Banner Design 이 간략하게 만들어졌고, 상단 Title 까지 구현이 완료되었습니다. 추후 Design 에서는 Profile Image Design 을 Title 오른쪽에 배치할 계획입니다.

이제 Banner Design 작업을 이어 나가도록 하겠습니다.

출처 : https://kittencats.web.app/noice-meme-gif.html

Banner Image Design

우선 가장 먼저 시작해야 할 Banner Design 에 Image 를 넣는 작업입니다.

Banner Design 은 하단의 이미지와 같이 구성되고, Banner Title 과 Simple Explanation of Contents Text 를 포함하고 있는 Rectangle 도형에 Image 를 넣어보는 작업을 진행해보겠습니다.

하단 Image 는 현재 Design 할 Banner Design 의 뼈대 Design 입니다.

우선 Image 를 하나 가지고 오겠습니다.

이 Image 의 이름은 우울해 보이는 사람으로 부르도록 하겠습니다.

내부 이미지 출처 : https://www.meme-arsenal.com/en/create/template/2026263

화면 좌측 상단에서 직사각형 모양의 Icon 을 Click 후, Place image 를 선택합니다.

이때 Image 를 Click 한 상태에서 Image 를 클릭하는 것이 아닌 Image 를 넣고자 하는 도형을 선택한 상태에서 직사각형 (도형) Icon 을 클릭합니다.

그런데 문제가 있습니다. 다음과 같이 Image 만 덩그러니 각각의 Object 형태로 불러오게 된다면 Image 를 도형 안으로 Import 를 할 수 없는 문제가 발생합니다. Figma 상에서는 같은 Layout 에 존재하는 서로 다른 Layout 이라고 인식하기 때문이죠.

이 문제가 발생하게 하지 않기 위해선 Image 를 불러오기 바로 전으로 돌아가야 합니다.

먼저 기존에 존재했던 Image 를 지웁니다.

그 다음 Image 를 다운로드 받았던 곳으로 다시 들어가 Image 를 Download 받습니다.

저는 하단의 WebSite 에서 Image 를 Download 받았습니다.

https://www.meme-arsenal.com/en/create/template/2026263

Create meme "Male , people thought, pensive man" - Pictures - Meme-arsenal.com

Download 받은 Image 를 다음과 같은 File Directory 에 저장하였습니다.

다시 화면 좌측 상단에서 직사각형 모양의 Icon 을 Click 후, Place image 를 선택합니다.

이때 Image 를 Click 한 상태에서 Image 를 클릭하는 것이 아닌 Image 를 넣고자 하는 도형을 선택한 상태에서 직사각형 (도형) Icon 을 클릭합니다.

원하는 Image 를 선택합니다.

Image 를 선택하게 되면 마우스 Cursor 에 Image 가 나오고, 화면 상단이 하단의 Image 처럼 표시됩니다.

다음과 같이 Image 가 도형 안에 들어가 있는 것을 확인할 수 있습니다.

드디어 Image 넣는 과정까지 모두 마쳤습니다.

출처 : https://memegenerator.net/instance/41962691/anchorman-hooray-hooray

원래는 도형 안에 Image 넣는 과정을 진행 후, 하단 Menu 구성과 Footer 구성을 하려고 하였으나, 뒤에 어떤 식으로 내용을 적야할지 감이 잡히질 않아서 여기까지 진행하겠습니다.

마치 하단의 Image 에 나오는 남자처럼 저도 정신이 어지러운 것 같습니다ㅋㅋㅋㅋ

출처 : https://www.memedroid.com/memes/detail/2812128/haha-wohHa-me-dizzy

다음 시간에는 더 재밌고 유익하게 구성하겠다는 말씀을 드리고, 현재 내용에 이어서 하단 MenuList 와 Footer Design 과정을 진행하도록 하겠습니다.

감사합니다!!!