피그마 2일차 - 에디터를 활용한 카드 UI 만들어보기

안녕하세요 시란입니다. 

 

이번시간에는 앞서 배운 에디터를 이용해서 카드UI를 만들어보겠습니다. 

 

우리가 직장에서 일하다보면 카드뉴스라던지 카드콘텐츠들을 많이 보거나 받아보셨을꺼에요

 

이번시간에는 에디터를 활용해서 웹사이트에서 볼법한 콘텐츠 카드를 한번 만들어보겠습니다. 

 

먼저 pixabay를 통해서 무료사진을 하나 가져왔습니다. 

이 사진을 가져올 프레임을 먼저 만들어야겠죠?

 

프레임 크기는 240 x 400으로 만들어줍니다. 

오른쪽에 W와 H값을 변경하면 240x 400 사이즈로 제작 가능하겠죠?

카드의 배경이 될 프레임의 색상은 FFFFFF로 고정합니다. 오른쪽 메뉴중 FILL부분을 수정하면 되겠죠?

 

그리고 카드 이미지의 모서리를 둥글게 만들어주겠습니다. 

마찬가지로 오른쪽 메뉴에서 아래와 같이 라운드 입력란을 찾아 10을 입력해줍니다.

 

그다음은 효과를 추가하겠습니다. 

카드에 그림자를 조금 줌으로써 배경과 구분되도록 하겠습니다. 

이펙트에 + 아이콘을 눌러 이펙트를 생성한 후 햇빛 아이콘을 클릭해 수치를 조절해봅시다.

 

그럼 이렇게 카드 프레임이 완성되었습니다. 

 

이제 적당한 이미지를 추가해봅시다. 저는 위에서 가져온 향수 이미지를 사용해보겠습니다. 

아래와 같이 다각형 메뉴에서 place image버튼을 클릭합니다. 

그냥 이미지를 가져오게 되면 이렇게 되요.

카드 프레임 크기를 넘쳐버리기 때문에 크기를 240x240으로 조절해줍니다. 

 

이제 텍스트 정보를 입력해보겠습니다. 

툴바에서 텍스트를 선택한다음 입력하시면 됩니다. 

텍스트 크기와 서체는 센스껏 정하시면 됩니다. 저는 noto sans체를 사용하도록 하겠습니다.

텍스트 서체 변경은 마찬가지로 오른쪽에서 설정하시면 되겠죠?

 

자, 중간 결과물입니다. 

참고로 각각 글자크기는 12, 13, 15입니다. 글씨체는 noto sans kr입니다.

그 다음은 라인을 만들어보겠습니다. 툴바에서 라인을 선택해주며, 200px 길이로 색상은 EFEFEF로 설정해줍니다.  

 

그리고 마지막으로 아래 1인 35000원 을 입력한 후 아래와 같이 완성시켜줍니다. 

텍스트 입력 부분은 완료되었습니다. 

이제는 아이콘들을 한번 입력해보겠습니다. 

 

원데이 클래스 예시를 보면 아이콘들이 보일꺼에요.

위의 사진처럼 별모양과 하트모양을 한번 직접 만들어보도록 하겠습니다. 

물론, 해당 아이콘이나 그림을 퍼와도 되지만 한번 툴을 사용해보고자 하는 생각으로 따라와주시면 될것같습니다. 

 

먼저 작업을 할 공간을 추가해보겠습니다.  왼쪽 메뉴 pages에서 +버튼을 클릭합니다. 

 

이렇게 하면 새로운 작업공간이 생기게 됩니다. 

처음 했던거와 마찬가지로 프레임을 추가해줍니다. 임시로 쓸 공간이기 때문에 크기는 자유입니다. 

 

다행히 별모양의 경우는 기본적으로 제공해주네요. 한번 생성해볼까요? 툴바에서 도형쪽에서 별모양을 클릭합니다. 

 

이때 마우스 드래그 드롭을 할때 시프트 버튼을 누른다면 일정한 크기의 별모양을 만들수 있습니다. 

여기서 조금 더 부드러운 별모양을 만들려면 radius를 주는 방법이 있습니다. 

아래와 같이 별모양을 선택 한 후 보이는 작은 동그라미 중 맨 위에 있는 동그라미를 드래그 해서 적당히 radius 값을 조절해줍니다. 

 

그런다음 색상을 변경해줍니다.  지금까지 배운대로 FILL 항목에서 변경해주시면 되겠습니다. 

그럼 별모양은 일단 완성.

다음은 하트를 만들어보겠습니다. 

 

먼저 사각형을 만든후 90도 회전을 해줍니다. 

 

여기서 도형을 더블클릭해보면 아래와 같이 변합니다. 이건 펜툴 편집모드입니다.
이 모드에서 도형의 편집점을 추가하거나 제거하고, 선을 조절할 수 있습니다. 

 

이상태에서는 툴바 메뉴도 변경이 됩니다. 여기서 아래의 Bend tool을 선택해줍니다. 

bend tool은 직선을 곡선으로 변경해주는 툴입니다. 

 

아래 그림처럼 꼭지점에 클릭해봅니다. 

 

결과는 짜잔 곡선으로 변합니다. 

마찬가지로 반대쪽도 곡선으로 변경해줍니다. 

그리고 위쪽 선을 클릭한후 드래그 앤 드롭으로 아래쪽으로 내려줍니다. 도토리 모양을 만들어줍시다.

 

 

조금 하트모양 같아졌나요? 

이제 위쪽 꼭지점에도 곡률을 줘보겠습니다. 

 

그리고 나서 한쪽선을 alt키를 누른상태로 위쪽으로 드래그 해줍니다. 

alt 키를 눌렀을때와 안눌렀을때의 차이는 

눌렀을때는 한쪽 곡선만 내가 원하는대로 조절할 수 있게 되며,

안누른 경우 한쪽의 곡선을 올리게 되면 반대쪽은 낮아지게 됩니다. 

이렇게 곡률 선을 올려줘서 도톰한 하트 윗부분을 완성 시킨후, 

반대쪽도 마찬가지로 alt키를 눌러 도톰한 하트 모양을 만들어줍니다. 

 

 

이제 색상까지 빨간색으로 변경해준다면?

자 완성되었습니다. !

 

완성된 하트의 크기를 적당히 조절해줍니다. 

참고로 하트 바깥쪽으로 마우스를 옮긴 후 더블클릭하면 펜툴 편집모드를 나올 수 있습니다. 

그리고 다시 하트를 선택하면 크기를 변경할 수 있습니다. 

 

이렇게 완성된 하트와 별을 page1 작업공간으로 복사해서 적당한 크기로 조절한 후 붙여넣기 해주면 됩니다. 

ctrl c, ctrl v 로 복사 붙여넣기 하는건 알고 계시죠? ^^;;

이렇게 하트와 별도 만들어 봄으로써 향수 원데이 클래스를 완성해 보았습니다. 

여기서 좀더 꾸며보실 분은 꾸며보셔도 좋을꺼같네요.

지금까지 긴 글 봐주셔서 감사합니다. 

다음번에도 좋은 피그마 글로 찾아뵙겠습니다.