안녕하세요. 저번 시간에는 도형 box 안에 Image 를 넣는 법을 진행하였습니다.
저번 시간에 작성했던 글을 너무 아쉽게 중간에 끊은 것 같은 느낌이 들어서 오늘 안에는 반드시 Image 넣는 것을 넘어서 현재 작업 중인 Page Design 을 마쳐보는 시도를 하려고 합니다.
그럼 오늘도 재밌고 유익한 하루가 될 수 있도록 기본 UI Design Figma [Season 3] 편을 작성하도록 하겠습니다.
Figma 기초 익히기 - Season 3
어제 진행했었던 Figma 기초 익히기 - Season 2 에서는 도형 (직사각형) 안에 Image 를 넣는 법에 대해 알아보는 시간을 가져보았습니다. 오늘은 어제와 다르게 하단 Menu 와 Footer 를 구성해보도록 하겠습니다.
하단 Menu 와 Footer
오늘 진행할 부분은 빨간색 직사각형 테두리로 표시하였습니다.
간단하더라도 일단 이 Design 은 계속 진행하면서 Upgrade 해 나갈 생각이므로, 자세한 Design 에도 일단 초기 Design 을 빨리 입혀보도록 하겠습니다.
하단 Menu
하단 Menu 를 구성하기에 앞서, 우선 하단 Menu Title 을 만들어주도록 하겠습니다.
하단 Menu Title 은 List of Menu 라고 지정하겠습니다.
하단 Menu Title 의 Design 은 Semi Bold, 그리고 글꼴은 25pt 로 설정하였습니다.
하단의 Image 처럼 Design 이 수정되었습니다.
이제 이 Text 를 마우스를 활용하여 위치를 좀 더 위쪽으로 옮겨주도록 하겠습니다.
하단 Menu 구성안
여기서부터 List Of Menu 를 구성하는데 있어 조금 고민을 했습니다.
두 가지 안을 한꺼번에 보여드리겠습니다.
왼쪽 -> 가로형 배치 오른쪽 -> 세로형 배치
List of Menu 각각의 Design 들을 구성해보았습니다.
제가 오른쪽 Image 와 같이 세로형 배치를 이미 진행을 해 본 경험이 있었으므로, 이번에는 왼쪽 가로형 배치를 활용하여 List of Menu ListView 를 한 번 구현해보도록 하겠습니다.
우선 가로로 Scroll 하여 Menu 를 볼 수 있도록 구현해보았습니다.
오른쪽 끝까지 ListView 를 Scroll 시 화면에 어떻게 나오는지 보여드리도록 하겠습니다.
그 전에 현재 작업 중인 Layout 을 Ctrl + C, Ctrl + V 를 눌러 보여드리도록 하겠습니다.
화면을 복사하면 다음과 같이 두 Page 가 나옵니다.
그리고 하단에 있는 List of Menu 의 ListView 를 수정합니다.
어떤가요? 좀 더 깔끔해지고 두근거리지(?) 않나요??
일단 현재 작업하고 있는 Page 서 조금만 더 손을 보도록 합시다.
이제 우리가 여때껏 만들어 놓은 List of Menu 의 ListView 안을 간략하게 Design 을 해보겠습니다.
정들었던 UI 를 지우기 전, 그들의 Width 와 Height 를 기억합시다.
(다 같이 X 를 눌러 조의를...)
간격도 기억합시다.
가로 간격은 19pt 입니다.
다시 예전 모습으로 돌아왔습니다.
이제 ListView 내부에 본격적으로 Design 을 채워넣어보도록 하겠습니다.
ListView 의 색상과 Font-Weight, 그리고 Font Size 를 지정합니다.
Font-Weight 는 Semi-Bold, 그리고 Font-Size 는 18pt 로 설정하였습니다.
ListView 의 색상은 C0BFDC 로 지정하였습니다.
왼쪽 이미지 -> ListView Design 된 모습 오른쪽 이미지 -> ListView Design Background Color
원 모양으로 나온 Icon 을 잡고 도형 안쪽으로 끌고 갑니다.
끌고 가면 하단의 Image 와 같이 모서리가 둥근 직사각형이 되어 있는 것을 볼 수 있습니다.
이제 Image 를 넣을 차례입니다.
Image 넣는 방법은 이전의 Season2 를 참고해보시면 좋을 것 같습니다.
https://cafe.daum.net/vincentarnold/siqS/30
우선 Image 를 하나 Googling 해서 Exercise 와 관련된 Image 를 하나 찾아 저장합니다.
그 다음 선택한 도형에서 Place Image 를 선택합니다.
방금 저장한 WorkOut.jpg 를 가지고 옵니다.
하단의 ListView 와 같이 Image 가 잘 들어온 것을 확인할 수 있습니다.
그러나 Exercise 글자가 잘 보이지 않으니, Font Color 을 검정 계열에서 흰색 계열로 바꾸도록 하겠습니다.
왼쪽 Image -> Font Color 흰색 적용 안된 상태 오른쪽 Image -> Font Color 흰색 적용 된 상태
이제 드디어 ListView 에 Image 를 적용하였습니다.
ListView 에 Frame 적용
더욱 더 효과적으로 방금 만든 ListView 를 사용하기 위해 Figma 의 Frame 을 활용하여 ListView 안에 있는 Text 와 Image 를 하나의 Group 으로 움직일 수 있도록 설정할 수 있습니다.
우선 상단 Bar 에서 Frame 을 클릭합니다.
클릭 후, 원하는 Size 만큼 Frame 크기를 List of Menu ListView 에 딱 맞추도록 합시다.
하단의 Image 처럼 성공적으로 Frame 이 만들어졌습니다.
이제 이 Frame 들을 Ctrl + C & Ctrl + V 하도록 하겠습니다.
ListView Image 및 Text 수정
이제 각 ListView 에 알맞는 Image 와 Text 를 집어넣도록 하겠습니다.
좌측 Frame 2 의 Rectangle 3 를 선택해줍니다.
선택 후, Image 를 선택합니다.
정상적으로 Image 가 바뀐 것을 확인할 수 있습니다.
하단 Image 와 같이 Exercise 에서 Text 를 Double Click 한 후, Text 를 수정합시다.
Exercise 에서 Book 으로 수정합니다.
드디어 수정이 완료되었습니다!!
이 기세를 몰아 옆에 있는 ListView 까지 수정해보도록 하겠습니다.
그리고 옆에 나와있는 UI 안내도표의 Text 이름과 Frame 이름들도 함께 수정하도록 하겠습니다.
하단의 Image 와 같이 완성되었습니다