WEB디자인이야기/WEB디자인 2023. 12. 20.
웹사이트의 가독성과 스타일을 동시에 향상시키는 산돌구름 웹폰트
예전에 디자인을 공부하는 대학생일 때, 산돌이라는 폰트 회사를 처음 알게 되었습니다. 그때 접했던 폰트들은 주로 출판물인 에디토리얼 디자인에 활용했었는데... 지금 시간이 흘러 다시 웹폰트로 만나게 되니 정말 감회가 새롭습니다. 예전에 알던 폰트 회사들이 사라진 회사도 많은데, 지금까지 성장해 온 산돌의 저력이 새삼 느껴집니다. 오늘은 웹 디자인을 위한 필수 아이템인 웹폰트, 그중에서도 이번에 출시한 산돌구름 웹폰트에 대해 이야기해 보려고 합니다. 그 전에 먼저 웹폰트가 무엇인지부터 알아볼까요? 웹폰트란 웹폰트는 웹사이트 디자인에서 중요한 요소로, 다양한 방식으로 웹사이트의 시각적 매력과 기능성을 향상시킬 수 있는 요소입니다. 1. 웹폰트의 개념 웹폰트는 사용자의 시스템에 설치되지 않은 폰트를 웹사이트에..
WEB디자인이야기/WEB디자인 2023. 11. 6.
디자이너라면 꼭 알아야할 컬러 조합 추천 색상 팔레트 웹사이트 8선
프로젝트를 시작할 때 색상에 대해서 쉽게 생각할 수 있지만 실제로 색상 팔레트를 설정하는것은 생각보다 어려울 수 있습니다. 예를 들어, 웹사이트를 만들 때 디자이너의 경험에 상관없이 어떤 색상을 사용할지 항상 어려운 과제입니다. 색상 팔레트 웹사이트는 이러한 경우에 어떤 안내를 제공해줍니다. 일부 서비스는 정확한 색상 정보를 받기 위해 웹사이트에 회원으로 등록해야 하고, 어떤 경우에는 회원으로 등록하지 않아도 유용한 정보를 제공해 주는 곳도 있습니다. 여기 몇 가지 이러한 색상 팔레트 서비스를 제공하는 웹사이트를 소개하겠습니다. 1. Colordot - A color picker for humans URL : https://color.hailpixel.com 사람을 위한 색상 선택기라고 되어 있는데 이 ..
WEB디자인이야기/Figma 2023. 10. 26.
피그마에서 일러스트파일(ai)파일 불러오는 방법
피그마를 사용하다 보면 제목에서 말한 것처럼 일러스트레이터 파일인 ai를 불러와야 하는 경우가 있어요. 느낌적인 느낌으로 ai 파일도 벡터 기반 파일이고 일러스트레이터 파일도 벡터 기반 파일이므로 쉽게 불러와질 것 같지만 아쉽게도 불가능합니다. illustator를 만든 회사가 Adobe라며.. Adobe가 피그마를 인수했다며.. 그렇다면 호환성 면에서도 바로 불러와져야 하는 거 아냐? 뭐 나중에야 가능하겠지만 당장은 불가합니다. 그래서 약간의 변환작업이 필요한데 수중에 Adobe 일러스트레이터 프로그램이 있다면 문제가 없겠지만 이것도 유료이므로 없는 경우도 많겠지요. 그래서 ai, eps 파일을 svg 파일로 무료 변환해 주는 웹서비스가 있어서 소개해드립니다. 파일 간 변화를 서비스해 주는 conver..
WEB디자인이야기/Figma 2023. 9. 27.
피그마 실무에서 가장 유용한 플러그인 리스트
피그마에 힘을 더해주는 실무에서 많이 사용하는 플러그인에 대해서 정리를 해 볼까 합니다. 피그마 플러그인 적용 방법 피그마의 플러그인 적용 방법은 매우 쉽습니다. 플러그인을 별도로 설치하는 개념이 아니고 커뮤니티에 있는 플러그인을 단지 찾아서 실행시킨다는 개념입니다. 경우에 따라서 플러그인에 회원가입을 해야 하는 경우도 있습니다. 상단 도구 메뉴에서 Resources 메뉴를 선택합니다. 탭 메뉴 중 중간에 있는 Plugins 탭을 선택합니다. Search all plugins의 검색창에 원하는 플러그인 명을 입력하고 검색을 합니다. 원하는 플러그인이 나타나면 우측에 있는 Run 버튼을 클릭하면 됩니다. 피그마의 유용한 플러그인들 Annotate it 이 플러그인은 기획자용 툴입니다. 화면에 번호 주석을 ..
WEB디자인이야기/Figma 2023. 9. 23.
피그마의 꽃 오토 레이아웃 사용법
피그마 편집의 꽃이라 할 수 있는 오토 레이아웃입니다. 오토 레이아웃은 디자인 요소를 자동으로 배열하고 정렬하는 강력한 기능입니다. 이를 사용하면 웹 페이지, 모바일 앱 및 기타 사용자 인터페이스 디자인을 쉽게 조작하고 관리할 수 있습니다. 오토 레이아웃의 주요 특징은 다음과 같습니다 요소 정렬: 오토 레이아웃을 사용하면 요소를 수평 또는 수직으로 정렬할 수 있습니다. 이렇게 하면 텍스트, 이미지 또는 버튼과 같은 요소들을 쉽게 정렬할 수 있습니다. 크기 조절: 요소의 크기를 자동으로 조절할 수 있습니다. 이로써 다양한 화면 크기 또는 내용에 맞게 요소의 크기를 조정할 수 있습니다. 자동 스크롤: 만약 요소가 공간을 벗어나면 자동으로 스크롤이 생성됩니다. 이로써 긴 목록이나 페이지를 만들 때 효과적으로 ..
WEB디자인이야기/Figma 2023. 9. 22.
피그마의 컴포넌트 프로퍼티(Property)와 베리언트(variants) 사용법
이전 포스팅에서 피그마의 컴포넌트에 대해서 포스팅을 했었습니다. 만약 피그마의 컴포넌트에 대해서 잘 모르시면 아래 링크를 먼저 읽어보시는 것이 좋습니다. 피그마의 컴포넌트로 구현하는 아토믹 디자인 피그마에서 가장 중요하고 이해가 필요한 것이 컴포넌트 프로퍼티(Property)와 베리언츠(Variants), 오토 레이아웃입니다. 한글로 번역하면.. 프로퍼티(Property) - 속성 : 인스턴스의 디자인 패널을 통해 미리 마스터 컴포넌트에 설정해 놓은 속성(Property)을 선택 또는 입력으로 지정한 변형을 줄 수 있음 베리언츠(Variants) - 변형 : 몇 개의 마스터 컴포넌트를 베리언츠로 하나로 묶어서 설정하며 인스턴스로 사용할 때 디자인 패널에서 그 중 하나를 선택하여 사용함 마스터 컴포넌트를 ..
WEB디자인이야기/Figma 2023. 9. 22.
피그마의 컴포넌트로 구현하는 아토믹 디자인
웹 및 앱 디자인의 세계에서는 효율성, 일관성 및 확장성이 가장 중요합니다. 최근 몇 년간 상당한 인기를 얻은 접근 방식 중 하나는 Figma 구성 요소를 사용한 아토믹 디자인 설계 구현입니다. 이 기사에서는 아토믹 디자인 개념, 이것이 Figma에 어떻게 적용되는지, 디자이너와 개발자에게 제공되는 이점에 대해 살펴보겠습니다. 아토믹 디자인이란 무엇입니까? 원자 설계(Atomic Design)는 브래드 프로스트(Brad Frost)가 도입한 방법론입니다. 재사용성과 일관성을 촉진하는 디자인 시스템을 만드는 체계적인 접근 방식입니다. 원자 디자인의 핵심 아이디어는 사용자 인터페이스를 더 작고 재사용 가능한 구성 요소로 나누는 것입니다. 개발자들에게 객체지향이 있다면 UX/UI 디자인에서는 아토믹 디자인이 ..
WEB디자인이야기/Figma 2023. 8. 24.
피그마에서 Constraints 옵션 사용법
피그마 뿐아니라 대부분의 이미지 편집툴에서 공통적으로 활용되는 것이 Constraints라는 옵션입니다. 이게 보통 많이 봐와서 안다고 생각할 텐데 막상 모르고 사용하는 경우가 많아서 명확하게 정리를 한번 해보려고 합니다. 개념을 먼저 이해해야 하는데, Frame의 크기가 변경될 때 설정된 요소는 어떤 기준으로 움직이는지에 대한 설정입니다. 상세 옵션 설정 기본값은 가로(Horizontal)는 Left, 세로(Vertical)는 Top입니다. 기본값 ( 가로 : Left, 세로 : Top) 요소의 왼쪽부터 Frame까지의 거리가 고정이 되고 요소의 상단부터 Frame까지의 거리가 고정이 되어서 Frame의 크기를 변경하면 우측과 하단 부위의 넓이만 움직이게 됩니다. 오른쪽과 하단 고정 ( 가로 : Rig..
WEB디자인이야기/Figma 2023. 8. 23.
피그마의 문서 구조는 어떻게 되나요?
포토샵으로 웹디자인과 모바일디자인같은 UI디자인을 하던 시대를 지나 맥킨토시 진영에서 스케치(Sketch)라는 걸출한 UI전용 툴이 탄생하면서부터 시작된 UI전용 툴의 춘추전국시대를 지나 현재는 피그마(Figma)가 UI툴 업계를 평정하는 양상입니다. Figma는 UI 디자인 및 협업 도구로서 혁신적인 위치와 상태에 있습니다. 이전의 UI 도구들이 겪었던 한계와 문제점을 극복하여, Figma는 웹 기반의 협업 플랫폼으로 디자이너들이 함께 작업하고 디자인을 공유하며 시각화할 수 있는 기능을 제공합니다. 이제 Figma는 단순히 UI 요소만 디자인하는 도구를 넘어서, 디자인 시스템을 관리하고 유지할 수 있는 기능을 포함하고 있습니다. 디자인 시스템을 구축하고 유지하면서 일관된 디자인 언어를 유지하고 팀 간의..
WEB디자인이야기/WEB디자인 2020. 7. 16.
CSS position:sticky로만 레이아웃 슬기롭게 만들기
프론트엔드 개발을 하다보면 javascript를 많이 사용하게 됩니다. 하지만 javascript를 너무 많이 사용하다 보면 코드가 복잡해 지기도 하고 퍼포먼스도 점점 떨어지는 것을 느끼게 됩니다. Affix 같은 기능을 구현하려면 부트스트랩같은 특정 프레임워크를 사용하거나 별도로 개발을 해야 했으나 CSS의 position:sticky를 이용하면 javascript를 전혀 사용하지 않고도 멋진 기능을 구현해 낼 수 있습니다. sticky란 무엇인가?sticky는 CSS의 Position의 속성으로 사용되어 집니다. Fixed가 브라우저 화면의 절대 위치를 사용하는 반면 Sticky는 부모 태그의 절대위치값을 사용하는 방법입니다. 그래서 반드시 Sticky의 상위에 부모 컨테이너가 존재해야 합니다. po..
WEB디자인이야기/WEB디자인 2019. 6. 12.
Adobe 포토샵과 XD의 다른점
이전에도 포스팅 했던 것 처럼 스케치라는 프로그램이 출시되면서 이제 UI디자인 트렌드도 워터폴 개발 방법론에서 애자일 개발 방법론으로 많이 따라가고 있는 추세입니다. 이전 포스팅 참조 : UI디자인 개발 트렌드의 변화 그래서 이번에는 기존에 UI디자인 툴로 많이 사용했던 Adobe 포토샵과 최근에 많이 사용하고 있는 UI디자인 전용 툴인 Adobe XD의 차이점을 제가 아는 한도 내에서 정리를 해 볼까 합니다. 포토샵은 비트맵 이미지를 다루고 XD은 벡터 이미지를 다룹니다. 포토샵은 기본적으로 비트맵 이미지를 다루지만 XD는 벡터 이미지 방식을 사용합니다. 비트맵 이미지의 경우 픽셀에 대한 이미지 색상정보를 저장했다가 보여주는 방식인 반면에 백터 이미지 방식은 이미지의 지점 정보와 계산식으로 이미지를 저..
WEB디자인이야기/WEB디자인 2019. 5. 29.
UI디자인 개발 트렌드의 변화
웹디자인을 하던 모바일 디자인을 하던 UI 디자인(User Interface Design)을 하기 위해 지금까지 중심이 되어 온 툴은 포토샵이였다. 비교적 근래에 업종으로 자리 잡게된 UI 디자인(웹디자인/모바일 디자인)은 주로 시각디자인을 전공하던 그래픽디자이너나 편집디자이너, 제품디자이너 등이 작업하기 시작했으며 전용 툴이 없던 UI디자인은 시각디자이너들에게 익숙한 포토샵을 주로 사용하게 되었다. 매크로미디어의 파이어폭스나 Adobe의 이미지레디 등 여러 업체들이 UI디자인 전용 툴을 개발하기 위해 시도는 했으나 대부분 실패했고 아직도 범용 디자인 툴인 포토샵이 UI디자인 툴로써 긴 명맥을 유지하고 있었다. 그러다가 몇 년전 부터 슬슬 변화의 바람이 불기 시작했다. 보헤미안(Bohemian)이라는 회..
WEB디자인이야기/Adobe Photoshop 2019. 1. 22.
포토샵으로 날씬하고 키가 크게 만드는 방법
오랜동안 온라인에서 마법의 도구로 사용되는 포토샵을 이용하여 사진 속 인물을 좀 더 날씬하고 좀 더 길쭉~ 하게 만드는 방법을 포스팅 하려고 합니다. 사용하는 기능 사용하는 핵심기능은 아래의 2가지 입니다. 픽셀유동화(Liquify) 필터 사용 사각형 선택 윤곽 도구를 활용한 부분이미지 변형 먼저 무료이미지 제공사이트에서 샘플로 사용할 사진을 하나 찾아서 포토샵으로 불러옵니다. 얼굴 보정과 날씬한 몸 만들기 먼저 모델을 날씬하게 만드는 작업을 하겠습니다. 형태의 변형을 자연스럽게 해주는 도구가 픽셀유동화(Liquify) 필터 입니다. 이 필터를 이용해서 날씬하게 만들어 보겠습니다. 사용방법은 그렇게 어렵지 않습니다. 다만 사진을 보는 눈이 좋아야 겠지요. 먼저 작업하기 전에 원본보호를 위해 레이어를 하나..
WEB디자인이야기/Adobe Photoshop 2019. 1. 22.
한글 포토샵을 영문 포토샵으로 전환하는 아주 손쉬운 방법
포토샵을 처음 사용하거나 개인인 경우는 대부분 한글 포토샵이 편할 것입니다. 그러나 포토샵을 업으로 하고 있는 포토그래퍼나 디자이너 같으신 분들은 아마도 영문 포토샵이 훨~씬 더 편하거라 생각합니다. Adobe에서 포토샵 판매방식을 매월 결제하는 포토샵CC로 바꾸면서 특별히 설정하지 안는 이상 한국에서는 한글 포토샵이 설치가 되게 되는데요. 이것을 영문버전으로 사용하는 2가지 방법을 포스팅 하려고 합니다. 아래의 2가지 방법이 있습니다. 설치할 때 영문으로 설치하기 설치 후에 영문으로 변환하기 설치할 때 영문으로 설치하기 AdobeCC를 사용한다면 Adobe Creative Cloud 설치 화면을 보셨을 거라 생각합니다. 이곳의 환경설정에서 언어를 영문으로 변경하여 설치하면 됩니다. 먼저 우상단의 메뉴버..
WEB디자인이야기/WEB디자인 2018. 12. 22.
파비콘(Favicon) 만드는 방법 (a.k.a. ico파일)
홈페이지를 제작할 때 보통 가장 처음 또는 가장 나중에 만드는 것이 파비콘(Favicon)입니다. 많은 사람들이 파비콘과 아이콘(.ico)를 혼돈하는 경우가 많은데요. 이번 포스팅은 이것에 대한 구분과 만드는 방법을 소개하려고 합니다. 파비콘(Favicon) VS 아이콘(.ico) 아이콘(.ico) 파일이란? 텍스트 기반의 MS-DOS시절을 지나 마우스로 깔짝되는 GUI(Graphic User Interface) 기반인 Windows시대로 넘어 오면서 마우스로 눌러야 할 명령어를 사용자가 한눈에 직관적으로 알 수 있게 하기 위해 파일이나 폴더를 아이콘(.ico)파일로 만들면서 사용하기 시작했습니다. 말하자면 아이콘 파일은 Windows와 역사를 같이 하고 있다고 볼 수 있습니다. (GUI는 Mac으로부터..
WEB디자인이야기/WEB디자인 2018. 7. 10.
더미 이미지를 무료로 제공해 주는 사이트를 소개합니다.
웹사이트 개발 시 더미 이미지가 필요한 경우가 있습니다. 레이아웃을 잡는 거라 특별히 의미가 없는 이미지만 필요한 경우 어디서 구하기도 힘들고 저작권도 신경쓰이고 할때 임시로 이미지를 제공해 주는 사이트가 있습니다. 사용법도 아주 쉽게 적용이 가능 합니다. 다만 인터넷이 연결이 되어 있어야 합니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 웹사이트 : http://placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. 디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 ..
