본문 바로가기

전체 글

피그마 플러그인 설치 방법과 플러그인 추천 TOP3 피그마 사용 시 플러그인은 피그마의 확장프로그램으로 디자인 작업 시간을 줄여주고 효율적인 작업이 가능하게 합니다. 피그마 플러그인은 피그마 커뮤니티에서 다운로드 및 설치가 가능합니다. 플러그인의 종류는 매우 다양하며 이번 글에서는 UX, UI 디자이너에게 추천하는 플러그인 3가지를 소개합니다. 플러그인 소스는 무료와 유료가 함께 제공되며 무료 소스만 사용하여도 많은 도움을 받을 수 있습니다. 1. 이미지 플러그인 Unsplash 피그마에서 언스플래시 플러그인을 실행하여 바로 원하는 이미지를 검색할 수 있습니다. 검색 후 선택한 이미지는 자동으로 선택 영역에 삽입되어 작업시간을 줄여줍니다. 2. 아이콘 플러그인 Iconify 다양한 아이콘을 검색하여 사용할 수 있으며 Iconify 플러그인 내에서 아이콘의.. 더보기
포토샵 고급개체 사용과 해제 방법 포토샵에서 고급개체라는 개념이 있습니다. 영문버전 명칭은 스마트오브젝트라고 합니다. 기본 개념은 일러스트레이테에서 작업된 AI 파일이나 포토샵에서 작업한 2개 이상의 레이어를 원본파일을 유지하며 하나로 만들어 주는 개념이고 단일 이미지에서 고급개체는 이미지 사이즈 조절 시 원본 해상도를 유지합니다. 해당 부분을 아래 내용에서 자세히 다뤄보겠습니다. AI파일 일러스트레이터에서 작업한 AI 파일은 포토샵에서 수정이 어렵습니다. 하지만 일러스트레이터에서 작업한 이미지를 복사하여 포토샵에 고급개체로 삽입하면 원본파일이 유지되기 때문에 해당파일을 수정하면 포토샵에 자동 적용 됩니다. 1. 일러스트레이터에서 작업된 이미지를 Ctrl + C로 복사합니다. 2. 포토샵 캔버스에 Ctrl + V로 붙여 넣기하고 고급개체.. 더보기
포토샵 베타 AI 자동 이미지 생성 그동안 디자이너들은 원하는 이미지가 없을 경우 합성을 통해 이미지를 만들어 왔습니다. 제품 이미지에 그럴듯한 배경 사진과 오브젝트를 넣어 다른 공간에서 촬영된 것처럼 만들기도 하고 비현실적인 아트워크를 창조하기도 합니다. 최근 포토샵 베타 버전의 AI 기능은 그동안 많은 시간을 들여 합성했던 결과물을 텍스트 입력으로 대체해 줍니다. 아직 베타버전으로 완벽하진 않지만 어느정도 그럴듯한 결과물을 보여주는데요. 앞으로 포토샵에서 사용될 AI 기능이 어디까지 발전될지 궁금해집니다. 포토샵 베타 버전을 이용하여 AI 기능으로 이미지를 자동 생성하는 방법을 알아보겠습니다. 포토샵 베타 설치 현재 2023년 기준의 포토샵 정식버전에서는 해당기능을 사용할 수 없습니다. 어도비 클라우드 앱에서 포토샵 베타 버전을 별도로.. 더보기
상세페이지 디자인 퀄리티를 높이기 위한 TIP 상세페이지 디자인 시 화려한 요소나 복잡한 합성 작업이 아니더라도 몇 가지 규칙을 지키면 완성도 높은 상세페이지 디자인을 제작할 수 있습니다. 오히려 화려하고 눈에 띄는 요소는 상세페이지에서 다루는 제품을 강조하는데 좋지 않은 영향을 줄 수 있습니다. 여백 상세페이지 디자인이 아니더라도 디자인에는 적정 여백이 필요합니다. 강조하고 싶은 부분에는 여백을 충분히 주어 강조 콘텐츠를 돋보이게 할 수 있습니다. 여백은 각 콘텐츠의 계층에 따라 차등을 주어 규칙적으로 배치 합니다. 제목과 설명글 사이의 여백, 설명글 문단 사이의 행간도 포함됩니다. 콘텐츠의 계층이 상위 그룹일 수록 여백을 넓게 배치하며 반복되는 내용의 여백은 동일하게 주어 통일성을 유지합니다. 이미지 이미지 사용 시 가장 중요한 부분은 해상도 입.. 더보기
이미지 사용 시 저작권 주의사항 무료 이미지 사이트에서 이미지를 다운로드하거나 웹 검색으로 수집한 이미지를 캡처하여 사용하는 경우가 종종 있습니다. 무료 이미지라도 저작권 범위가 있어 라이선스 관련 내용을 꼭 확인해야 하며 웹 검색 시 사용하고자 하는 이미지는 출처를 확인하고 글쓴이 또는 원작자에게 문의 후 사용하여야 합니다. 사용 범위 확인하기 이미지 다운 받으려는 콘텐츠의 상세 라이선스를 확인합니다. 제공 플랫폼마다 공지하는 위치가 다르지만 일반적으로 다운로드 페이지에서 확인 가능합니다. pexels의 경우 다운로드 페이지의 '무료사용' 텍스트를 눌러 상세내용을 확인할 수 있습니다. 무료 저작권 사용 시 일부 출처표기를 해야하며 공통적으로는 다운로드한 콘텐츠의 재판매를 금지하고 있습니다. 폰트 무료 폰트 다운로드 링크를 제공하는 '.. 더보기
상세페이지 디자인 제작 피그마로 가능합니다. 피그마는 UX/UI 디자인 및 프로젝트를 위한 팀 협업 툴입니다. 하지만 최근 들어 상세페이지 제작에도 피그마가 많이 사용되고 있는데요. 프로그램 설치가 필요 없고 웹환경에서 바로 사용이 가능하며 크라우드 공간을 사용하기 때문에 고화질 사진이 많이 사용되는 상세페이지 파일 용량관리에도 매우 효율적입니다. 가장 큰 장점은 무료로 사용이 가능 하다는 점인데요. 부분 무료이지만 상세페이지 제작을 위해서는 유료기능이 필요하지 않습니다. 직관적이고 간결한 UI와 사용법으로 포토샵을 다루기 어려워하는 분들이 도전하기에 매우 좋은 툴입니다. 하지만 피그마로 상세페이지를 만들 때 복잡한 합성이나 이미지 보정은 지원하지 않기 때문에 경우에 따라 포토샵을 적절히 사용하시면 좋은 효과를 얻을 수 있습니다. 피그마 계정 등록.. 더보기
색상 심리를 알면 색상 설계가 쉬워집니다. 한 가지 색으로 어떤 느낌을 받는지 정의하는 것은 매우 어렵습니다. 하지만 기본적으로 특정 색상이 사람들에게 어떤 심리적 반응이 있는지 알고 있으면 디자인 시 색상을 설계하는데 많은 도움이 됩니다. 빨간색 빨간색은 정열적이며 아드레날린을 촉진하는 색으로 알려져있습니다. 빨간색을 보면 신진대사가 원활해진다고도 합니다. 빨간색은 여러분이 아시다시피 자극적이며 강렬한 색입니다. 빨간색을 좀 더 깊이 있고 묵직하게 사용하고 싶다면 채도를 낮추어 와인색으로 사용해 보세요. 주황색 주황색은 에너지가 넘치고 식욕을 돋워주는 색입니다. 빨간색처럼 격정적이지는 않지만 행복감을 주며 따뜻함을 주는 컬러입니다. 주로 음식 관련 디자인에 많이 사용하며 여러 분야에 많이 사용되는 컬러입니다. 노란색 노란색은 눈에 띠는 색상으로.. 더보기
피그마 스크롤시 프로토타입 메뉴 위치 고정하기 UI/UX 디자인 시 상 하단 메뉴가 고정되는 화면 일 경우 상단 메뉴는 가장 상단에 위치해서 확인하기 쉽지만 스크롤이 길게 내려가는 앱화면의 하단 독바 형태의 메뉴일 경우 화면 가장 아래 위치하기 때문에 잘 보이지 않고 실제 구현 시 느낌을 전달하기 어렵습니다. 이럴 때 피그마로 제작한 디자인일 경우 간단히 프로토타입 기능에서 스크롤시 고정할 부분을 선택하면 실제 앱 화면을 구동할 때 모습을 미리 볼 수 있어 시안을 전달할 때 유용합니다. 피그마에서 메뉴를 원하는 위치에 넣고 프로토타입 기능을 통해 스크롤 시 원하는 영역을 고정하는 방법을 정리합니다. 1. 위치 고정하기 피그마에서 고정 할 프레임 요소를 원하는 위치로 옮긴 후 오른쪽 Constraints에서 Bottom을 선택합니다. 독바의 경우 UI.. 더보기

티스토리툴바