본문 바로가기

디자인20

config 2023 피그마 변수를 활용하여 라이트/다크 모드 설정하기 이번 포스팅에서는 피그마 변수를 활용하여 라이트/다크 모드 색상을 적용하는 방법에 대해서 소개하려고 한다. 임의로 라이트/다크 모드의 색상 팔레트를 준비해보았다. 피그마 변수가 무엇인지 알고 싶은 분들은 아래 링크 클릭 ▼▼▼ 2023.06.22 - [디자인/Figma] - config 2023 variables 디자인 변수 종류, 생성, 관리하기(number/color) config 2023 variables 디자인 변수 종류, 생성, 관리하기(number/color) 피그마의 디자인 변수는 모든 종류의 디자인 속성(채우기 색상, 패딩 등)과 프로토타이핑 작업에 적용할 수 있는 재사용 값을 저장한다. 변수는 스타일 및 구성 요소와 마찬가지로 팀 라이브러 heinafantasy.com 라이트/다크 모드 .. 2023. 6. 22.
config 2023 variables 디자인 변수 종류, 생성, 관리하기(number/color) 피그마의 디자인 변수는 모든 종류의 디자인 속성(채우기 색상, 패딩 등)과 프로토타이핑 작업에 적용할 수 있는 재사용 값을 저장한다. 변수는 스타일 및 구성 요소와 마찬가지로 팀 라이브러리에 게시할 수 있다. 피그마 변수의 종류 변수는 아래의 4가지 종류로 나눌 수 있다 변수 타입 유형 정의 적용 가능 범위 Color 단색 채우기 - 채우기 색상(fill colors) - 획 색상(stroke colors) Number 숫자 값 - 텍스트 레이어(text layers) - 모서리 반경(corner radius) - 최소 너비/높이(minimum width/height) - 최대 너비/높이(maximum width/height) - 패딩 및 간격(padding, gap getween) String 텍스트 .. 2023. 6. 22.
피그마 프로토타입 예제 - 슬라이드 배너 만들기(캐러셀 인터랙티브 컴포넌트) 드래그하면 옆으로 넘어가는 슬라이드 배너는 홈페이지의 메인에서 흔히 볼 수 있는 UI 이다. 이렇게 슬라이드 형태로 넘기는 UI를 캐러셀이라고 부른다. 이번 포스팅에서는 피그마로 캐러셀 배너 프로토타입 만드는 방법에 대해서 소개하려고 한다. 슬라이드 배너 프로토타입 만들기 먼저 피그마 파일을 하나 생성해서, 아래와 같은 구조의 디자인 시안을 만든다. 각 슬라이드가 보여지는 화면을 각각의 프레임으로 나누어 제작해야 한다. 디자인 요소들을 모두 만들었다면 첫번째 배너 이미지를 선택하고, 두번째 프레임으로 드래그한다. 인터렉션 디테일은 On drag, Smart animate, Ease in and out으로 지정한다. 애니메이션 속도는 300~500을 추천하는데, 본인 취향에 맞게 설정해 주면 된다. 나머지.. 2023. 3. 10.
UX / UI 개념과 차이점에 대해서 알아보자! UX와 UI의 차이점은 무엇인가요? UX(User Experience)는 사용자가 응용 프로그램, 웹 사이트 또는 제품을 사용할 때의 경험을 의미한다. 이는 사용자 입장에서 제품을 이해하고 사용할 수 있는 쉬운 방법을 제공하는 것을 포함하고 있다. 그리고 UI(User Interface)는 사용자와 제품이 상호 작용하는 방법을 의미한다. 이는 사용자가 제품을 제어하고 정보를 얻는 데 사용하는 버튼, 메뉴, 입력 상자 등의 인터페이스를 포함한다. 따라서 UX는 제품을 사용하는 경험을 설계하는 것이고, UI는 사용자와 제품이 상호 작용하는 방법을 설계하는 것이다. UX 디자이너가 하는 일은? UX(User Experience) 디자이너는 사용자가 제품을 사용할 때의 경험을 설계하는 일을 한다. 이를 위해 다.. 2023. 1. 21.
피그마로 글래스모피즘 스타일의 오브젝트 만들기 지난 포스팅에서 클레이모피즘 스타일의 버튼을 만드는 방법에 대해서 알아보았다. (궁금하면 아래 링크 클릭!) 2023.01.17 - [디자인/Figma] - 피그마로 클레이모피즘 스타일의 버튼 만들기 피그마로 클레이모피즘 스타일의 버튼 만들기 대상을 원래 모습 그대로 사실적으로 표현하는 디지털 기법인 스큐어모피즘이 있다. 스큐어모피즘은 느린 작업속도와 섬세한 디자인에서 나오는 사용자 집중력 저하의 단점을 가지고 있었는데 heinafantasy.com 이번 포스팅에서는 피그마로 글래스모피즘 스타일의 오브젝트를 만드는 방법에 대해서 설명하려고 한다. 글래스모피즘이란? 글래스모피즘(glassmorphism)이란, 반투명 재질을 사용하여 오브젝트 간의 시각적 계층을 표현한 그래픽 스타일이다. 반투명한 유리를 댄.. 2023. 1. 17.
피그마로 클레이모피즘 스타일의 버튼 만들기 대상을 원래 모습 그대로 사실적으로 표현하는 디지털 기법인 스큐어모피즘이 있다. 스큐어모피즘은 느린 작업속도와 섬세한 디자인에서 나오는 사용자 집중력 저하의 단점을 가지고 있었는데, 이것을 보완한 것이 뉴모피즘이다. 뉴모피즘은 미니멀리즘을 계승한 디자인으로 심플한 그래픽에 그림자를 두어 입체적으로 표현한 것이 특징이다. 그리고 뉴모피즘에 이어 클레이모피즘이 2023 UX/UI 디자인 트렌드로 선정되었다. 클레이모피즘(Claymorphism)은 내외부 그림자의 조합으로 부드럽고 푹신한 느낌을 주는 그래픽 스타일이다. 흡사 점토로 만든 3D 모형 같아 보이기도 한다. 글래스모피즘과의 궁합도 나쁘지 않아 함께 사용하면 새롭고 신선한 결과물을 얻을 수 있다. 나도 3D 프로그램을 사용해서 클레이모피즘을 만들어보.. 2023. 1. 17.
키보드 레이아웃 선택 - 한글 키보드 단축키 매핑(피그마 업데이트) 피그마가 업데이트 되며 키보드 레이아웃을 선택할 수 있게 되었는데, 그 중에 한글 키보드 단축키 매핑이 가능해졌다고 해서 시도해보았다. 키보드 레이아웃 선택 기존 피그마(figma)의 기본 단축키는 US QWERTY 키보드의 레이아웃을 기반으로 하고 있다. 그런데 이러한 단축키의 일부 키는 다른 언어나 레이아웃에서는 사용할 수 없다. 때문에 기본 설정에서 키보드 레이아웃을 업데이트한 후에 해당 레이아웃에 매핑된 단축키에 엑세스할 수 있게 하였다. 키보드 레이아웃 선택은 한국어 외에도 중국어(병음), 덴마크어, 핀란드어, 프랑스어, 독일어, 이탈리아어, 일본어, 노르웨이어, 스페인어, 스웨덴어 등을 지원한다. 한국어 키보드 레이아웃 선택 방법 한국어 키보드 레이아웃을 선택하는 방법은 아래와 같다. 피그마 .. 2022. 11. 16.
macOS 어도비 포토샵 한글 버전 → 영문 버전으로 바꾸기 회사에서 사용하는 맥북에 어도비 프로그램을 설치했는데 이런... 언어 선택을 하지 않았더니 한글 버전이 설치되었다. (나는 영문 버전이 훨씬 더 익숙한데...ㅠㅠ) 프로그램을 제거하고 다시 설치하는 방법도 있겠지만, 파일 하나를 찾아서 이름을 변경하면 포토샵 한글 버전을 영문 버전으로 순식간에 바꿀 수 있다. 이번 포스팅에서는 어도비 포토샵 언어 설정을 변경하는 방법을 소개하려고 한다. 이동 경로는 '응용 프로그램 > Adobe Photoshop 2022 > Locales > ko_KR > Support Files > tw10428_Photoshop_ko_KR.dat' 이다. 파일을 찾았다면 마우스 오른쪽 버튼을 눌러 '이름 변경(혹은 Rename)'을 선택한다. 파일명에서 KR 부분을 original로.. 2022. 9. 5.
피그마(figma) 다각형 그리기 피그마(figma)에서 다각형을 그리는 방법에 대해서 포스팅하려고 한다. 먼저 피그마의 디자인 파일을 열고 도형 > Polygon을 선택한다. 크기는 나중에 조정해주면 되니까 적당히 위치를 잡아서 마우스로 드래그 한다. 삼각형이 그려진 것을 확인할 수 있다. 이 때 쉬프트(shift) 키를 누른 채로 드래그하면 정삼각형을 그릴 수 있다. 만약 그리고 싶은 것이 정다각형이라면 처음부터 정삼각형을 그리는 것이 유리할 것이다. 해당 도형을 선택하고 우측의 Design 패널을 확인하면 X, Y, W, H의 수치가 표시되어 있는 부분 아래에 '3' 이라는 숫자가 보일 것이다. 3이라는 숫자는 이 도형의 변의 갯수를 의미한다. 삼각형 변의 갯수는 3개이니까 3이라고 표시되어 있는 것이다. 이 부분의 숫자를 그리고 .. 2022. 6. 16.
어도비 일러스트레이터 이미지 연결된 파일 해제방법 어도비 일러스트레이터에서 파일을 열 때 간혹 아래와 같은 메세지가 뜨고 이미지가 제대로 표시되지 않을 때가 있다. 연결된 파일을 찾을 수 없습니다. 다른 파일을 선택하려면 [바꾸기]를, 연결을 변경하지 않고 그대로 두려면 [무시]를 선택하십시오. 이 현상은 이미지를 사용할 때, 특정 경로에 있는 이미지를 그대로 가져오기한 경우 일어난다. 해당 경로에 있는 이미지를 수정, 삭제하거나 또는 다른 PC에서 파일을 열게 되는 경우... 일러스트레이터가 해당 경로의 이미지를 발견하지 못해서 불러올 수 없는 것이다. 이러한 상황이 우려된다면 저장 전에 연결된 파일을 모두 포함 취소 처리 해주어야 한다. 아래와 같은 방법으로 손쉽게 처리가 가능하다. 어도비 일러스트레이터 > 레이어 패널을 보면 으로 표시된 레이어들을.. 2022. 3. 19.

티스토리툴바