[Happy-Drip] 7일차 - Footer Menu 구성해보기

[김건우]

안녕하세요.

오늘은 한 번 Footer Menu 를 구성해보는 시간을 가져보도록 하겠습니다.

출처 : https://makeameme.org/meme/hooray-667217d5e0

그동안 정보처리산업기사 시험 준비, 그리고 회사 일들이 최근 들어 너무 많아져서 못하고 있었는데, 오늘은 본격적으로 진행해보도록 하겠습니다.

Figma Design 기초 - [Season 4]

우선 현재까지 진행한 Design 입니다.

제가 사용하고 있는 Design Tool 은 Figma 입니다. 이 Figma 를 통해서 다양한 MockUp Design 과 간략한 Prototype 까지 구성할 수 있다는 장점을 가지고 있습니다.

오늘은 한 번 다음 화면과 같이 Footer 화면을 꾸며보는 시간을 가져보고, Footer 안에 Home Button 을 제외한 나머지 Button 들은 추후 시간을 따로 내어 진행하겠습니다.

자 시작하겠습니다~!

출처 : https://www.usameme.com/lets-go-meme/

Footer Design - Footer Menu 만들기

현재 Design 은 다음과 같이 구성되어있습니다.

무언가 빠져있는 느낌이 들어서 한산하다는 느낌이 드시죠?ㅋㅋㅋㅋ

좌측 상단에 있는 도형 모양 아이콘에 마우스를 갖다대거나 클릭합니다.

그 다음, 클릭하여 Rectangle 메뉴를 선택합니다.

Rectangle 메뉴를 선택 후, Drag 를 진행하면 마우스 커서 기호가 `+` 로 나타나는데, 이걸 활용하여 원하는 곳을 지정하여 Drag 해줍니다.

도형 Size 와 위치를 지정하면 하단 Design 처럼 나오는 것을 확인하실 수 있습니다.

여기서 색깔을 바꾸고 싶다면 우측 Menu Bar -> Design Tab 의 Fill 에 들어갑니다.

색을 수정하려고 할 때, 다음과 같이 Fill 안에 있었던 RGB Color 와 Opacity 값이 바뀌는 것을 확인하실 수 있습니다.

RGB Color 가 나온 곳을 선택한다면 다음과 같이 RGB Color 값을 입력하거나 아니면 마우스 드래그로 지정할 수 있는 조그마한 창이 나옵니다.

또한 여기서 Color Transparency (Opacity), 그리고 원하는 색상 Bar 도 지정할 수 있으니 참고하세요.

저는 하단의 Image 와 같이 Color 를 설정하도록 하겠습니다.

CSS 기준으로 rgba 값은 (227, 175, 197, 0.68) 입니다.

이번엔 모서리가 둥근 직사각형을 만들어보겠습니다.

직사각형의 모든 모서리를 둥글게 만드는 기능입니다.

만약 모든 모서리가 아니라 특정 모서리에만 지정하고 싶다면 아래 Image 와 같이 구성하시면 됩니다.

전 좌측 상단 모서리와 우측 상단 모서리에 각각 30씩 Round-Corner 값을 주었습니다.

일단 Footer 모서리가 Round-Corner 형태로 잡혔군요. 정말 좋습니다. 좀 더 자연스러워 보이군요.

이제 다시 좀 더 집중해주세요!! 정말 중요한 내용이 나옵니다.

바로바로 홈 Button 에 관한 내용이 나오기 때문이죠

출처 : https://tenor.com/search/wake-up-meme-gifs

Footer Design - Flutter Home Button 만들기

이번에는 Home Button 을 만들어 보겠습니다.

위에서 직사각형 도형을 만들었을 때처럼 같은 방법으로 Ellipse 를 선택합니다.

정상적으로 도형이 만들어졌습니다.

마찬가지로 도형 색상을 해줍니다.

그리고 도형이 약간 찌그러진 모양보다 정원형태로 만드는게 더 자연스러우니, 한 번 수정해보겠습니다.

Footer Menu 를 만들었을 때와 달리, 더 간단하고 빠르게 진행해보겠습니다.

상단의 Image 와 같이 Width, Height 그리고 Fill 값을 설정해주었습니다.

이제 여기 정원에 Image 를 넣어보도록 하겠습니다.

우측 상단의 직사각형 모양 도형 클릭 후, Place image 메뉴를 선택합니다.

전 이 Image 를 선택하도록 하겠습니다.

이제 Image 를 넣을 도형을 선택해주고, 결과를 살펴보면

짜잔~! 다음과 같이 잘 나오는 것을 보실 수 있습니다.

오늘은 여기까지 진행하도록 하겠습니다.

감사합니다!!!