본문 바로가기

728x90
반응형

전체 글

피그마 체크박스(checkbox) 컴포넌트 쉽게 만드는 방법(feat.PPT와 무엇이 다를까?) 현직 기획자가 만드는 쉬운 컴포넌트 PPT로 체크박스를 만드는 방법은 정말 간단합니다. 체크박스 기능은 유저의 검색폭을 넓히기 위해서 다양한 조건으로 검색할 수 있게 도와주는 기능인데, 라디오 버튼과는 달리 체크박스는 2개 이상 중복적으로 적용이 가능하다는 점에 있어서 라디오 버튼과는 다릅니다. 하단에 보이는 그림은 PPT의 checkbox 표현인데, 참 쉽죠? 그렇다면, 피그마는 어떻게 생겼을까요? 하단에 보이는 그림은 피그마로 체크박스를 만든 것인데, 당연 다르죠? 피그마는 프로토타입을 위해 만든 것이라고 보시면 더욱더 편하겠습니다. 피그마로 체크박스(checkbox) 만드는 방법 1. 체크박스 만들기 텍스트 및 네모박스 만들기 글씨체 : Medium 글씨크기 : 18 네모박스 크기 : 20x20(Radius 3, stroke 2, f.. 더보기
전세계는 왜 후쿠시마 원전 오염수 방류에 반대하는가?(일본이 오염수를 배출하려는 진짜 이유, 우리가 무조건 막아햐하는 이유) 연일 여론은 물론 유튜브, 매체 등에서 후쿠시마 오염수 방류에 대해서 엄청난 목소리를 내고 있다. 반대하는 입장과 찬성하는 입장, 중립적인 입장이 있다. 3가지 의견 모두 일리가 있다고 본다. 다만, 나는 한국인으로서 후쿠시마 오염수를 반대하는 이유는 무엇이고, 찬성하는 이유는 무엇인지 고민해 보고 과연 이게 맞는지 검토해서 우리 인류에 피해가 없는지 고민해 볼 필요가 있다고 생각한다. 또한, 마지막으로 일본의 국제사회에 오염수 방류에 어떤 목소리로 세계를 설득하고 있을까? 그리고 역시 난 서민이니깐 오염수 방류를 통해 이득을 보는 산업은 무엇이고 어떤 주식을 사야 할지 고민해 볼 수 있지 않을까 생각한다. 일본의 후쿠시마 원전 오염수를 방출하려는 진짜 이유? 일단, 일본의 후쿠시마 오염수를 방류하는 이.. 더보기
[피그마 중급 강의 9강] PPT와 다른 Figma의 강력한 프로토타입 기능 이미지 캐러셀 슬라이드(image carousel slider) 아직도 ppt로 작업하나요? 오늘은 이미지 캐러셀에 대해서 배워 볼 건데요. 이미지 캐러셀 슬라이드가 무엇인지 먼저 알아보겠습니다. 이미지 캐러셀 슬라이드는 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법입니다. ppt로는 슬라이드 작동하는 것을 보기 쉽지 않아서 이커머스에서도 이와 같은 이미지 캐러셀을 사용하고 있습니다. 모든 것은 응용하고 예쁘게 디자인을 하는 것에 있습니다. 하는 방법만 익히면 그다음부터는 UI/UX 설계하면서 예쁘게 만들어보세요! 이미지 캐러셀 슬라이드 만드는 방법 1. 이미지 5개를 준비하고 frame은 아이폰 13 pro로 준비합니다. 이미지를 정중앙에 배치하고 여러분들이 원하는 크기를 배치합니다. 여기에서 중요한 점은 양옆에 이제 작은 그림들이 들어갈 것이기에 레이아.. 더보기
[피그마 중급 7강] 툴팁(느낌표/물을표) 컴포넌트 UI/UX(ToolTIP) PPT와는 전혀 다른 툴팁(tooltip) 비교(프로토타입 구현) PPT에서 굉장히 쉽게 그렸던 툴팁이 피그마로 넘어가면서 조금 간단하지 않게 되었습니다. 그렇지만 유저가 무엇인지 궁금해할 때 꼭 필요한 기능인 툴팁 기능에 대해서 배워보겠습니다. 사실상 웹사이트에서 무언가 정보에 대해서 알고 싶을 때 이러한 기능을 많이 사용하는데요. 쉽고 빠르게 아래 글을 따라오시면 되겠습니다. 툴팁(TOOLTIP) 간단하니 따라와 주세요! 1. 텍스트 입력 + 텍스트 굵기 텍스트 입력 : Sample text field 글씨 굵기 : semi bold 2. 오토레이아웃 ▶ 수평 padding ▶수직 padding ▶도형 색상(감도 설정) ▶ 도형 테두리 설정 ▶ 텍스트 색상 설정 수평 padding : 20 수직 padding : 20 도형 색상 : 검은색(투명도 60%) 도형 테두.. 더보기
[데이터 분석 준전문가_1강] 데이터의 이해 데이터란 무엇일까? 그리고 그 데이터는 지식과 어떤 관계가 있을까? 마지막으로 데이터를 어떻게 다룰까? 오늘은 이 부분에 대해서 설명해 보도록 하겠습니다. 데이터란?(Data) 데이터라는 용어는 1646년 영국 문헌에 처음 등장하여 Dare(주다)의 과거분사형으로 ‘주어진 것‘이란 의미로 사용되었습니다. 1940년대 이후 컴퓨터 시대 시작과 함께 자연과학뿐만 아니라 경영학 통계학 등 다양한 사회 과학이 발전하면서, 데이터의 의미는 과거의 관념적이고 추상적인 개념에서 기술적이고 사실적인 의미로 변화하게 되었다. 데이터는 존재적 특징과 당위적 특징으로 나뉘는데, 존재적 특징은 객관적 사실, 당위적 특성은 추론, 예측, 전망, 추정을 위한 근거로 사용된다. 데이터는 지식경영의 핵심 이슈인 암묵지와 형식지의 상.. 더보기
[피그마 중급 1강] 라디오 버튼(Radio Button) 만들기<피그마의 프로토타입 만들기, PPT와 다른 기능> UI/UX에서 Componet는 반복적으로 사용되는 typography(표현) + color + 도형으로 구성된 UI 요소를 말합니다. 이제 컴포넌트를 활용하여 라디오 버튼을 만들어보겠습니다. 라디오버튼(Radio Button) 만들기(초중급!) 넓이 16, 높이 16인 네모박스를 만들어 줍니다. 그리고 16X16 네모박스를 ALT를 눌러 새로운 네모를 하나 더 만들어 줍니다. 복사한 네모박스를 넓이와 높이를 8X8 크기의 네모박스로 변환한 후 레디우스(모서리)를 30을 입력합니다. 원의 색깔을 검은색으로 바꿉니다. 그리고 처음에 만들었던 네모를 테두리를 검은색으로 변환하고 모서리를 100으로 맞춥니다. 스트로코를 준 동그라미 원의 색깔을 흰색으로 바꿉니다. 그리고 두 개의 원을 겹칩니다. 겹치고 디자인.. 더보기
[피그마 기초 5강]오토레이아웃(Autolayout)기능 활용하는 방법 피그마의 파워풀한 기능은 오토레이아웃에 있습니다. 사실 오토레이아웃을 완벽하게 마스터하면 어느정도 모든 기능에 대해서 거의 다 활용할 수 있습니다. 드롭박스를 만든다던가, 라디오 버튼을 만든다던가 등 컴포넌트를 만들 때 활용되며 이 기능은 피그마의 핵심 기능이라 반드시 알고 마스터해야 합니다. Autolayout 완벽하게 한번에 정리하기! 이제 프레임을 생성하고 그 위에 버튼을 생성하는 것을 해보겠습니다. 이제 슬슬 기초 영역에서 조금 응용 단계로 넘어가 보겠습니다. 1. 오토레이아웃 기능을 활용하기 위해서 버튼을 만들어 보겠습니다. 텍스트를 클릭해서 버튼이라는 글씨를 프레임 위에 써줍니다. 2. 생성된 텍스트에 로 오토레이아웃으로 전환해줍니다. 구별하기 힘드니깐 윤곽선(stroke) 을 줍니다. 3. .. 더보기
[피그마 기초 4강] Constraint 기능 알아보기(PPT와 다른 피그마의 파워풀한 기능) Constraints는 제약이라는 단어로 피그마에서 알면 유용한 기능 중 하나라고 생각하시면 되겠습니다. constraint 기능은 프레임 위에서 에 대한 기능입니다. 여기 보면서 하는 게 더 쉽겠죠? 그림을 보면서 설명하겠습니다. Contsraints 기능 우측 패널 이용하기 오브젝트를 클릭하고 우측 패널을 확인하면 Constraints라고 있습니다. 그리고 초기 값이 설정되어 있죠. 이번엔 이 기능에 대해서 살펴보는 시간을 가져보겠습니다. 하나씩 사용하는 방법에 대해서 살펴 보겠습니다! 1. Left/right 우측 패널을 해당과 같이 고정하고 컨트롤을 클릭하고 해당 프레임을 누르고 프레임을 늘리게 되면 다음과 같이 왼쪽 상단과 위쪽에 오브젝트가 고정되고 프레임만 증가하는 것을 보실 수 있습니다. 이.. 더보기

728x90
반응형