All in One SEO v5.0.0.1에서 생성된 이 파일은 llms.txt 파일로, LLM이 사이트를 색인화하는 데 사용됩니다.

# 디자인베이스

누구나 손쉽게 배우는 디자인클래스, 디자인베이스

## Sitemaps

- [XML Sitemap](https://designbase.co.kr/sitemap.xml): Contains all public & indexable URLs for this website.

## 글

- [Blog](https://designbase.co.kr/blog/)
- [앱 UI 디자인 기본 : 알아두면 좋은 Touch Target과 Thumb zone 개념 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-7/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 필수적으로 알아야 하는 터치 타깃과썸존에 대해 알아보는 시간입니다. 앱을 만드는 사람이라면 가장 먼저 사람이 스마트폰을 어떻게 사용하는지를 알아야겠죠. 손에 대한 것과 제스처에 대한 부분을 두 개의 영상으로 나눴습니다. 이번에는 터치포인트과 썸존에 대해 배워보도록 할게요.
- [앱 UI 디자인 기본 : 알아두면 좋은 제스처 종류와 예시 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-8/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 알아두면 좋은 제스처에 대해 알아보는 시간입니다. 디바이스와 인터렉션을 위해 사용되는 제스처 이해하는 게 중요하죠. 사실 여러분이 앱을 실생활에서 너무 익숙하게 사용하고 계실 거라서 굳이 넣을까 말까를 했었는데, 특징과 예시, 그리고 명칭은 어느 정도 알아야 되겠다 싶어서 넣었습니다. 빠르게 핵심만 배워볼게요. 제스처 관련 가이드라인 android : https://m2.material.io/design/interaction/gestures.html#principlesios : https://developer.apple.com/design/human-interface-guidelines/touchscreen-gestures
- [앱 UI 디자인 기본 : 내비게이션 이해하기 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-9/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 알아두면 좋은 내비게이션에 대해 알아보는 시간입니다. 내비게이션이란, 사용자가 목적에 이르기까지 페이지 간에 자연스럽게 이동할 수 있도록 안내하는 시스템을 말하죠. 앱에서는 유저가 원하는 대로 탐색할 수 있도록 내비게이션바, 탭바, 툴바, 탭, 세그먼트 컨트롤, 드로월메뉴(햄버거 메뉴) 등 다양한 컴포넌트를 제공합니다. 내비게이션 역할을 하는 주요 컴포넌트에 대해 알아보고, 플로우차트가 뭔지, 뒤로가기
- [웹에서 메인 섹션 이해하기 - 웹디자인 강좌 1-5](https://designbase.co.kr/web-design-1-5/) - 웹사이트의 메인 영역이란? 메인은 웹페이지에서 가장 핵심이 되는 콘텐츠 영역입니다. 사용자는 메인 영역을 통해 사이트가 무엇을 제공하는지 이해하고, 서비스나 상품이 자신에게 필요한지 판단하며, 최종적으로 회원가입이나 구매, 문의 같은 행동을 결정합니다. 메인 영역은 하나의 커다란 콘텐츠 덩어리로 만들어지는 것이 아닙니다. 위에서 아래로 서로 다른 주제와 목적을 가진 여러 개의 콘텐츠 영역이 쌓이면서 하나의 페이지가 완성됩니다. 이러한
- [어디에 무엇을 배치할까? 웹사이트 기본 구조와 역할 완벽 정리 - 웹디자인 강좌 1-4](https://designbase.co.kr/web-design-1-4/) - 웹사이트는 어디에 무엇을 배치해야 할까? 웹디자인을 처음 시작하면 가장 막막하게 느껴지는 부분 중 하나가 화면에 무엇을 어디에 배치해야 하는지 결정하는 일입니다. 로고는 어느 위치에 두어야 하는지, 메뉴와 로그인 버튼은 어떻게 구분해야 하는지, 본문과 보조 정보는 어떤 구조로 배치해야 하는지 고민하게 됩니다. 이러한 문제는 디자이너의 감각만으로 해결하는 것이 아닙니다. 웹사이트에는 오랜 시간 동안 반복해서 사용되며 형성된
- [포토샵 모자이크와 워프로 입체적인 그래픽 포스터 만들기 - 포토샵 강좌](https://designbase.co.kr/photoshop-mosaic-warp-poster/) - 포토샵의 모자이크 필터는 사진을 단순히 가리거나 검열할 때만 사용하는 기능이 아닙니다. 인물 이미지 일부에만 모자이크를 적용하고 픽셀 블록을 불규칙하게 제거하면, 이미지가 디지털 데이터처럼 분해되는 그래픽 효과를 만들 수 있습니다. 여기에 텍스트를 원통 형태로 휘어주는 Warp 기능을 함께 사용하면 인물의 앞뒤를 감싸는 입체적인 타이포그래피를 표현할 수 있습니다. 이번 실습에서는 크게 두 가지 작업을 진행합니다. Mosaic 필터로
- [웹 디자이너가 알아야 할 필수 개념: 반응형 vs 적응형, 모바일 퍼스트 이해하기 - 웹디자인 강좌 1-3](https://designbase.co.kr/web-design-1-3/) - 왜 다양한 화면 크기를 고려해야 할까? 오늘날 사용자는 하나의 기기로만 웹사이트를 이용하지 않습니다. 회사나 집에서는 데스크톱과 노트북으로 웹사이트를 확인하고, 이동 중에는 스마트폰이나 태블릿을 사용합니다. 같은 사용자라도 상황에 따라 서로 다른 크기의 화면에서 동일한 서비스를 이용할 수 있습니다. 따라서 웹디자인은 특정 화면 크기에서만 보기 좋게 만드는 작업이 아닙니다. 화면이 넓거나 좁아지더라도 콘텐츠를 읽기 쉽고, 주요 기능을
- [웹사이트 제작의 전체 흐름 파악하기 - 웹디자인 강좌 1-2](https://designbase.co.kr/web-design-1-2/) - 웹사이트는 디자인 화면만 완성한다고 만들어지는 것이 아닙니다.하나의 웹사이트가 사용자에게 공개되고 지속적으로 성장하기까지는 기획, 디자인, 개발, QA, 배포, 운영이라는 전체 과정이 필요합니다. 이번 영상에서는 웹사이트가 실제로 만들어지는 6단계의 흐름을 살펴보고, 각 단계에서 웹디자이너가 알아두면 좋은 핵심 개념과 실무 용어를 함께 정리합니다.기획 단계에서는 요구사항 정의서, 페르소나, 사용자 여정 지도, 유저 플로우, 사이트맵, 와이어프레임, UX 라이팅의 역할을 알아봅니다.디자인
- [피그마 페이지, 섹션, 프레임, 레이어 이해하기 - 피그마 강좌 1-3](https://designbase.co.kr/figma-01-3/) - 이번에는 피그마에서 레이어, 그룹, 프레임, 섹션 및 페이지의 개념과 사용 방법을 자세히 배워봅니다. 레이어와 그룹을 통한 효율적인 디자인 조정 방법, 프레임의 기본과 활용, 그리고 페이지를 사용하여 프로젝트를 구조화하는 방법까지, 초보자도 쉽게 이해할 수 있도록 설명드립니다. 이 영상을 통해 레이어 순서 변경의 단축키, 프레임 생성과 수정, 그리고 다양한 섹션 내 기능을 배울 수 있습니다. 레이어 란?
- [미드저니로 영상 만들어서 움직이는 광고 배너 만들기 - 미드저니 강좌 4-8](https://designbase.co.kr/midjourney-04-8/) - 이번 영상에서는 미드저니를 활용해 정적인 이미지를 역동적인 영상으로 변환하는 방법을 배워봅니다. 생성된 이미지를 기반으로 움직임을 추가해볼건데, 이때 움직임 추가와 반복 영상 기능을 활용해서 뽑아보겠습니다. 미드저니 웹사이트에서 탐색 메뉴에 들어가 Video 탭에서 남들이 만들어놓은 걸 볼 수 있는데, 엄청나죠?저희는 움직이는 영상을 만들어서 움직이는 배너를 디자인해볼까합니다.이 기능은 사실 어려운게 아니라서 사용법만 빠르게 다뤄볼게요. 원하는 이미지를 만들어주고, 움직임
- [스타일 레퍼런스로 비슷한 이미지 만드는 방법 - 미드저니 강좌 4-7](https://designbase.co.kr/midjourney-04-7/) - 이번 영상에서는 미드저니의 탐색 탭에 새롭게 추가된 Styles 기능을 활용해 원하는 그래픽을 빠르게 제작하는 방법을 다룹니다. 다른 사용자가 만든 스타일을 --sref 코드로 가져오거나 본인만의 디자인 톤을 일관성 있게 유지하며 효율적으로 에셋을 생성하는 실무 노하우를 배워보겠습니다. Styles 활용법 이번에는 스타일을 활용한 빠른 그래픽 제작을 해볼게요. 탐색 탭에서 Styles라는게 새로 생겼습니다. 우리가 무드보드를 사용했던것처럼, 비슷한 느낌의 그래픽을
- [긴 프롬프트는 이제 그만! 무드보드로 원하는 스타일 한 번에 적용하기 - 미드저니 강좌 4-6](https://designbase.co.kr/midjourney-4-6/) - 안녕하세요. 미드저니가 그동안 꽤 업데이트가 되어서, 그 안에서 쓸만한 기능들을 다뤄보려고합니다. 그중에 꽤 괜찮다고 생각한 기능중에 하나인, ‘무드보드’ 활용하는 방법을 다뤄볼게요. 특히 고퀄리티의 제품 이미지가 필요할 때 사용하면 좋은 프롬프트를 알려드립니다. 기본 프롬프트 작성 예를 들어, 디자인을 하는데, 쇼핑몰에 들어갈 이미지를 만들어보고 싶어요. 그럴때는 실제 쇼핑몰을 찾아보죠. 저는 29cm처럼 정갈한 이미지보다, 무신사에서 길거리에서 스냅으로 찍은듯한
- [AI 시대 웹디자인, 결과물의 차이를 만드는 기준 - 웹디자인 강좌 1-1](https://designbase.co.kr/web-design-1-1/) - 안녕하세요! 디자인베이스입니다. 드디어 웹디자인 입문 강좌 시작합니다.근데 이 강의는 “툴 알려드릴게요~”, “이렇게 따라하세요~”가 아니라, 웹디자인을 보는 눈(=기준)부터 만드는 강의예요. 요즘 AI로 디자인도 뚝딱 나온다는데…솔직히 말하면, 막상 뽑아보면 디자이너 입장에서 구린 경우 진짜 많죠. “AI가 만들어줬는데… 뭔가… 이상한데… 뭐가 이상하지?” 이렇게 디자인에 대한 보는 눈이 없는 사람이라면, 결과물이 뭔가 이상한데.. 어디가 왜 구린지 모르니까 수정도 못하죠..
- [새롭게 뜨는 Creatie ai 알아보기 - Creatie 강좌 1-1](https://designbase.co.kr/creatie-01-1/) - 현재 creatie.ai 서비스가 중단(종료)되었습니다. 안녕하세요! 이번 포스트에서는 올해 출시된 후 큰 화제를 모으고 있는 Creatie.ai를 소개합니다. 이 툴은 2024년 UX/UI 디자인 업계의 혁신을 이끌고 있는 AI 기반 UI 디자인 도구로, 디자이너들에게 반복적이고 지루한 작업을 대폭 줄여주는 다양한 기능을 제공합니다. 특히 기존 디자인 툴에 익숙한 사용자와 초보자 모두에게 직관적이고 효율적인 사용 경험을 제공하는 점이 큰 장점입니다.
- [Figma Glass 효과로 Liquid Glass 스타일 적용과 주의사항 - 피그마 강좌 4-9](https://designbase.co.kr/figma-04-9/) - 안녕하세요. 최근에 피그마가 또 한번 업데이트 되었습니다. 바로 Liquid Glass 스타일을 구현할 수 있게 Effect에 Glass 효과가 추가된 것입니다.이전에는 Texture와 Blur 효과를 조합해 비슷한 느낌을 만들었지만, 완성도가 아쉬웠죠. 이번 업데이트로 추가된 Glass기능을 사용해보도록 할게요. Glass 사용법 프레임 선택 후 Effects 탭에 Glass를 넣어줍니다. 그럼 바로 적용됩니다. 참고로 Glass효과는 프레임에만 적용 가능합니다! 그리고, 백그라운드 블러처럼 Fill이
- [Figma MCP 완전 정복: 디자인을 코드로 자동 변환하는 방법 - 피그마 강좌 4-8](https://designbase.co.kr/figma-04-8/) - 이번 강의에서는 Figma의 새로운 코드 전환 기능인 MCP(Model Context Protocol) 를 활용하여 디자인을 구조화된 코드로 빠르게 변환하는 방법을 실습합니다. MCP는 기존의 이미지 기반 분석과 달리, 디자인의 구조적 정보(컴포넌트, 변수, 스타일 등)를 AI가 직접 읽을 수 있게 해주는 통합 프로토콜입니다. 이를 통해 Claude, GPT, Cursor 같은 AI 도구들이 Figma 디자인을 이해하고, 정확도 높은 코드로 자동 변환할
- [Figma Site 인터렉션 활용해서 퀄리티 높이기 - 피그마 강좌 4-6](https://designbase.co.kr/figma-04-6/) - 안녕하세요. 이번 강의에서는 피그마(Figma)의 Site 기능 내 인터랙션(Interaction) 설정을 통해 웹사이트에 생동감을 더하는 방법을 실습 중심으로 알아봅니다. 정적인 디자인을 넘어, 사용자 반응에 따라 애니메이션이 적용되는 인터랙션은 현대적인 웹사이트 제작에 있어 중요한 요소입니다. 이번 영상에서는 커스텀 커서부터 마우스 패럴럭스, Reveal, Scroll Transform 등 다양한 기능을 실제 프로젝트에 적용해보며 그 차이를 체감할 수 있도록 구성했습니다.이번 강의에서는 다음과
- [Figma Make 기능으로 기획부터 코드 생성까지 한 번에 - 피그마 강좌 4-7](https://designbase.co.kr/figma-04-7/) - 이번 강의에서는 피그마(Figma)의 Make 기능을 단독으로 다루며, 기획자와 개발자 모두에게 유용한 실전 활용법을 소개합니다. Make는 자연어 프롬프트를 기반으로, UI와 코드를 동시에 생성해주는 AI 기능입니다. 단순히 시각적 프로토타이핑을 넘어, Tailwind CSS + React 코드까지 자동 생성되어 실제 웹 개발에 즉시 활용할 수 있습니다. 이번 영상에서는 다음과 같은 내용을 단계별로 실습합니다. Make 기능 개요 및 작동 원리
- [Figma Site 기능으로 웹사이트 만들기 - 피그마 강좌 4-5](https://designbase.co.kr/figma-04-5/) - 안녕하세요. 이번 영상에서는 피그마(Figma)의 새로운 기능인 Site 기능을 소개합니다. 이제 피그마 안에서 직접 웹사이트를 디자인하고, 반응형 설정, 인터랙션 적용, 배포까지 한 번에 할 수 있습니다. 특히 Webflow, Framer와 유사한 노코드 환경을 제공하며, 다양한 템플릿, 자동 반응형 처리, 도메인 연결, 그리고 프롬프트 기반의 Make 기능까지 포함되어 있어 더욱 강력한 웹 구축 도구로 발전하고 있습니다. 이번 강의에서는
- [Buzz 기능을 통해 간단한 디자인 빠르게 작업하기 - 피그마 강좌 4-4](https://designbase.co.kr/figma-04-4/) - 안녕하세요. 이번 영상에서는 피그마(Figma)의 새로운 기능인 Buzz를 활용하여 빠르고 효율적으로 콘텐츠를 제작하는 방법을 소개합니다. Buzz는 Canva나 망고보드처럼 템플릿 기반 콘텐츠 제작을 지원하며, 이제는 디자이너뿐만 아니라 마케터, 기획자도 피그마 안에서 광고, 카드뉴스, SNS 콘텐츠를 간편하게 만들 수 있습니다. 이번 강의에서는 Buzz의 주요 기능부터 뷰 설정, 이미지·텍스트 편집, Bulk 콘텐츠 생성, AI 이미지 생성 등 실무 활용에
- [Draw 기능 활용법: 브러시, 벡터 드로잉, Fill 패턴까지 한 번에 익히기 - 피그마 강좌 4-3](https://designbase.co.kr/figma-04-3/) - 안녕하세요. 이번 영상에서는 피그마(Figma)에 새롭게 추가된 Draw 기능을 활용하여 브러시, 벡터 드로잉, Fill 패턴까지 한 번에 익힐 수 있는 방법을 소개합니다. Draw 모드를 통해 이제는 UI 작업뿐만 아니라, 자유로운 그래픽 표현과 감각적인 드로잉 작업까지 피그마 안에서 직접 가능해졌습니다. 이번 강의에서는 Pen, Brush, Pencil 도구는 물론, Variable Width, Custom Brush, Fill 패턴 기능까지 모두 실습을 통해
- [신규 Effect - Noise, Texture 배우고 iOS 26 Liquid Glass 구현하기 - 피그마 강좌 4-2](https://designbase.co.kr/figma-04-2/) - 안녕하세요. 이번 영상에서는 피그마(Figma)의 신규 Effect 기능인 Noise와 Texture를 활용하여, iOS 26에서 소개된 Liquid Glass 스타일을 구현하는 방법을 알아봅니다. Noise와 Texture는 단순한 블러나 그림자 효과를 넘어 입자감과 질감 표현, 자연스러운 외곽 왜곡, 수작업 감성 디자인까지 가능하게 해주는 업데이트입니다. 이를 실제 UI에 적용하여 iOS 스타일의 반투명 유리 효과, Progressive Blur, 그리고 그라데이션 스트로크까지 구현해보겠습니다. 디자인 트렌드를
- [Auto Layout Grid 완벽 이해 - 피그마 강좌 4-1](https://designbase.co.kr/figma-04-1/) - 안녕하세요. 피그마가 최근에 여러 기능을 업데이트했는데요, 이번 영상은 그중에서도 Auto Layout - Grid 기능을 집중적으로 다루는 강의입니다. 기존 Auto layout이 row 또는 column 중심의 정렬 방식이었다면, 이제는 CSS Grid처럼 셀 기반의 구조 설계가 가능해졌습니다. 이번 영상에서는 Grid 기능의 사용법부터 대시보드, 갤러리, 콘텐츠 카드 UI까지 다양한 예제를 통해 활용법을 실제로 실습해봅니다. 디자인과 개발 간 협업에서 더욱
- [피그마 라이브러리 스왑 기능 활용하기 - 피그마 강좌 3-9](https://designbase.co.kr/figma-03-9/) - 안녕하세요! 이번 강좌에서는 피그마의 라이브러리 스왑 기능을 활용하는 방법을 알아보겠습니다.디자인 시스템을 피그마 라이브러리로 만들어 템플릿에 적용했지만, 새로운 컬러 또는 타이포그래피 라이브러리를 만들어야 하는 경우가 있을 수 있습니다. 이럴 때 스왑 기능을 활용하면 기존 라이브러리를 간편하게 대체할 수 있습니다. 라이브러리 스왑 기능 개요 활용 시 주의할 점 스왑 가능한 요소: 현재 스왑 기능은 컴포넌트와 스타일에 적용되며,
- [디자인시스템 Spacing & Sizing 라이브러리 생성 - 피그마 강좌 3-6](https://designbase.co.kr/figma-03-6/) - 안녕하세요. 이번 강의에서는 피그마 변수를 활용하여 스페이싱 & 사이징 라이브러리를 생성하는 방법을 다뤄보겠습니다. Spacing & Sizing은 레이아웃과 컴포넌트의 간격, 크기, 그리고 형태를 정의하는 중요한 역할을 합니다. 이러한 요소들은 UI 요소 간의 일관성, 가독성, 사용성을 높이는 데 기여합니다. Spacing & Sizing의 역할 레이아웃과 컴포넌트에서 일관성을 유지하려면 마진(margin), 패딩(padding), 높이(height), 너비(width), 경계 반경(radius) 등의 값을 정의해야 합니다.
- [피그마로 제작한 디자인 시스템 활용해서 템플릿 제작하기 - 피그마 강좌 3-8](https://designbase.co.kr/figma-03-8/) - 이번 강의에서는 지금까지 만든 디자인 시스템 라이브러리를 활용하여 템플릿을 제작하는 방법을 다뤄보겠습니다. 이전 강의에서 제작한 컴포넌트들은 정의된 변수와 스타일, 그리고 아이콘들을 연결하여 사용하도록 구성했습니다. 학습을 위한 예제이므로 가볍게 구성하였으며, 불필요한 요소는 제거하고 필요한 부분만 추가했습니다. 디자인 시스템 라이브러리 불러오기 새로운 디자인 파일을 생성한 후, 기존에 제작한 디자인 시스템 라이브러리를 불러옵니다. 새 파일 생성 - 피그마에서
- [디자인시스템 컴포넌트 라이브러리 생성 - 피그마 강좌 3-7](https://designbase.co.kr/figma-03-7/) - 이번 강의에서는 자주 사용하는 컴포넌트를 라이브러리로 만들어 활용하는 방법을 알아보겠습니다. 이번 예제는 모바일 앱을 기준으로 제작할 예정이며, 이전에 생성한 컬러 시스템, 타이포그래피, 아이콘, 스페이싱 & 사이징을 활용하여 일관된 컴포넌트 디자인을 구성하겠습니다. 라이브러리 정리 및 명명 규칙 디자인 시스템을 효율적으로 관리하기 위해 기존에 만든 컬러, 타이포그래피, 아이콘, 스페이싱 & 사이징 라이브러리를 dds- 로 직관적인 이름으로 정리했었죠.
- [디자인시스템 아이콘 라이브러리 생성 - 피그마 강좌 3-5](https://designbase.co.kr/figma-03-5/) - 안녕하세요. 이번에는 디자인시스템 중 아이콘에 대한 라이브러리 생성하는 걸 다뤄볼게요. 예제에서는 제가 미리 넣어 놓은 아이콘들을 컴포넌트화하고 라이브러리로 배포하는 것을 해볼게요. 1. 아이콘셋 컴포넌트화하기 먼저, 미리 생성해둔 아이콘셋을 Create Multiple Components 기능을 사용하여 각각의 아이콘을 개별 컴포넌트로 변환합니다. 이 기능을 활용하면 여러 개의 아이콘을 한 번에 컴포넌트화할 수 있어 효율적인 작업이 가능합니다. 컴포넌트화된 아이콘은 디자인
- [디자인시스템 타이포그래피 라이브러리 생성 - 피그마 강좌 3-4](https://designbase.co.kr/figma-03-4/) - 안녕하세요. 이번에는 디자인시스템 중 타이포그래피에 대한 라이브러리 생성하는 걸 다뤄볼게요. 이번 예제로는 변수와 텍스트 스타일을 같이 활용해 볼 예정입니다. 1. 변수 등록하기 피그마에서는 변수 기능을 활용하여 타이포그래피 관련 속성을 효율적으로 관리할 수 있습니다. 먼저, 새로운 변수 컬렉션(Variable Collection)을 생성한 후 타이포그래피 관련 변수를 설정합니다. 폰트 크기는 숫자(Number) 타입으로 정의하고, 가독성을 고려하여 적절한 행간 값을 설정합니다.
- [라이브러리로 컬러 시스템 구축하기 - 피그마 강좌 3-3](https://designbase.co.kr/figma-03-3/) - 안녕하세요. 이번에는 피그마 변수를 활용해서 컬러 시스템을 라이브러리로 구축해보겠습니다. 컬러는 시각적 위계 구조와 접근성을 반영하여 UI에 사용될 컬러 모음을 변수로 등록하여 효율적으로 관리할 수 있습니다.컬러의 기본 개념이 궁금하신 분들은 UX/UI 디자인 강의의 컬러 개념 파트를 참고해주세요. 컬러 변수 사용 예시 주색 (Primary Color), 보조색 (Secondary Color), 중성색 (Neutral Color) 등을 변수로 등록 텍스트, 배경, 구분선
- [피그마 라이브러리 사용법 알아보기 - 피그마 강좌 3-2](https://designbase.co.kr/figma-03-2/) - 안녕하세요. 이번에는 피그마를 통해 디자인시스템을 구축하기 위해 필수로 알아야 하는 라이브러리에 대해 배워볼게요. 라이브러리가 뭔지 개념을 이해하고, 직접 라이브러리를 어떻게 적용하는지 알아볼게요. 피그마 라이브러리란? 피그마 라이브러리는 재사용 가능한 디자인 요소를 저장하고 관리하는 리소스 모음입니다. 컴포넌트(Component)와 스타일(Style)을 체계적으로 관리하여 프로젝트 전반에 걸쳐 디자인의 일관성을 유지하고 작업 효율성을 극대화할 수 있습니다. 특히 팀 단위로 협업하는 경우, 라이브러리를
- [디자인시스템이란? - 피그마 강좌 3-1](https://designbase.co.kr/figma-03-1/) - 안녕하세요. 드디어 챕터3 피그마 고급 강의입니다. 이 전까지는 피그마의 기초부터 핵심 기능까지 다뤄봤는데요. 이번 챕터에서는 피그마 라이브러리를 활용해서 디자인시스템을 구축해볼게요. 디자인시스템이 뭔지 알아보고, 라이브러리를 다른 피그마 파일에 연결해서 활용하고 유지보수 하는 것까지 전반적으로 다뤄볼 예정이예요! 디자인 시스템이란? 디자인 시스템은 디자인과 개발에 사용되는 일관된 컴포넌트와 가이드라인의 집합을 의미합니다. 예를 들어, 컬러 팔레트, 타이포그래피, 버튼 스타일, 아이콘,
- [피그마로 레이아웃 그리드 설정하는 방법 - 피그마 강좌 1-4](https://designbase.co.kr/figma-01-4/) - 디자인의 핵심은 균형과 조화입니다. 레이아웃과 그리드는 디자인 요소를 체계적으로 배치하고, 시각적 통일성을 제공하는 데 중요한 역할을 합니다. 이번 강의에서는 피그마에서 그리드와 레이아웃 시스템을 설정하고 활용하는 방법을 배워보겠습니다. 레이아웃(Layout) 앱이나 웹에서 정보를 시각적으로 배치하는 방법으로, 화면 크기, 텍스트, 이미지, 여백 등을 고려해 구성됩니다. 레이아웃은 사용자 경험(UX)을 높이는 데 필수적입니다. 그리드 시스템(Grid System) 디자인의 요소를 질서 있게
- [피그마 인터페이스 파악하기 - 피그마 강좌 1-2](https://designbase.co.kr/figma-01-2/) - 이번에는 피그마의 인터페이스를 살펴보는 시간입니다. 처음부터 모든 기능을 깊게 파고드는 것이 아니라, 피그마를 처음 실행했을 때 보이는 화면들을 통해 전체적으로 툴을 한번 살펴보는 시간을 가져볼게요. 마치 심장 마사지 하듯이 피그마를 살펴보다보면 나중에 기능별로 상세하게 다룰 때는 반복 노출의 마법을 경험하며 더 쉽게 느껴질 겁니다. 왜 인터페이스를 배워야 할까? 피그마 인터페이스를 처음부터 익히는 이유는 디자이너들이 툴
- [피그마 기초부터 마스터까지 - 피그마 강좌 1-1](https://designbase.co.kr/figma-01-1/) - 제가 작년에 피그마(Figma) 강의를 새롭게 올린지 얼마 안지나 UI가 달라지고, 피그마가 많은 업데이트가 있어서 더욱 좋아졌습니다. 다양한 좋은 기능들이 생겨서 하나하나 자세하게 소개해드릴게요. 해당 강의를 통해 피그마 최신 기능을 배워보세요~! 피그마란 무엇인가? 피그마는 클라우드 기반의 UX/UI 디자인 툴로, 디자이너뿐 아니라 기획자, 개발자와 같은 여러 이해관계자들이 협업할 수 있는 플랫폼입니다. 이 도구는 다음과 같은 이유로 UX/UI
- [프로토타이핑 고급 기능 익히기 - 피그마 강좌 2-9](https://designbase.co.kr/figma-02-9/) - 안녕하세요. 이번에는 프로토타입의 고급 기능을 익혀볼게요. 사실 기초 수준만 익혀도 간단한 시연용 프로토타입을 만들기에는 충분합니다. 하지만 상황에 따라 좀 더 정교한 프로토타입을 만들고 싶을 때 사용하면 좋은 기능을 알아볼게요. 1. 셀렉트박스 구현 이전 강의에서 컴포넌트와 Variants 개념을 배웠죠? 이를 활용하여 셀렉트 박스를 만들어 보겠습니다. 컴포넌트 구조 설명 옵션 단위 컴포넌트 만들기 select-box-option이라는 개별 옵션 컴포넌트를
- [피그마 변수와 함께 Mode 활용법(다국어 지원, 다크모드) - 피그마 강좌 2-7](https://designbase.co.kr/figma-02-7/) - 안녕하세요. 이번에는 저번 영상에서 배운 변수와 함께 사용하면 좋은 모드에 대해 배워볼게요. 모드는 다양한 경우일 때 조절할 수 있는 좋은 기능입니다. 예제로 다국어 지원과 다크모드를 구현해볼게요. 모드란 무엇인가? 모드는 변수를 그룹화하여 특정 상황에 따라 서로 다른 값을 적용할 수 있는 기능입니다. 이를 활용하면 하나의 디자인 파일에서 다양한 사용자 환경(예: 다국어, 다크 모드)을 효과적으로 관리할 수
- [피그마 프로토타이핑 기본 기능 익히기 - 피그마 강좌 2-8](https://designbase.co.kr/figma-02-8/) - 안녕하세요. 이번에는 피그마에서 제공하는 프로토타이핑 기능을 배워볼게요. 프로토타입을 만들기 위한 기본적인 기능부터 다양한 예제를 통해 감을 잡아볼건데, 꽤 괜찮은 수준의 프로토타이핑을 할 수 있습니다. 프로토타이핑(Prototyping)이란? 프로토타이핑은 디자인된 화면이나 인터페이스를 실제로 작동하는 것처럼 시뮬레이션하여 사용자 경험(UX)을 테스트하거나, 팀원 및 클라이언트와 아이디어를 공유하는 데 사용하는 방법입니다.이 과정을 통해 사용자 흐름, 화면 전환, 인터랙션 등을 시각적으로 확인하고, 초기
- [피그마 변수 개념 이해하기 - 피그마 강좌 2-6](https://designbase.co.kr/figma-02-6/) - 안녕하세요. 이번에는 변수(Variables)를 배워보겠습니다. 변수는 피그마에서 디자인을 효율적으로 관리하는 데 매우 중요한 역할을 합니다. 나중에 챕터 3에서 디자인 시스템과 라이브러리 활용법을 배울때 꼭 필요한 기능이니까 알아둬야됩니다. 변수란 무엇인가? 개발에서 "변수"는 데이터를 저장하고 참조하는 단위를 말합니다. 피그마에서는 이 개념을 디자인 토큰으로 확장해, 디자인 속성(컬러, 수치, 문자열 등)을 변수로 등록하고 이를 재사용 가능하게 만듭니다. 즉, 변수를 통해
- [피그마 컴포넌트의 프로퍼티 200% 활용하기 - 피그마 강좌 2-5](https://designbase.co.kr/figma-02-5/) - 이번시간에는 피그마에서 가장 중요하게 생각하는 컴포넌트에 대해서 배워보도록할게요. UI 디자인 작업 특성상 유지보수를 위한 잦은 수정이 필요하죠. 그렇기에 꼭 컴포넌트 기능을 알아야합니다. 다양한 예시를 다뤄보면서 컴포넌트 기능을 익혀볼게요 피그마에서 '프로퍼티(Property)'란? 프로퍼티는 컴포넌트의 다양한 속성을 조정할 수 있는 기능으로, 컴포넌트를 더욱 유연하게 사용할 수 있도록 도와줍니다. 이를 통해 디자인 시스템을 보다 체계적이고 효율적으로 관리할 수 있습니다.
- [피그마 컴포넌트 완전 마스터하기 - 피그마 강좌 2-4](https://designbase.co.kr/figma-02-4/) - 이번시간에는 피그마에서 가장 중요하게 생각하는 컴포넌트에 대해서 배워보도록할게요. UI 디자인 작업 특성상 유지보수를 위한 잦은 수정이 필요하죠. 그렇기에 꼭 컴포넌트 기능을 알아야합니다. 다양한 예시를 다뤄보면서 컴포넌트 기능을 익혀볼게요 컴포넌트란 무엇인가? 컴포넌트는 디자인 요소를 하나의 템플릿처럼 등록해 반복적으로 사용할 수 있는 기능입니다. 이를 통해 동일한 요소를 여러 번 만들거나 수정해야 할 때, 한 곳에서 변경하면 모든
- [리사이징 대응을 위한 Constraints 이해하기 - 피그마 강좌 2-3](https://designbase.co.kr/figma-02-3/) - 피그마에서 Constraints(제약) 기능을 통해 디자인의 유연성과 일관성을 어떻게 유지할 수 있는지 알아보겠습니다. Constraints는 다양한 화면 크기와 해상도에 적응하는 반응형 디자인을 실현하기 위한 필수 도구입니다. 이 기능을 활용하여 요소들이 다른 요소와의 상대적인 위치를 유지하면서도, 화면 크기의 변화에 따라 자동으로 크기와 위치를 조정할 수 있습니다. 피그마에서 Constraints란? Constraints는 특정 요소가 부모 요소(프레임) 안에서 어떻게 행동해야 할지를 설정하는
- [피그마 Auto Layout 사용법 - 피그마 강좌 2-2](https://designbase.co.kr/figma-02-2/) - 피그마의 오토레이아웃 기능을 마스터하는 시간입니다! 오토레이아웃은 디자인에서 반응형 요소를 구현할 때 매우 중요한 기능으로, 이를 통해 요소 간 간격, 마진, 패딩을 자동으로 조정하며 일관된 레이아웃을 유지할 수 있습니다. 오늘 이 영상에서는 오토레이아웃을 설정하는 방법과 다양한 활용 사례를 알아보고, 실제 작업 흐름에서 어떻게 적용하는지 보여드릴 것입니다. Auto Layout이란? Auto Layout은 디자인 작업에서 요소 간의 배치와 정렬,
- [피그마 스타일 사용법 - 피그마 강좌 2-1](https://designbase.co.kr/figma-02-1/) - 피그마 중급 코스 첫번째 영상입니다. 이번 챕터에서는 피그마의 핵심 기능인 스타일에 대해 자세히 배워볼 예정입니다. 스타일을 통해 디자인 작업의 일관성을 유지하고, 업무 효율을 높이는 방법을 알려드리겠습니다. 스타일의 중요성 스타일 기능은 디자인 요소들에 일관된 속성 집합을 적용하여, 디자인 업데이트를 쉽고 빠르게 만듭니다. 텍스트 스타일, 컬러 스타일, 이펙트 스타일 등 다양한 스타일 옵션이 있으며, 이를 통해 브랜드의
- [알아두면 유용한 피그마 플러그인 - 피그마 강좌 1-11](https://designbase.co.kr/figma-1-11/) - 안녕하세요! 이번 강의에서는 작업 속도를 높이고 디자인을 더 효율적으로 할 수 있는 유용한 피그마 플러그인을 소개해 드릴게요. 피그마 기본 기능만으로도 충분히 디자인을 할 수 있지만, 플러그인을 활용하면 반복적인 작업을 줄이고, 더 다양한 디자인 스타일을 쉽게 적용할 수 있습니다. 플러그인 사용법과 알아두면 유용한 플러그인 몇가지 추천드립니다! 플러그인이란? 피그마 플러그인은 피그마의 기본 기능을 확장해 주는 추가 기능입니다.
- [피그마 Dev Mode 이해하기 - 피그마 강좌 1-10](https://designbase.co.kr/figma-1-10/) - 피그마의 Dev Mode를 활용하여 개발 프로세스를 간소화하고 효율적으로 만드는 방법에 대해 자세히 알아보세요! 이번 영상에서는 개발자들이 디자인을 손쉽게 구현할 수 있도록 설계된 피그마의 Dev Mode의 주요 기능과 장점을 설명하고, 이를 통해 디자이너와 개발자 간의 협업을 어떻게 강화할 수 있는지를 알아볼게. Dev Mode란 무엇인가? Dev Mode는 피그마에서 제공하는 개발자 지원 모드로, 개발자가 디자인에서 필요한 정보를 즉시
- [피그마에서 알아두면 유용한 기능 8가지 - 피그마 강좌 1-9](https://designbase.co.kr/figma-01-9/) - 피그마 사용자라면 반드시 알아야 할 숨겨진 기능들을 소개합니다! 이번 영상에서는 피그마의 다양한 편리한 기능들을 알아보고, 효과적으로 활용하는 방법을 자세히 안내해 드리겠습니다. 여러분이 몰랐던 이 기능들을 사용하면 작업 속도와 효율성이 대폭 향상될 것입니다. 1. 텍스트 일괄 변경하기 디자인 작업을 하다 보면 동일한 텍스트를 여러 곳에서 변경해야 하는 경우가 많습니다. 피그마에서는 이 작업을 빠르게 수행할 수 있습니다.
- [피그마로 에셋 또는 결과물 내보내기 - 피그마 강좌 1-8](https://designbase.co.kr/figma-01-8/) - 피그마로 디자인 작업을 마친 후에는 디자인 에셋과 결과물을 효과적으로 내보내야 합니다. 특히 iOS, Android 플랫폼에서의 사용을 위해 정확한 파일 형식과 옵션을 설정하는 것이 중요합니다. 에셋 내보내기 설정 에셋을 내보낼 때 플랫폼에 따라 요구되는 파일 형식이 다릅니다. iOS: SVG, PDF 형식을 주로 사용합니다. Android: 마찬가지로 SVG와 PDF를 권장합니다. 추가적으로 벡터 기반의 파일은 크기 조정에 유연하며, 해상도에
- [피그마로 작업 공유 및 실시간 협업 - 피그마 강좌 1-7](https://designbase.co.kr/figma-01-7/) - 이번 영상에서는 피그마의 클라우드 기반 특성을 활용하여, 디자인 작업물을 효율적으로 공유하고 실시간으로 협업하는 방법을 배워볼게요. 디자인 과정이 개인 작업에서 벗어나 팀원들과 소통하며 이루어지는 과정임을 강조하며, 피그마의 다양한 공유 및 협업 기능을 실습해 보겠습니다. 디자인 작업은 혼자만의 작업이 아닙니다. 다양한 이해관계자들에게 작업물을 공유하고 피드백을 받아야 하죠. 과거의 디자인 파일 공유 방식과 피그마의 차이를 간단히 정리해보겠습니다. 1.
- [도형과 텍스트로 UI 스타일링 - 피그마 강좌 1-5](https://designbase.co.kr/figma-01-5/) - 안녕하세요! 이번 강의에서는 피그마를 활용하여 텍스트와 도형을 사용한 UI 스타일링 기법을 자세히 배워볼 예정입니다. 기본적인 도형 생성부터 텍스트 스타일링까지, 실제 작업에 바로 적용할 수 있는 실용적인 팁들을 공유드리겠습니다. 피그마에서 도형 활용하기 1. 도형 생성 및 편집 도형 생성: 피그마에서 기본 제공하는 도형 도구를 사용해 사각형, 원, 선 등을 그립니다. 속성 변경: 도형을 선택하면 Fill(채우기), Stroke(외곽선),
- [피그마로 앱 UI 디자인 따라 만들기 - 피그마 강좌 1-6](https://designbase.co.kr/figma-01-6/) - 저번 강의에서 배운 도형과 텍스트 스타일링을 활용해 이번에는 실제 디자인 실습을 해보겠습니다. 목표는 유튜브 뮤직 스타일의 UI를 재현하며, 피그마 기능에 익숙해지는 것입니다. 완벽한 복제를 목표로 하기보다는 기능을 활용하며 디자인 프로세스를 체험해보세요. 작업 순서 1. 그리드 설정 Columns: 반응형 그리드 설정으로 시작합니다. 설정 값: 12단 / 마진 24px / 거터 16px 단축키: Ctrl + G로 그리드를
- [AI로 저해상도 이미지를 고해상도로! Creatie 기능으로 웹 UI 디자인 완성하기 - Creatie 강좌 1-5](https://designbase.co.kr/creatie-01-5/) - 이번 영상에서는 브랜드 시계를 판매하는 이커머스 웹사이트의 UI 디자인을 Creatie.ai를 활용해 제작하는 과정을 다룹니다. 프레임 설정부터 레이아웃 그리드 구성, 헤더와 키비주얼 영역 제작까지 실무에서 자주 마주치는 문제를 해결하는 방법을 보여드립니다. 특히, 해상도가 낮은 이미지를 Image Enhancer의 업스케일러로 품질을 높이고, 리무브 백그라운드 기능을 사용해 배경을 제거하며, AI의 도움으로 더욱 효율적으로 디자인하는 과정을 다룹니다. 예제 파일 05
- [Creatie로 APP UI 디자인 실습하기 - Creatie 강좌 1-4](https://designbase.co.kr/creatie-01-4/) - 이번 영상에서는 Creatie.ai의 강력한 기능들을 활용해 OTT 앱 UI를 제작하는 실습을 진행합니다. 위자드를 활용한 페이지 제작, 리소스를 활용한 버튼과 리스트 추가, Replace 기능으로 폰트 스타일 변경, Audit 기능으로 스타일을 일괄 적용하며 효율적으로 디자인하는 과정을 보여드립니다. 또한, 다양한 시안을 빠르게 제작하고 스타일 가이드를 생성해 개발자와 협업하는 방법도 다룹니다. Creatie.ai의 도구들을 실전에서 활용하며 UI 제작을 더 빠르고
- [생산성 높여주는 Creatie.ai의 스마트 기능들 (Magicon, Image enhancer, Style Guide, Audit) - Creatie 강좌 1-3](https://designbase.co.kr/creatie-01-3/) - 이번 영상에서는 Creatie.ai의 핵심 스마트 기능들을 활용해 UI 디자인 작업을 효율적으로 진행하는 방법을 소개합니다. Magicon을 사용해 3D 아이콘을 생성하고, Image Enhancer로 이미지를 업스케일하거나 비트맵을 벡터로 변환하는 실습을 진행합니다. 또한, Replace 기능으로 폰트와 스타일을 일괄 변경하고, 자동으로 스타일 가이드를 생성하며 Audit 기능으로 디자인의 일관성과 접근성을 점검합니다. Creatie.ai의 강력한 AI 기능을 활용하면 반복 작업을 줄이고 더 창의적인
- [Wizard로 빠르게 생성하는 UI (Figma import) - Creatie 강좌 1-2](https://designbase.co.kr/creatie-01-1-2/) - 이번 시간에는 Creatie.ai를 활용해 Figma 파일을 가져오고, Wizard 기능으로 빠르게 UI를 제작한 후, 공유와 Dev Mode를 활용한 협업까지의 과정을 살펴보겠습니다. Creatie.ai는 다양한 디자인 툴(Figma, XD, Sketch)과 매끄럽게 연동되며, 효율적인 UI 제작과 협업 환경을 제공합니다. 예제 파일 02 : https://creatie.ai/goto/ERtwZpR1?page_id=M&file=143018238528091 1. Figma와 Creatie.ai 연동하기 Creatie.ai에서는 Figma에서 작업한 디자인을 그대로 가져와 수정하고 확장할 수 있습니다. Import 기능을
- [UI 디자인에 제품, 인물 사진 활용하기 - 미드저니 강좌 4-5](https://designbase.co.kr/midjourney-04-5/) - 이번에는 웹 혹은 앱 디자인에서 UI 요소를 제외한 배너, 상세페이지, 콘텐츠 디자인에 활용할 수 있는 이미지를 미드저니로 만드는 방법을 다루겠습니다. 실제 제품 사진을 사용하기 전, 컨셉을 빠르게 테스트하거나 시각적 요소를 제작할 때 유용한 프롬프트를 활용하여 다양한 이미지를 만들어보겠습니다. 특히 고퀄리티의 제품 이미지가 필요할 때 사용하면 좋은 프롬프트를 알려드립니다. 기본 프롬프트 작성 제품 사진의 기초를 만드는
- [목업 이미지 만드는 방법 - 미드저니 강좌 4-4](https://designbase.co.kr/midjourney-04-4/) - 안녕하세요! 오늘은 미드저니로 목업 이미지에 사용될 기본 이미지를 만드는 방법을 알아볼게요. 목업 이미지는 다양한 디자인을 시각적으로 테스트하고, 제품이 실제로 어떻게 보일지 미리 확인할 수 있는 유용한 도구입니다. 이 강좌에서는 티셔츠, 후디, 책 커버, 머그컵 등 다양한 목업 이미지를 만드는 방법을 소개하겠습니다. 프롬프트 템플릿을 활용하여 간편하게 목업 이미지를 생성해보세요. 물론, 이미지만 구하고.. 포토샵으로 목업으로 만들 필요가
- [미드저니로 다양한 그래픽 에셋 만드는 방법 - 미드저니 강좌 4-3](https://designbase.co.kr/midjourney-04-3/) - 안녕하세요! 오늘은 미드저니로 다양한 스타일의 그래픽 에셋을 제작하는 방법을 공유드릴게요~! 저는 주로 UI 디자인 작업 시 그래픽이 필요한 순간, 바로 디자인을 하기 전에 레퍼런스를 찾아보는 편인데요. 과거에 했던 방식과 다르게, 미드저니같은 AI 툴을 활용해 빠르게 컨셉을 잡을 수 있습니다. 상황에 따라 출력한 그래픽의 퀄리티가 좋다면 그대로 사용할 수도 있겠죠? 간단한 프롬프트만으로도 퀄리티 높은 결과물을 얻을
- [미드저니로 캐릭터 만드는 방법 - 미드저니 강좌 4-2](https://designbase.co.kr/midjourney-04-2/) - 안녕하세요. 이번에는 미드저니(MidJourney)를 활용해 자신만의 캐릭터를 만들어볼게요. 여러분이 원하는 캐릭터 디자인을 뽑기 위한 프롬프트 작성이 필요합니다.이번 가이드에서는 기본 프롬프트 작성법부터 시작해, 2D 및 3D 스타일 선택, 외형과 의상 설정, 포즈 및 표정 설정까지 캐릭터 디자인의 모든 과정을 상세히 설명하겠습니다. 1. 기본 프롬프트 설정 기본 프롬프트는 캐릭터의 기초적인 특징을 정의하는 단계입니다. 캐릭터의 나이, 성별, 외형 등을
- [미드저니로 로고 만드는 방법 - 미드저니 강좌 4-1](https://designbase.co.kr/midjourney-04-1/) - 안녕하세요! 이번 챕터에서는 미드저니(MidJourney)를 사용해 로고 디자인을 뽑아내는 방법을 소개해드릴게요. 로고는 브랜드나 기업의 '얼굴'로서 매우 중요한 역할을 하며, 디자인 방향성과 메시지를 담고 있어야 하죠. 로고를 중심으로 프롬프트 작성법과 다양한 스타일에 대해 알아보겠습니다. 로고란? 로고는 단순히 심볼이 아닌, 기업의 정체성을 대표하는 중요한 요소입니다. 로고 디자인 시 고려해야 할 사항은 다음과 같습니다. 로고가 사용될 매체: 카페 메뉴판?
- [네거티브 프롬프트 사용법 - 미드저니 강좌 2-1](https://designbase.co.kr/midjourney-02-1/) - 미드저니를 통해 기본적인 이미지 생성을 배워봤다면, 이제는 중급 스킬을 활용하여 전문가처럼 이미지를 생성해 보세요. 이번 포스트에서는 네거티브 프롬프트(Negative Prompts)에 대해 다뤄보겠습니다. 네거티브 프롬프트를 통해 특정 요소를 배제하여 원하는 이미지를 더 정교하게 생성할 수 있습니다. 네거티브 프롬프트란? 네거티브 프롬프트는 이미지 생성 시 특정 요소가 나오지 않도록 하는 명령어입니다. 이 기능을 활용하면, 원치 않는 요소를 배제하고 보다
- [놀링 스타일 이미지 생성하는 방법 - 미드저니 강좌 3-7](https://designbase.co.kr/midjourney-03-7/) - 안녕하세요. 이번에는 미드저니에서 놀링(Knolling) 기법이 적용된 이미지를출력하는 방법을 배워볼게요. 놀링이란, 일정한 각도로 간격을 두고 배열한 뒤 위에서 촬영하는 기술입니다. Knolling 기법이란? Knolling은 일정한 각도로 간격을 두고 오브젝트를 배열한 후, 위에서 촬영하는 기술입니다. 이 방법을 사용하면 오브젝트의 구성과 배열을 시각적으로 깔끔하고 정리된 느낌으로 표현할 수 있습니다. Knolling 프롬프트 사용법 및 예시 Knolling 기술을 적용하기 위해서는 프롬프트에
- [다양한 그림 스타일 적용한 이미지 생성하는 방법 - 미드저니 강좌 3-8](https://designbase.co.kr/midjourney-03-8/) - 안녕하세요. 이번 포스트에서는 Midjourney에서 다양한 그림 스타일을 활용하여 이미지를 생성하는 방법에 대해 알아보겠습니다. 각 스타일에 맞는 프롬프트를 사용하면, 동일한 주제라도 완전히 다른 느낌의 결과물을 얻을 수 있습니다. 아래는 기본으로 만든 프롬프트 결과물입니다. Elephant as a knight fighting off monsters 물론 이 결과물도 좋지만, 좀 더 디테일하게 그림 스타일을 추가할 수 있습니다. 다양한 그림 스타일 예시
- [애니풍 그래픽 만드는 방법 (Niji 모델) - 미드저니 강좌 3-6](https://designbase.co.kr/midjourney-03-6/) - 안녕하세요. 이번에는 미드저니에서 애니풍의 그림을 출력하는 방법을 배워보겠습니다. 애니메이션 스타일의 이미지를 만들기 위해 Midjourney의 Niji 모드를 활용할 수 있습니다. Niji 모드는 애니메이션 스타일의 결과물을 생성하는 데 최적화된 모델입니다. Niji 모드 설정 방법 애니풍의 결과물을 얻기 위해서는 --niji 파라미터를 사용하거나, 모델 설정에서 Niji 모드를 선택하면 됩니다. 프롬프트에 --niji 추가 모든 세대를 한 곳에 보관하고 싶다면 Midjourney
- [특정 작가 스타일로 만드는 방법 - 미드저니 강좌 3-5](https://designbase.co.kr/midjourney-03-5/) - 안녕하세요. 지금까지는 그냥 원하는 프롬프트를 활용해서 출력했다면, 이번에는 미드저니에서 특정 아티스트나 작가의 스타일을 활용한 이미지 생성 방법을 알아볼게요. 스타일을 참고하기 위한 프롬프트 작성법 미드저니에서 특정 스타일을 반영하기 위해 다음과 같은 프롬프트를 사용할 수 있습니다. in the style of [이름] inspired by [이름] 미드저니 특정 아티스트 스타일 프롬프트 예시 살바도르 달리 스타일 살바도르 달리의 비전에 등장하는
- [iOS 해상도와 단위 이해하기 - UXUI 디자인 강좌 4-2](https://designbase.co.kr/uxui-04-2/) - 이번에는 iOS에서 해상도와 단위에 대해 알아볼게요. iOS에서는 물리적 해상도와 논리적 해상도의 개념이 중요하며, Point 단위가 주로 사용됩니다. 아이폰 3와 4의 해상도 차이를 통해 pt 단위의 중요성을 알 수 있으며, 레티나 디스플레이는 iOS의 화면 해상도를 나타내는 핵심 개념입니다. 또한, 픽셀 밀도와 관련하여 업 샘플링과 다운 샘플링의 의미도 함께 알아보겠습니다. 이번 강의에서는 iOS의 해상도, 단위, 그리고 물리적
- [날씨 및 시간대를 활용한 이미지 표현 - 미드저니 강좌 3-4](https://designbase.co.kr/midjourney-03-4/) - 안녕하세요, 이번에은 Midjourney에서 날씨와 시간대를 추가하여 더욱 사실적이고 상세한 이미지를 생성하는 방법에 대해 알아보겠습니다. 빛 표현 외에도 날씨와 시간대를 지정하면 이미지의 분위기와 디테일을 한층 더 높일 수 있습니다. 미드저니 날씨 및 시간에 대한 프롬프트 날씨와 시간대를 프롬프트에 추가하여 다양한 분위기의 이미지를 생성할 수 있습니다. 아래는 주요 날씨와 시간대에 대한 프롬프트 예시입니다. 강아지 프롬프트 예시 professional
- [빛 표현 및 조명 효과 활용하기 - 미드저니 강좌 3-3](https://designbase.co.kr/midjourney-03-3/) - 안녕하세요, 이번에은 Midjourney에서 빛 표현을 활용하여 이미지를 생성하는 방법에 대해 알아보겠습니다. 같은 피사체라도 빛의 위치와 종류에 따라 이미지의 분위기와 느낌이 크게 달라질 수 있습니다. 빛의 다양한 표현 기법을 알아보고, 프롬프트에 어떻게 적용할 수 있는지 알아보겠습니다. 빛 표현 기법 다양한 조명 기법을 사용하여 이미지의 분위기와 효과를 조절할 수 있습니다. 아래 표는 주요 조명 기법과 그 효과를
- [카메라 샷 유형 이해하기 - 미드저니 강좌 3-2](https://designbase.co.kr/midjourney-03-2/) - 안녕하세요, 이번에은 Midjourney에서 다양한 카메라 샷을 활용하여 이미지를 생성하는 방법에 대해 알아보겠습니다. 카메라 샷은 이미지의 구도와 피사체의 표현에 큰 영향을 미칩니다. 각 샷 유형을 사용하여 다양한 느낌과 분위기의 이미지를 생성해보세요. 카메라 샷의 차이 이해하기 카메라 샷은 피사체의 크기와 구도를 어떻게 설정하느냐에 따라 다양한 시각적 효과를 얻을 수 있습니다. 미드저니에 프롬프트를 입력할 때 카메라 샷 정보를
- [카메라 앵글 이해하기 - 미드저니 강좌 3-1](https://designbase.co.kr/midjourney-03-1/) - 안녕하세요, 이번에은 Midjourney에서 카메라 앵글을 활용하여 이미지를 더욱 생동감 있게 만드는 방법에 대해 알아보겠습니다. 카메라 앵글은 이미지의 시각적 경험과 이야기에 대한 인식에 큰 영향을 미칩니다. 올바른 카메라 앵글을 선택하면 이미지의 분위기, 캐릭터의 심리 상태, 그리고 이야기의 긴장감을 효과적으로 전달할 수 있습니다. 카메라 앵글의 차이 카메라 앵글을 통해 다양한 시각적 효과를 얻을 수 있습니다. 다음은 주요
- [특정 부위 재생성하기 - 미드저니 강좌 2-8](https://designbase.co.kr/midjourney-02-8/) - 안녕하세요, 오늘은 Midjourney에서 특정 부위만 이미지를 재생성할 수 있는 Vary Region 기능을 사용하는 방법에 대해 알아보겠습니다. 이 기능은 이미지의 세부 사항을 수정하고 창의적인 변화를 주는 데 매우 유용합니다. Vary Region 기능이란? Vary Region 기능은 업스케일된 이미지의 특정 부분을 선택하고 재생성할 수 있도록 합니다. 이 기능은 Midjourney Model Versions V5, V6, niji 5, niji 6과 호환됩니다.
- [줌 아웃 기능으로 없던 부분 생성하기 - 미드저니 강좌 2-7](https://designbase.co.kr/midjourney-02-7/) - 안녕하세요, 이번 영상에서는 미드저니의 줌 아웃 기능을 소개합니다. 줌 아웃 기능은 생성된 이미지를 줌 아웃하며 없던 부분을 생성해주는 기능입니다. 1.5배, 2배 옵션을 선택할 수 있습니다. 커스텀 줌 아웃을 하면 프롬프트를 입력할 수 있습니다. 줌 프롬프트 예시: --zoom 2 미드저니 줌 아웃 기능 줌 아웃 기능은 기존 이미지의 바깥 부분을 새로 생성하여 이미지를 확장하는 기능입니다. 이
- [Chaos와 Weird 이해하기 - 미드저니 강좌 2-6](https://designbase.co.kr/midjourney-02-6/) - 안녕하세요. 이번에는 Midjourney에서 창의성(chaos)과 이상함(weird)을 조절하는 방법에 대해 알아보겠습니다. 이 기능들을 통해 이미지 생성 시 다양한 변화를 줄 수 있습니다. 미드저니 창의성 (Chaos) 창의성(chaos) 옵션을 사용하면 이미지 생성 시의 예측 가능성과 다양성을 조절할 수 있습니다. 이 값을 높이면 더 이상하고 다양한 결과물이 나오지만, 값이 낮으면 더 일관되고 안정적인 이미지를 얻을 수 있습니다. Chaos 사용법 기본값:
- [멀티 프롬프트와 가중치 이해하기 - 미드저니 강좌 2-5](https://designbase.co.kr/멀티-프롬프트와-가중치-이해하기-미드저니-강좌-2-5/) - 안녕하세요. 이번에는 Midjourney에서 멀티 프롬프트를 사용하는 방법에 대해 알아보겠습니다. 멀티 프롬프트를 활용하면 두 개 이상의 개념을 결합하여 더욱 창의적이고 다채로운 이미지를 생성할 수 있습니다. 멀티 프롬프트의 기본 원리 멀티 프롬프트는 두 개 이상의 개념을 구분하여 입력하고, 이를 개별적으로 고려한 후 하나의 이미지로 결합하는 방식입니다. 구분자는 ::을 사용합니다. 예를 들어, "space ship"은 공상과학 우주선 이미지를 생성하지만,
- [시드를 통해 유사 이미지 생성하기 - 미드저니 강좌 2-4](https://designbase.co.kr/midjourney-02-4/) - 안녕하세요. 이번에는 미드저니에서 시드를 활용해 유사한 이미지를 생성하는 방법을 알아보겠습니다. 마음에 드는 이미지를 생성했는데, 새로운 프롬프트로 다시 시도하면 전혀 다른 결과물이 나올 때가 있어 답답할 수 있습니다. 이럴 때 시드를 활용하면 유사한 느낌의 이미지를 지속적으로 생성할 수 있습니다. 시드를 통한 유사 이미지 생성 시드(Seed) 값을 사용하면 이미지 생성 시 일정한 패턴을 유지할 수 있습니다. 시드
- [패턴 타일 제작하기 - 미드저니 강좌 2-3](https://designbase.co.kr/midjourney-02-3/) - 미드저니에서 이미지 생성을 좀 더 정교하게 하기 위해 네거티브 프롬프트를 활용하는 방법을 배웠습니다. 이제 패턴을 만들 때 유용한 타일 기능에 대해 알아보겠습니다. 타일 기능을 활용하면 반복적으로 사용할 수 있는 패턴을 쉽게 제작할 수 있습니다. 미드저니에서 패턴 타일 제작하기 타일 기능을 사용하면 이미지가 타일처럼 반복적으로 연결되는 패턴을 만들 수 있습니다. 이 기능은 벽지나 배경 패턴을 디자인할
- [이미지 비율, 스타일라이즈, 모델 설정하기 - 미드저니 강좌 2-2](https://designbase.co.kr/midjourney-02-2/) - 이번에는 이미지 비율, 스타일라이즈, 모델 설정을 배워볼게요. 미드저니 이미지 비율 설정 : --ar 이미지의 비율을 설정할 때 사용되며, 주로 16:9, 4:3, 1:1, 9:16 이렇게 사용합니다. 아무것도 입력하지 않은 경우 1:1 비율로 적용됩니다. --ar 4:3 미드저니 스타일라이즈 스타일라이즈 옵션은 이미지에 스타일을 더하는 정도를 조절할 수 있습니다. 값이 높을수록 더 강한 스타일이 적용됩니다. 기본 값은 100이며,
- [이미지 업스케일 & 이미지 베리에이션 작업 - 미드저니 강좌 1-6](https://designbase.co.kr/midjourney-01-6/) - 안녕하세요, 이번 영상에서는 미드저니의 이미지 업스케일 & 베리에이션 기능을 소개합니다. 생성된 이미지를 업스케일하여 해상도를 높이는 방법과, 베리에이션을 통해 다양한 스타일의 이미지를 만드는 방법을 배워보겠습니다. 각각의 기능 사용법과 활용 팁을 자세히 설명해 드릴게요. 이미지 업스케일 & 이미지 베리에이션 이미지 생성 이후에 하단에 U1~4, V1~4 이런 텍스트로된 버튼이 있습니다. 여기서 이미지의 순서를 이해해야 합니다. 왼쪽 상단부터 1번,
- [특정 이미지 URL 결합하기 - 미드저니 강좌 1-5](https://designbase.co.kr/midjourney-01-5/) - 안녕하세요. 이번에는 미드저니에서 특정 이미지의 url을 가지고 결합하는 방법을 다뤄볼게요. 특정 이미지 스타일을 참고해서 프롬프트와 함께 출력됩니다. 특정 url 불러와서 이미지 결합하는 방법 왼쪽 이미지의 이미지 주소를 복사해서 기존 프롬프트를 결합한 경우, 복장과 스타일, 컬러 등 전반적인 느낌이 결합된 모습을 볼 수 있습니다. /imagine prompt , 아래는 a cut dog이라는 프롬프트로 생성된
- [미드저니로 이미지 생성 및 조합 - 미드저니 강좌 1-4](https://designbase.co.kr/midjourney-01-4/) - 안녕하세요. 드디어 기본 세팅이 끝났네요. 잘 따라오고 계시죠? 이번에는 이미지 생성 및 조합에 대해 다뤄볼게요. 전혀 어려운 것은 없습니다. 과거처럼 디스코드에서만 되던 것과 다르게 웹사이트에 하셔도 되고, 디스코드에서 하셔도 괜찮습니다. 앞으로 미드저니에 대한 기능설명이 필요한 경우에만 웹과 디스코드 둘다 보여드리고, 그게 아닌경우에는 웹 위주로 설명드릴게요. 미드저니로 이미지 생성하기 채팅 영역에 /imagine 를 치고 prompt라고 나타나면
- [사용자 인터페이스 디자인을 위한 10가지 사용성 휴리스틱 - UXUI 디자인 강좌 5-16](https://designbase.co.kr/uxui-05-16/) - UXUI 디자인은 사용자에게 직관적이고 스트레스를 덜 주는 상호작용을 제공함으로써 좋은 사용성과 사용자 경험을 보장하는 것을 목표로 합니다. 이를 위해 평가해야 할 기준으로 제이콥 닐슨이 제안한 10가지 휴리스틱 원칙을 소개합니다. 이 원칙을 준수하면 제품의 UX 퀄리티를 일정 수준 이상으로 높일 수 있습니다. 휴리스틱을 사용하기 좋은 기준 제품 UX의 퀄리티를 일정 수준 이상으로 높일 때 전문 인력이
- [디스코드 개인서버 만들기 및 설정 - 미드저니 강좌 1-3](https://designbase.co.kr/midjourney-01-3/) - 안녕하세요. 미드저니 강좌를 시작합니다~! 미드저니(Midjourney)는 복잡한 설치 과정 없이 누구나 쉽게 고퀄리티의 그래픽 이미지를 생성할 수 있는 AI 도구입니다. 해당 강좌를 통해서 미드저니 사용법과 어떻게 하면 더 좋은 이미지를 생성할 수 있는지, 다양한 예제를 통해 학습해보겠습니다. 또한, 미드저니를 사용하여 디자인 작업을 효율적으로 수행하는 방법에 대해 알아보겠습니다. 개인서버 만들기와 디스코드 설정 살펴보기 본격적으로 이미지를 생성하기 이전에
- [미드저니를 배워야 하는 이유 - 미드저니 강좌 1-1](https://designbase.co.kr/midjourney-01-1/) - 안녕하세요. 미드저니 강좌를 시작합니다~! 미드저니(Midjourney)는 복잡한 설치 과정 없이 누구나 쉽게 고퀄리티의 그래픽 이미지를 생성할 수 있는 AI 도구입니다. 해당 강좌를 통해서 미드저니 사용법과 어떻게 하면 더 좋은 이미지를 생성할 수 있는지, 다양한 예제를 통해 학습해보겠습니다. 또한, 미드저니를 사용하여 디자인 작업을 효율적으로 수행하는 방법에 대해 알아보겠습니다. 인공지능에 대한 반대와 우려 많은 사람들이 인공지능에 대해 반대하거나
- [디스코드 내 미드저니, 미드저니 웹사이트 살펴보기 - 미드저니 강좌 1-2](https://designbase.co.kr/midjourney-01-2/) - 안녕하세요. 이번에는 미드저니 웹사이트를 살펴보고, 디스코드에서 미드저니를 사용하는 방법도 배워보겠습니다. 참고로 미드저니는 유료 플랜을 결제하셔야지만 사용 가능합니다! 로그인 이후 미드저니 웹사이트 살펴보기 Explore 메뉴 로그인 후, "Explore" 메뉴를 통해 다른 사용자들이 올린 결과물을 구경할 수 있습니다. 다양한 스타일의 이미지를 어떤 프롬프트로 생성했는지 확인할 수 있으며, 우측 상단의 "Search Prompts" 기능을 통해 원하는 키워드로 검색할 수
- [웹사이트 최적화하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-5/) - 안녕하세요! 오늘은 웹사이트 최적화에 대해 알아보겠습니다. 워드프레스를 활용하여 속도를 높이고 SEO 최적화를 신경써서 웹사이트를 최적화하는 방법을 알려드리겠습니다. 최적화란? 웹사이트 최적화는 사용자 경험을 향상시키고 검색 엔진 최적화를 위해 웹사이트의 성능과 속도를 개선하는 작업을 말합니다. 웹사이트가 빠르고 사용하기 편하면 사용자들이 더 오래 머무르고, 검색 엔진에서도 높은 순위를 얻을 수 있습니다. 속도 높이는 방법 웹사이트 속도를 높이기 위해
- [검색 엔진 최적화 하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-4/) - 이번 글에서는 검색 엔진 최적화를 도와주는 All in One SEO라는 워드프레스 플러그인에 대해 소개하겠습니다. 이 플러그인은 웹사이트를 운영하는 데 필수적이며, 제대로 설정하지 않으면 웹사이트의 존재 이유가 퇴색될 수 있습니다. 따라서 검색 엔진 최적화는 웹사이트를 노출시키고 정보를 전달하기 위해 매우 중요한 작업입니다. SEO란? SEO는 '검색 엔진 최적화'의 약자로, 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는
- [웹 호스팅 서버에 쉽게 마이그레이션하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-2/) - 이번에는 플러그인을 사용해서 쉽게 로컬 서버에서 호스팅 서버로 마이그레이션하는 방법을 배워볼게요. 테마 스타일뿐만 아니라, 계정, 글, 첨부파일 등 다양한 데이터베이스까지 이전을 쉽고 안정적으로 할 수 있습니다. 마이그레이션이란? 마이그레이션은 소프트웨어 개발에서 새로운 시스템으로의 전환 또는 업그레이드 과정을 의미합니다. 이 과정은 데이터베이스, 애플리케이션, 서버 또는 운영 체제 등의 기술적 요소에 대한 변화를 포함합니다. 1. 기존 사이트에서 데이터
- [워드프레스에 인스타 피드 만들기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-14/) - 이번에는 워드프레스에서 Smash Balloon Instagram Feed 플러그인을 활용해서 인스타그램 피드를 웹사이트 내 원하는 곳에 추가해볼게요. 플러그인을 사용하고 인스타그램 연동하고 숏코드로 넣는것까지 해보겠습니다. 1. Smash Balloon Instagram Feed 플러그인 활성화 먼저, 워드프레스 관리자 대시보드에서 Smash Balloon Instagram Feed 플러그인을 활성화합니다. 2. 인스타그램 계정 연결 플러그인을 활성화한 후, 다음 단계를 따라 인스타그램 계정을 연결합니다. 2.1. Add Source
- [브레드크럼 만들어 적용하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-13/) - 이번에는 워드프레스에서 만들어놓은 브레드 크럼 함수를 활용해서 웹사이트에 적용해볼게요. 정확히 말하면, 코드를 처음부터 다 짜는게 아니라, 있는 코드에 대해 짧게 설명드리고, 일부 수정할 수 있게 주석을 달아놨습니다. 원하는 위치에 어떻게 넣고 스타일링을 하는지를 배워볼거예요. (처음부터 다 짜면 너무 오래걸리고 어렵습니다.) 1. 브레드크럼 함수 소개 브레드크럼(Breadcrumb)은 사용자가 현재 웹사이트 내에서 위치한 페이지의 경로를 보여주는 내비게이션 요소입니다.
- [커스텀 사이드바 추가하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-12/) - 이번에는 워드프레스에서 커스텀 사이드바를 추가하는 방법을 알려드릴게요. 크게 4단계로 나눠서 진행할 거예요. function.php에 사이드바 등록하는 함수를 만들 sidebar.php 내에 만든 커스텀 사이드바를 추가하기 해당 사이드바를 원하는 페이지에 추가하기 마지막으로 제대로 동작하는지 확인 사이드바를 나눠서, 관리하고 싶을 수 있잖아요? 그럴 때 추가하면 됩니다. 단계 1: functions.php에 사이드바 등록하기 우선 functions.php 파일을 열어 다음 코드를 추가합니다. 이
- [워드프레스 CSS로 웹사이트 스타일링  - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-8/) - 이번 영상에서는 워드프레스에서 웹사이트 스타일링을 하기 위해 CSS를 사용하는 방법에 대해 배워볼게요. 워드프레스에서 스타일은 기본적으로 style.css 파일입니다. 어떤 css 파일을 수정해야 스타일이 바뀌는지, function.php 내에서 style.css를 어떻게 연결하는지 등을 배워볼게요. functions.php에서 스타일 파일 로드하기 우선, functions.php 파일을 열어 스타일 파일을 등록하고 로드하는 방법을 확인해보겠습니다. function supernormal_style_sheet() { // 스타일시트 로드 wp_enqueue_style('supernormal-style', get_stylesheet_directory_uri() . '/assets/css/style.min.css'); }
- [관련 글 추가하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-11/) - 이번에는 워드프레스에서 관련 글 템플릿 만드는 방법을 알아볼게요. 이번에도 배열에 속성 넣는 부분이 중요합니다. 1. 기본 관련 글 템플릿 기본적으로 관련 글을 표시하는 템플릿을 작성합니다. 이 템플릿은 현재 글과 같은 카테고리에 속한 다른 글을 보여줍니다. 코드 설명
- [if문으로 특정 상황에만 코드 출력하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-9/) - 이번에는 워드프레스에서 WP_Query를 사용해서 Custom post type 관련 글을 불러오는 방법에 대해 알려드릴게요. 저번 영상에서 다뤄본 내용과 거의 똑같아서 크게 어렵지 않습니다. 워드프레스에서 if 문은 다양한 상황에서 조건을 체크하고, 조건에 따라 다른 동작을 수행하도록 할 때 매우 유용합니다. 실제로 워드프레스 사이트를 개발할 때 자주 사용되는 몇 가지 if 문 예시를 살펴보겠습니다. 썸네일 있는지 없는지 체크
- [슬라이드 배너 템플릿 제작하기(swiper.js) - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-10/) - 이번에는 워드프레스에서 슬라이드 배너를 만드는 방법을 알려 드릴게요. swiper.js를 사용해볼 것이고, 실제 글 데이터를 넣어서 사용하는 방법을 배워볼게요. 파일 생성 먼저, 필요한 파일들을 생성합니다. 예를 들어, templates 폴더를 만들어 carousel-banner.php와 content-work-slide.php 파일을 생성합니다. 1. carousel-banner.php 캐로셀 배너의 메인 코드를 포함하는 파일입니다.
- [WP_Query로 Custom Post Type 글 불러오기 - 워드프레스 강좌](https://designbase.co.kr/wp_query로-custom-post-type-글-불러오기-워드프레스-강좌/) - 이번에는 워드프레스에서 WP_Query를 사용해서 Custom post type 관련 글을 불러오는 방법에 대해 알려드릴게요. 저번 영상에서 다뤄본 내용과 거의 똑같아서 크게 어렵지 않습니다. WP_Query로 CPT 데이터 불러오기 WP_Query를 사용하여 특정 커스텀 포스트 타입의 데이터를 쿼리하는 방법은 기본 포스트 쿼리와 비슷합니다. 코드 샘플
- [워드프레스 커스텀 필드 사용하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-6/) - 이번에는 워드프레스에서 제공하는 커스텀 필드가 뭔지 알아보고, 어드민에서 직접 작성해서, 실제 웹사이트에 노출시키는 방법을 배워보도록 할게요. 커스텀 필드란, 포스트, 페이지, 사용자 정의 포스트 유형 등과 관련된 추가 메타데이터를 저장하는 데 사용되는 키-값의 쌍입니다. 예를 들면, 채널명, 디자인 베이스 와 같은 것이죠. 이 키값만 알면, value 값을 불러올 수 있는 거예요. 이 기능을 알면 웹사이트 내에
- [WP_Query로 특정 카테고리 글 불러오기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-7/) - 이번에는 워드프레스에서 특정 글을 불러올 때 사용하는 WP_Query에 대해 알려드릴게요. 저번에 배열과 함수, 조건문, 반복문 이렇게 배워봤죠. 그런 개념들이 워드프레스에서 가장 많이 사용된 부분이 WP_Query라고 생각합니다. 워드프레스 개발을 하다 보면, 특정 조건에 맞는 포스트를 불러와야 하는 경우가 많습니다. 이를 위해 주로 WP_Query 클래스를 사용합니다. WP_Query는 조건에 맞는 포스트를 쉽게 쿼리할 수 있는 강력한 도구입니다. 이
- [워드프레스에서 자주 사용되는 페이지, 컴포넌트 관련 내장 함수 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-5/) - 저번 시간까지 php 기본 문법을 배워봤는데, 이번에는 워드프레스에서 기본적으로 제공하는 내장 함수에 대해 좀 더 다양하게 배워볼게요. 어떻게 하는지 알아보기 이전에, 이걸 왜 알아야 하는지 살펴볼게요. 이번 시간에는 페이지 또는 컴포넌트에서 자주 사용할 수 있는 워드프레스 내장 함수를 살펴보겠습니다. 이전 챕터에서 PHP 코드를 어느 정도 이해한 상태에서 이 함수들을 보면 더 잘 이해할 수 있을
- [워드프레스에서 자주 사용되는 콘텐츠 관련 내장 함수 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-4/) - 저번 시간까지 php 기본 문법을 배워봤는데, 이번에는 워드프레스에서 기본적으로 제공하는 내장 함수에 대해 좀 더 다양하게 배워볼게요. 어떻게 하는지 알아보기 이전에, 이걸 왜 알아야 하는지 살펴볼게요. 워드프레스는 다양한 내장 함수를 제공하여, 콘텐츠를 동적으로 불러오고, 페이지의 다양한 정보를 출력할 수 있게 해줍니다. 이번 시간에는 워드프레스 내장 함수의 기본 사용법과 몇 가지 유용한 함수들을 살펴보겠습니다. 동적인 것과
- [워드프레스 PHP 코드 파악하기2(조건문, 반복문, 배열) - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-3/) - 안녕하세요. 저번 시간에 이어서 php 코드를 이해하는 시간을 가져볼게요. 조건문, 반복문, 배열을 배워볼게요. 조건문 조건문은 특정 조건에 따라 코드를 실행하거나 실행하지 않게 하는 구조입니다. if문, else문, elseif문을 사용하여 다양한 조건을 처리할 수 있습니다. 기본 조건 예시: 모바일 체크
- [워드프레스 PHP 코드 파악하기(변수, 함수, 내장함수) - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-2/) - 안녕하세요. 이번 시간에는 php 코드를 이해하는 시간을 가져볼게요. php가 무엇인지, 그리고 우리가 이 언어를 어떻게 공부할 것인지, 그리고 간단한 실습을 통해 맛보기를 해보도록 할게요. php 기초 문법을 배워볼 텐데, 변수, 함수, 내장함수를 배워볼게요. PHP란? PHP는 1995년에 처음 출시된 서버 사이드 스크립팅 언어로, 동적인 웹 페이지를 만들기 위해 설계되었습니다. 워드프레스는 PHP로 작성된 콘텐츠 관리 시스템(CMS)입니다. 최근
- [워드프레스 고급 강의 소개 - 워드프레스 강좌](https://designbase.co.kr/wordpress-04-1/) - 안녕하세요. 드디어 챕터 4 고급 강의 소개 영상입니다. 이번 챕터에서는 좀 더 디테일하게 웹사이트를 수정하기 위해 알아야 하는 고급 기술들을 알려드릴 거예요. 워드프레스 챕터 4에서 배워볼 내용 php 코드 문법을 짧게 맛보기 워드프레스에서 제공하는 내장 함수들 몇 가지 살펴보기 커스텀 컴포넌트도 만들어서 사용 글 작성 시 커스텀 필드 사용하는 방법 if 문으로 특정 상황일 때
- [워드프레스 커스텀 포스트 타입(CPT) 설정하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-14/) - 예전 영상부터 간간히 나왔던 용어죠. 이번에 워드프레스에서 Custom Post Type에 대한 개념과 플러그인을 활용해서 등록하는 방법을 확실히 배워볼게요. 커스텀 포스트 타입이란? 우선, 커스텀 포스트 타입(Custom Post Type)은 워드프레스에서 기본적으로 제공하는 포스트(Post)와 페이지(Page) 이외에도 사용자가 원하는 새로운 컨텐츠 유형을 추가하는 기능입니다. 줄여서 CPT라고도 합니다. 예를 들어, 만약 사이트에서 포트폴리오 정보를 제공하는 웹사이트를 운영한다면, "포트폴리오"라는 새로운 커스텀
- [워드프레스에 외부 라이브러리 Swiper.js 추가하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-13/) - 이번 영상에서는 외부 라이브러리를 워드프레스에 연결해서 사용하는 방법을 알아볼게요. 전에 js, css 파일을 워드프레스에서 올바르게 연결하는 방법을 배워봤죠. swiper.js 라고 슬라이드 배너를 쉽게 만들어주는 라이브러리가 있습니다. 이걸 사용해서 워드프레스에 적용하는 방법을 배워볼게요. (챕터 4에서는 특정 콘텐츠와 결합하는 방식을 배워볼 예정입니다.) 1. Swiper.js 파일 다운로드 Swiper.js 파일을 직접 다운로드하여 테마 경로에 넣어줍니다. Swiper.js 다운로드: Swiper.js CDN
- [워드프레스에 a 태그 링크 연결하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-12/) - 이번 영상에서는 워드프레스에서 a 태그에 링크 올바르게 연결하는 방법을 알려드릴게요. a 태그로 페이지 이동을 주로 하죠. 이때 워드프레스에서는 특정 방법이 필요합니다. 기존 html과 워드프레스 내 php로 작성법의 차이를 보여드릴게요. HTML 내 A 태그 HTML에서는 단순히 href 속성에 URL을 지정하여 링크를 만듭니다. 링크 워드프레스 PHP 내 A 태그 워드프레스에서는 PHP 함수를 사용하여 동적으로 URL을
- [워드프레스 functions.php 파악하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-10/) - 이번 시간에는 워드프레스에서 중요한 기능을 담당하는 functions.php 파일에 대해 알아볼게요. 워드프레스 functions.php 파일은 워드프레스 웹사이트를 기능적으로 만드는 중요한 PHP 기능을 담고 있는 강력한 운영 파일입니다. WordPress에는 함수 파일의 위치는 설치한 테마 내의 루트에 functions.php라는 자체 파일이 있습니다. 만약 잘못 입력하게 되면, 웹사이트가 동작하지 않기 때문에 충분히 공부하고 백업해둔 이후 수정하는 것을 추천드립니다. functions.php 파일 위치
- [워드프레스에 js, css 올바르게 삽입하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-11/) - 이번 시간에는 워드프레스에서 자바스크립트(JS)와 CSS 파일을 올바르게 연결하는 방법에 대해 배워보겠습니다. 워드프레스에서 스크립트와 스타일시트를 등록하고 로드하는 방법을 알아보겠습니다. 워드프레스에 스크립트와 스타일시트를 등록하는 이유 기존의 HTML 파일에서 외부 스타일시트와 자바스크립트를 연결하는 방법도 있지만, 워드프레스에서는 특정 페이지나 특정 조건을 지정하여 스크립트를 로드할 수 있는 장점이 있습니다. 이를 위해 wp_enqueue_script와 wp_enqueue_style 함수를 사용합니다. 워드프레스에 스크립트 등록과 로드 function
- [워드프레스에서 SASS 사용법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-9/) - 이번 시간에는 워드프레스에서 sass를 사용하는 방법에 대해 배워볼게요. 저번 영상에서 style.css를 직접 수정하는 방법을 배워봤는데요. 효율적인 스타일 관리를 위해 sass를 사용하는 것을 추천드립니다. 이번 영상에서 sass 문법을 막 전체적으로 자세히 알려드리진 않을 거고요. 이게 왜 좋은지 와 워드프레스에서 어떻게 사용하는 설정하는 방법, 그리고 제가 테마 만들 때 세팅해놨던 SASS 폴더 구조를 활용하는 방법을 알려드릴 거예요.
- [워드프레스에 코드로 이미지 에셋 추가하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-7/) - 이번 영상에서는 워드프레스에서 이미지를 올바르게 넣는 방법에 대해 배워볼게요. 특정 라이브러리나 플랫폼을 사용하면, 그들만의 규칙이 있습니다. 리액트에서도 경로를 불러와서 해당 경로를 넣는 방식인 것처럼, 워드프레스도 그에 맞는 방식이 필요하죠. HTML과 리액트에서 이미지 경로 사용법 코드마다 이미지를 불러오는 방식이 조금 다릅니다. 아래는 HTML과 리액트에서 불러오는 방식 예시입니다. 하지만, 워드프레스는 php 기반이다보니, 워드프레스에서 제공하는 자체 내장 함수와
- [워드프레스 숏코드 사용법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-6/) - 이번 영상에서는 숏 코드 사용법에 대해 배워볼게요. 숏 코드란, 워드프레스 어드민 페이지에서 글이나 페이지 만들 때 에디터에 특정 형식으로 숏 코드를 넣으면, 해당 숏 코드가 가지고 있는 함수에 따라 동적으로 콘텐츠를 불러오는 기능입니다. 워드프레스 숏코드란? 워드프레스에서 숏코드는 동적 콘텐츠를 쉽게 삽입할 수 있는 간단한 코드입니다. 예를 들어, 최신 글 목록을 불러오고 싶다면 아래와 같이 숏코드를
- [워드프레스 계층 (Hierarchy) 이해하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-5/) - 이번 영상에서는 워드프레스 내에서 템플릿을 만들 때 꼭 알아야 할 위계 질서에 대한 규칙이 있습니다. 위계 질서에 따라 php 파일이 어떤 페이지에 적용되어서 뜨는지 정할 수 있습니다. 이 개념을 익혀야 해당 테마 내에 커스터마이징 해야 할 템플릿 파일을 결정하는 데 도움이 됩니다. 워드프레스에서 계층(Hierarchy)이란? 워드프레스에서 템플릿 계층(Template Hierarchy)은 워드프레스가 특정 페이지를 렌더링할 때 어떤 템플릿
- [워드프레스 템플릿 페이지 생성 및 적용 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-4/) - 이번에는 템플릿 페이지를 만들고 적용하는 방법을 배워볼게요. 저번 챕터에서 페이지 만들 때 템플릿을 짧게 봤던 거 기억하시나요? 이렇게 생겼는데, 여기에 만약 페이지 스타일을 어드민에서 바꾸고 싶을 때 템플릿을 사용합니다. 워드프레스 템플릿 페이지 생성하는 방법 새 템플릿 파일 만들기 먼저, 워드프레스 테마 폴더 내에서 새 PHP 파일을 만듭니다. 예를 들어, blog-template.php라는 파일을 생성합니다. 템플릿 이름 정의
- [워드프레스 기능별 php 파일 파악 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-3/) - 이번에는 기능별 php 파일을 파악하는 시간입니다. 직접 php를 깊이 있게 작성하는 시간이 아니라서 대략 어떤 파일이 어디에 있는지, 이런 것만 이해하는 과정이라고 생각하시면 됩니다. 모든 파일은 중요하지만, 가장 많이 사용되는 것부터 다뤄볼게요. 워드프레스 내 주요 페이지 파일 front-page.php 홈 페이지로 들어왔을 때 표시되는 메인 페이지입니다. 글을 수정하거나 위치를 변경하여 자유롭게 변형이 가능합니다. index.php 기본 메인
- [워드프레스 구조 파악하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-2/) - 이번에는 워드프레스를 깊이 있게 코드를 작성하기 이전에 기본적으로 알아야 하는 워드프레스의 구조를 파악하는 시간입니다. 우리가 예전에 설치했던 워드프레스 폴더를 살펴볼 건데, 직접 코드를 짜는 건 아니기 때문에 너무 걱정하지 않으셔도 괜찮습니다. 시간 관계상 어떤 게 어디에 있고 이런 걸 세세하고 완벽하게 다 배우진 않겠지만, 우리가 꼭 알아야 하는 구조를 배워보도록 할게요. 워드프레스 폴더 구조 파악하기!
- [워드프레스 중급 강의 소개 - 워드프레스 강좌](https://designbase.co.kr/wordpress-03-1/) - 안녕하세요. 드디어 챕터 3 중급 강의 소개 영상입니다. 저번 챕터까지는 워드프레스 어드민을 통해 페이지도 만들고, 글도 쓰고, 메뉴도 관리하고, 테마와 플러그인도 설치를 해봤습니다. 챕터 2까지만 배워도 웹사이트를 운영하는데 크게 문제는 없습니다. 하지만, 본인만의 웹사이트로 커스터마이징 하기 위해서 꼭 알아야하는 개념들이 있습니다. 예를 들면, 워드프레스 파일 구조를 파악하고, 하이어라키를 이해해서 템플릿도 만들고, 이미지를 추가하거나 SCSS 코드를
- [설정 메뉴 이해하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-14/) - 안녕하세요. 이번에는 워드프레스 설정 메뉴를 알아볼게요. 설정 메뉴 - 일반, 쓰기, 읽기, 토론, 미디어, 고유주소, 개인정보 보호 이렇게 있습니다. 저번에 토론에 대해서 배워봤는데, 그걸 제외하고 알아볼게요. 일반 설정 일반 설정 메뉴에서는 사이트의 기본 정보를 설정할 수 있습니다. 사이트 제목: 웹사이트의 이름을 설정합니다. 태그라인: 사이트 설명 또는 슬로건을 설정합니다. 워드프레스 주소 (URL): 워드프레스가 설치된 디렉토리의 URL을
- [도구 메뉴 이해하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-13/) - 이번에는 워드프레스 도구 메뉴에 대해 배워볼게요. 도구란 워드프레스에서 기본적으로 제공하는 도구가 있습니다. 크게 중요한 메뉴는 아니지만, 대략 어떤 기능을 제공하는지 한 번만 살펴보면, 나중에 필요할 때 사용하시면 됩니다 도구 내 메뉴 6가지 사용할 수 있는 도구 가져오기 내보내기 사이트 건강 개인정보 내보내기 개인정보 삭제 사용할 수 있는 도구 이 항목은 워드프레스에서 사용할 수 있는 기본적인
- [사용자 메뉴 이해하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-12/) - 오늘은 사용자 메뉴에 대해 배워볼게요. 처음 들어가면 본인 계정 하나만 있을거예요. 사용자명이랑 이름, 이메일, 역할, 글, ip 이런 정보를 담고 있죠. 클릭해보면 프로필을 설정할 수 있는 옵션들이 있어요. 아래는 정보들이고, 사용자명 제외하고 다 변경이 가능합니다. 사용자 메뉴 소개 처음 사용자 메뉴에 들어가면 본인 계정 하나만 있을 것입니다. 여기에는 사용자명, 이름, 이메일, 역할, 글, IP 등의
- [워드프레스 추천 플러그인 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-11/) - 이번에는 상황별 필요한 플러그인을 소개해 드립니다. 플러그인에 대해 모든 걸 자세히 다루기엔 너무 많은 시간이 걸려서 제가 알고 있는 플러그인 중 괜찮은 것들을 추천해 드릴게요. 그중 몇 가지는 다른 챕터에서 문맥에 맞게 다뤄볼 예정입니다. *추천일 뿐 필수로 다 설치하실 필요는 없습니다. 추천 플러그인 목록 유용한 플러그인 Yoast 글 복제 기능: 글을 쉽게 복제할 수 있는
- [워드프레스 플러그인에 대한 이해와 플러그인 설치 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-10/) - 이번 영상에서는 워드프레스에서 플러그인에 대한 것과 설치하는 방법을 알아보는 시간입니다. 플러그인이란? ‘플러그인 또는 추가 기능은 호스트 응용 프로그램과 서로 응답하는 컴퓨터 프로그램이며, 특정한 "주문식" 기능을 제공한다.’ - 위키백과 어렵죠..? 워드프레스 기준으로 쉽게 설명드려보면, 기본으로 제공하는 본판에 코드로 이루어진 기능을 추가해서 더 유용하게 쓸 수 있게 도와주는 것을 말합니다. 플러그인이란? 위키백과에 따르면, 플러그인 또는 추가 기능은
- [웹사이트 메뉴 설정하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-9/) - 이번 시간에는 워드프레스의 메뉴 설정에 대해 상세히 알아보겠습니다. 메뉴 설정은 웹사이트의 헤더, 푸터 등 다양한 위치에 네비게이션을 조절하는 기능을 제공합니다. 상단에는 메뉴 편집과 위치 관리 두 가지 주요 기능이 있습니다. 외모 > 메뉴 편집 메뉴 편집에서는 특정 위치에 메뉴 구조를 추가하는 방식으로 메뉴를 설정할 수 있습니다. 예를 들면, 헤더나 푸터, 사이드바에 사용되는 메뉴를 관리할 수
- [워드프레스 위젯 설정하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-8/) - 안녕하세요! 이번 시간에는 워드프레스의 위젯에 대해 알아보겠습니다. 위젯은 웹사이트의 다양한 위치에 요약 정보를 제공하는 작은 블록입니다. 위젯을 사용하면 사이드바나 푸터에 쉽게 콘텐츠를 추가할 수 있습니다. 워드프레스 위젯이란? 위젯은 우리가 스마트폰을 사용할 때 볼 수 있는 요약 정보 블록과 유사합니다. 워드프레스에서도 위젯을 통해 다양한 정보를 쉽게 접근할 수 있도록 합니다. 위젯 사용법 위젯을 사용하는 방법은 아주
- [워드프레스 테마 설치 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-7/) - 안녕하세요! 이번 시간에는 워드프레스 테마에 대해 알아보겠습니다. 테마는 워드프레스 웹사이트의 디자인과 기능을 정의하는 중요한 요소입니다. 이번 강의에서는 테마의 개념, 자식 테마의 필요성, 그리고 제가 직접 만든 테마를 설치하고 활성화하는 방법을 소개합니다. 테마란? 테마는 누군가가 사용할 수 있도록 미리 만들어진 디자인과 기능의 집합입니다. 다양한 테마가 있으며, 크게 무료와 유료로 나눌 수 있습니다. 또한, 사용자가 직접 테마를
- [워드프레스 관리자 외모 페이지 메뉴 이해하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-6/) - 이번에는 외모 메뉴에 대해 배워볼게요. 외모 메뉴는 웹사이트 프론트에 대한 영역입니다. 테마, 사용자 정의하기, 메뉴, 테마 파일 편집기 이렇게 있습니다. 테마란? 테마라는 것은 누군가가 사용할 수 있도록 만들어 놓은 것입니다. 다양한 테마가 있는데 크게 무료와 유료로 나눠져있습니다. 혹은 본인이 직접 테마를 제작할수도 있습니다. 남이 만들어놓은 테마도 추가가 가능합니다. 테마는 다음 영상에서 제대로 다뤄볼게요. 워드프레스 테마란?
- [워드프레스 관리자 페이지 내 댓글 메뉴 이해하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-5/) - 안녕하세요! 이번 시간에는 워드프레스의 댓글 메뉴에 대해 알아보겠습니다. 워드프레스는 기본적으로 댓글 기능을 제공하여 사용자와의 상호작용을 도와줍니다. 워드프레스 댓글 메뉴 소개 댓글 메뉴는 매우 간단한 구조로 되어 있습니다. 누군가가 글에 댓글을 달면, 해당 댓글이 댓글 탭에 쌓이게 됩니다. 여기에서 댓글을 관리할 수 있습니다. 댓글 관리 기능 댓글 삭제: 원치 않는 댓글을 삭제할 수 있습니다. 댓글 승인/거부:
- [페이지 메뉴로 페이지 설정하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-4/) - 안녕하세요. 이번에는 페이지 메뉴에 대해 배워볼게요. 페이지가 무엇인지, 페이지를 생성하고 그 페이지를 에디터 기능으로 꾸미고 발행하는 방법을 알아볼게요. 그리고, 워드프레스에서 중요한 개념인 글(post)과 페이지(page)의 차이가 뭔지도 살펴보도록 할게요. 워드프레스에서 글과 페이지의 차이 페이지 메뉴는 이전에 배운 글 메뉴와 비슷하지만, 몇 가지 차이점이 있습니다. 글(Post): 블로그처럼 글을 지속적으로 작성하는 경우에 사용합니다. 페이지(Page): 어바웃 페이지나 컨택트 페이지처럼
- [초급 워드프레스 어드민 미디어 메뉴로 이미지, 영상 관리하기(업로드, 수정, 삭제) - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-3/) - 안녕하세요. 이번에는 미디어 메뉴에 대해서 배워볼게요. 미디어는 말그대로 이미지, 오디오, 비디오, 문서, 스프레드시트 등의 다양한 미디어를 올리는 저장공간입니다. 이미지나 영상을 올려서 이걸 글쓰기나, 페이지 꾸밀때 에디터 툴에서 불러와 활용할 수 있습니다. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를
- [글 메뉴로 간편하게 글 작성하기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-2/) - 안녕하세요. 이번에는 관리자 페이지에서 제공하는 글 메뉴를 활용해서 간편하게 글을 작성해보는 시간을 가져볼게요. 글 생성, 수정, 삭제를 알아보고, 글 관련된 카테고리와 태그에 대한 개념도 같이 배워볼게요. 글 에디터에서 어떤식으로 글을 작성하고, 이미지와 영상, 유튜브 임베드와 같은 것들도 넣는 방법을 같이 살펴볼게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다.
- [워드프레스 관리자 페이지 살펴보기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-02-1/) - 안녕하세요. 이번에는 로컬에 설치한 워드프레스에 들어가서 관리자 페이지에 어떻게 접근하고, 전체적으로 어떻게 생겼는지 대략적으로 살펴볼게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 워드프레스 관리자 페이지에 접속하는 방법 워드프레스 어드민 페이지에 접속하려면 URL 뒤에 /wp-admin을 추가하면 됩니다. 로컬
- [워드프레스 커리큘럼 살펴보기 - 워드프레스 강좌](https://designbase.co.kr/wordpress-01-2/) - 바로 워드프레스를 사용하기 앞서서 이 강의를 통해 우리가 어떤 내용을 배울 수 있는지 워드프레스 커리큘럼 살펴보는 시간입니다. 크게 5가지의 챕터로 제작했으며, 기초부터 고급까지 배우고, 웹사이트 배포하는 것까지 해보도록 할게요. 워드프레스 강의 커리큘럼 소개 Chapter 01: 강의 소개 및 설치 학습 목표 챕터 소개 워드프레스 및 로컬 서버 설치 VS Code 및 FileZilla 설치 Chapter 02:
- [VS Code 및 Filezilla FTP 설치 - 워드프레스 강좌](https://designbase.co.kr/wordpress-01-4/) - 안녕하세요. 이번에는 코드를 직접 수정할 에디터와 나중에 서버에 작업한 파일을 업로드하거나 내려 받을 때 사용할 FTP 소프트웨어인 파일질라를 설치하는 방법을 알아볼게요. 당장 코드를 만지진 않을 예정이라서, 설치만 해두시면 됩니다 :) VS Code 다운로드 : https://code.visualstudio.com/ 파일질라 다운로드 : https://filezilla-project.org/ *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은
- [MAMP로 워드프레스 설치 - 워드프레스 강좌](https://designbase.co.kr/wordpress-01-3/) - 안녕하세요. 이번에는 여러분의 컴퓨터에 워드프레스가 동작할 수 있도록 MAMP라는 소프트웨어를 통해 로컬서버를 설치하고, 그 안에 워드프레스를 설치해서 실행까지 해볼게요. MAMP와 워드프레스 다운로드 링크 MAMP : https://www.mamp.info/en/downloads/Wordpress : https://ko.wordpress.org/download/ 워드프레스 종류 워드프레스는 크게 설치형과 가입형 두 가지로 나뉩니다. 1. 가입형 가입형은 매달 비용을 지불해야 하며, 보안 문제로 인해 플러그인, 테마, 사용자 지정 코드 수정 등 기능에
- [본인 만의 포트폴리오 웹사이트 만들기 강좌 소개 - 워드프레스 강좌](https://designbase.co.kr/wordpress-01-1/) - 안녕하세요 여러분~! 워드프레스 강좌를 시작합니다. 워드프레스를 이용해서 본인만의 매력적인 포트폴리오 웹사이트를 만드는 강좌를 시작합니다. 단순히 웹사이트를 만드는 게 다가 아니라, 이 과정을 통해 로컬 설치부터 워드프레스라는 CMS설치, HTML, SCSS를 통해 원하는 구조로 바꾸고, FTP를 통해 호스팅 서버에 올리는 등의 다양한 경험을 통해 웹사이트가 어떤식으로 만들어지는지 충분히 이해할 수 있습니다. 워드프레스 학습 목표 이 강좌를 통해
- [워드프레스 강좌 마무리 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-8/) - 안녕하세요 여러분~! '워드프레스로 개인 웹사이트 만들기' 강의가 마무리되었습니다. 이 동영상이 여러분이 원하는 웹사이트를 만드는 데 큰 도움이 되었기를 바랍니다. 이제 중요한 것은 웹사이트를 왜 만드는지, 어떤 목적을 가지고 운영하는지, 그리고 지속적인 운영과 개선에 주의를 기울이는 것입니다. 공부하는 과정에서 어려움을 겪을 수 있습니다. 그러나 너무 조급해하지 마시고, 차근차근 공부하면서 스트레스를 받는 것도 당연한 일입니다. 그러나 그
- [데이터드리븐 UX 찍먹하기 - UXUI 디자인 강좌 5-15](https://designbase.co.kr/uxui-05-15/) - 안녕하세요! 이번 영상에서는 데이터 드리븐 UX, 즉 데이터를 기반으로 사용자 경험을 설계하고 개선하는 방법에 대해 알아보겠습니다. 데이터 드리븐 UX는 사용자의 실제 행동과 반응을 분석하여 보다 사용자 친화적인 웹사이트나 앱을 만드는데 큰 도움이 됩니다. 이 영상을 통해 데이터 드리븐 UX가 무엇인지, 어떤 장점이 있는지, 그리고 이를 효과적으로 활용하기 위한 주의점들에 대해 자세히 살펴보겠습니다. 또한, 실제 사례를
- [인지 편향: 확증 편향, 직렬 위치 효과, 기준점 편향, 권위에의 호소 편향, 허위 합의 효과, 밴드왜건 효과, 생존자 편향 - UXUI 디자인 강좌 5-14](https://designbase.co.kr/uxui-05-14/) - 안녕하세요! 오늘은 우리의 일상적인 결정에 어떻게 인지 편향이 영향을 미치는지 알아보려고 합니다. 인지 편향이란 우리가 정보를 처리하고 판단할 때 발생할 수 있는 자연스러운 오류인데요, 이는 Amos Tversky와 Daniel Kahneman에 의해 1972년에 처음으로 소개되었습니다. 수 많은 인지 편향이 존재하는 데, 이 영상에서는 확증 편향, 직렬 위치 효과, 기준점 편향, 권위에의 호소 편향, 허위 합의 효과, 밴드왜건
- [인지 심리학 03 : 도허티의 임계, 파레토 법칙, 미적 사용성 효과 - UXUI 디자인 강좌 5-13](https://designbase.co.kr/uxui-05-13/) - 오늘은 인지 심리학과 관련된 효율성 및 최적화의 법칙들을 통해 디자인과 사용자 경험(UX)에 어떻게 접근해야 하는지 알아보겠습니다. 이러한 법칙들은 사용자의 반응과 인터랙션에 깊은 영향을 미치므로, 제품이나 서비스의 사용성을 향상시키는 데 중요한 역할을 합니다. 인지심리학 1. 도허티 임계값 (Doherty Threshold) 도허티 임계값은 컴퓨터와 사용자가 0.4초 이내로 상호작용할 때 생산성이 높아진다는 개념입니다. 1982년 Walter J. Doherty와 Ahrvind J.
- [인지 심리학 02 : 힉의 법칙, 포스텔의 법칙, 목표 그라데이션 효과, 피크엔드 법칙 - UXUI 디자인 강좌 5-12](https://designbase.co.kr/uxui-05-12/) - 안녕하세요! 이번에는 사용자 경험 디자인에서 중요한 네 가지 법칙인 힉의 법칙, 포스텔의 법칙, 목표 그라데이션 효과, 그리고 피크엔드 법칙에 대해 알아보겠습니다. 이 법칙들은 사용자의 의사결정과 행동에 큰 영향을 미치며, 이를 이해하고 적용하면 더 나은 UX/UI 디자인을 구현할 수 있습니다. 인지심리학 1. 힉의 법칙 (Hick's Law) 힉의 법칙은 사용자의 의사결정 시간이 제시되는 선택지의 수와 복잡성에 비례해
- [인지 심리학 01 : 제이콥의 법칙, 피츠의 법칙, 밀러의 법칙, 폰 레스토프 효과, 테슬러의 법칙 - UXUI 디자인 강좌 5-11](https://designbase.co.kr/uxui-05-11/) - 이번 영상에서는 인지 심리학의 기본 원리와 사용자 경험(UX) 디자인에 어떻게 적용할 수 있는지이야기를 해볼게요. 특히 제이콥의 법칙, 피츠의 법칙, 밀러의 법칙, 폰 레스토프 효과, 그리고 테슬러의 법칙을 다룰 건데요. 이러한 원리들이 사용자의 인식, 기억, 주의력 그리고 행동에 어떤 영향을 미치는지 알아보고, UI/UX 디자인을 위한 예시도 같이 준비했습니다. 인지 심리학의 중요성 인식과 주의: 사용자가 중요한 정보에
- [디자인의 기본, 게슈탈트 이론 - UXUI 디자인 강좌 5-10](https://designbase.co.kr/uxui-05-10/) - 안녕하세요! 이번에는 UI 디자인에 큰 도움이 되는 게슈탈트 이론 중 4 가지, 근접성의 법칙(Law of Proximity)과 유사성의 법칙, 공통 영역의 법칙(Law of Common Region), 연속성의 법칙에 대해 알아보겠습니다. 이 이론들은 사용자가 정보를 더 빠르고 쉽게 이해할 수 있도록 도와주는 중요한 원리들입니다. 게슈탈트란? 게슈탈트 이론은 인지심리학의 한 분야로, 사람들이 시각적 요소들을 어떻게 그룹화하여 인식하는지를 설명하는 원리들을
- [멘탈 모델과 어포던스 이해하기 - UXUI 디자인 강좌 5-9](https://designbase.co.kr/uxui-05-9/) - 이번에는 멘탈 모델과 어포던스에 대해 다뤄볼게요.멘탈 모델과 어포던스는 사용자가 제품이나 서비스를 어떻게 이해하고 사용할지 결정하는 중요한 UX 디자인 개념입니다. 여기서 멘탈 모델은 사용자의 내부적인 사고 구조로, 그들이 세상을 어떻게 인식하고 예상하는지를 나타냅니다. 예를 들어, 책을 읽을 때 페이지를 오른쪽에서 왼쪽으로 넘기는 것이 일반적입니다. 어포던스는 디자인이 사용자에게 제공하는 행동 가능성입니다. 즉, 버튼이나 슬라이더 같은 디자인 요소가
- [그럼에도 와이어프레임이 필요한 이유 - UXUI 디자인 강좌 5-8](https://designbase.co.kr/uxui-05-8/) - 이번에는 와이어프레임(Wireframe)에 대해 다뤄볼게요.와이어프레임은 앱 서비스를 설계하는 초기 단계에서, 밑그림과 같은 역할을 하는 도구입니다. 이는 앱이나 웹사이트의 구조를 개략적으로 보여줌으로써, 프로젝트 관련자들이 전체적인 그림을 이해하고, 사용자 경험을 설계하는 데 필수적입니다. 와이어프레임은 UI 디자인이나 프로토타입 전 단계에서 사용되며, 레이아웃, 콘텐츠의 배치, 기능성에 초점을 둡니다. 이를 통해 사용자의 행동과 경로를 시각화하고, 유저 시나리오를 최적화하여 프로젝트의 기술 검토,
- [유저 플로우(User flow) 제대로 이해하기 - UXUI 디자인 강좌 5-7](https://designbase.co.kr/uxui-05-7/) - 안녕하세요. 이번에는 유저 플로우(User flow)에 대해 알아볼게요.유저 플로우, 또는 UX 흐름도는 제품이나 서비스를 사용하는 과정에서 사용자가 겪게 되는 모든 경험을 단계별로 시각화한 도구입니다. 이 도구는 사용자가 서비스를 처음 접하는 순간부터 마지막 단계까지의 모든 가능한 경로를 보여줍니다. 유저 플로우는 특히 초기 프로젝트 단계에서 매우 유용하며, 서비스의 범위를 정의하고 각 페이지의 기능을 크게 파악하는 데 사용됩니다. 플로우
- [CRUD 개념 이해하기 - UXUI 디자인 강좌 5-6](https://designbase.co.kr/uxui-05-6/) - 안녕하세요. 이번에는 CRUD에 대해 알아볼겁니다. CRUD는 데이터 관리와 응용 프로그램 개발에 필수적인 개념입니다. CRUD는 Create(생성), Read(읽기), Update(수정), Delete(삭제)의 약자로, 각각 데이터를 추가, 조회, 수정, 삭제하는 연산을 의미합니다. 이러한 연산들은 데이터베이스 관리는 물론, 다양한 응용 프로그램에서 데이터를 조작하는 기본적인 방법으로 사용됩니다. 이건 결국 서비스 내 화면과 밀접하기 때문에 알아두면 구조를 짜거나 할때 도움이 되겠죠? CRUD는 소프트웨어
- [유저 저니 맵(User Journey Map)으로 기회 찾는 방법 - UXUI 디자인 강좌 5-5](https://designbase.co.kr/uxui-05-5/) - 이제 유저 저니 맵(User Journey Map)에 대해 배워볼게요. 사용자 여정 맵, 사용자 여정 지도라고도 합니다.사용자 여정 지도는 서비스 또는 제품 개선을 위해 사용자 경험을 시간 또는 행동의 흐름에 따라 정리하는 도구입니다. 쉽게 말해서, 유저가 취할 행동을 파악하고 그에 대한 문제와 해결책을 찾기 위한 정형화된 프레임워크입니다.각 프레임워크마다 조금씩 다르지만, 본질적으로 이걸 왜 사용하는지는 같습니다. 형식에 얽매이기
- [페르소나 이해하기 - UXUI 디자인 강좌 5-4](https://designbase.co.kr/uxui-05-4/) - 페르소나와 타깃의 차이점을 설명하고, 페르소나를 사용할 때의 기대 효과와 주의점에 대해 이야기합니다. 페르소나는 사회 역할이나 등장인물을 연기하는 배우에 의해 나타나는 인물로, UX/UI 디자인 과정에서 사용자를 대표하는 가상의 인물로 활용됩니다.타깃은 제품이나 서비스를 이용할 것으로 예상되는 사람들을 의미하는데, 이는 보다 넓은 범위의 인구 통계학적 정보를 포함합니다. 반면, 페르소나는 이러한 타깃 사용자 그룹을 더 세분화하여, 사용자 중심 디자인을
- [말로만 듣던 타깃 이해하기 - UXUI 디자인 강좌 5-3](https://designbase.co.kr/uxui-05-3/) - 사업의 성공을 위해서는 타깃을 정확히 이해하는 것이 중요합니다. 타깃이 구체적이고 좁을수록 제품이나 서비스의 기획이 명확해지고, 효과적인 마케팅 전략을 수립할 수 있습니다.타깃 설정의 중요성과 함께, 타깃에 맞춘 UX/UI 디자인의 중요성을 강조합니다. 피터 틸의 '제로투원'에서 언급한 독점과 경쟁, 그리고 타깃에 따른 디자인 접근법의 차이를 통해, 사업 초기에 타깃을 정확히 설정하고 이해하는 것이 얼마나 중요한지 알아봅니다. 타깃 이해는
- [비타민과 진통제로 본질 파악하기 - UXUI 디자인 강좌 5-2](https://designbase.co.kr/uxui-05-2/) - 서비스 디자인 전, ‘비타민(추가 가치)’과 ‘페인킬러(필수 해결책)’의 개념을 통해 우리가 제공하는 가치의 본질을 파악하는 것이 중요합니다. 비타민: 사용자에게 긍정적인 가치를 추가적으로 제공하는 서비스. 사용자의 삶을 개선하지만, 필수적이지는 않은 요소입니다. 페인킬러: 사용자의 고통이나 문제를 해결해 주는 필수적인 서비스. 사용자에게 있어서 반드시 필요한 해결책을 제공합니다. 각 서비스가 어떤 가치를 사용자에게 제공하는지 판단하는 기준과 이를 바탕으로 한 디자인
- [답 없는 UX 디자인 이해하기 - UXUI 디자인 강좌 5-1](https://designbase.co.kr/uxui-05-1/) - 안녕하세요. 드디어 UX 강의 시작합니다. 첫 번째 영상에서는 UX의 광범위한 개념과 제 개인적인 생각을 공유하고자 합니다. 저는 UX가 정해진 정답이 없는 영역이라고 믿고 있으며, 이에 따라 UI 파트와 달리 명확한 '이렇게 해야 한다'는 가이드라인을 제시하기 어렵다고 생각합니다. 그럼에도 불구하고, 알아두면 도움이 되는 다양한 개념과 사례를 통해 UX에 대한 이해를 넓혀갈 수 있을 겁니다. 제가 제시하는
- [앱 UI 디자인 기본 : 상태(State) 이해하기 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-10/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 꼭 알아야하는 개념 중 하나 인 ‘상태’에 대해 배워볼게요. 상태라는 건 말 그대로, 현재 어떤 상황인지 시각적으로 표현하는 것을 말합니다. 현재 로딩 중이라던지, 클릭할 수 없다던지, 내가 지금 손으로 누르고 있다던지 하는 것들이요.. 다양한 컴포넌트에 대한 상태를 배워보고, 페이지에 대한 상태도 같이 배워볼게요.
- [iOS 앱스토어 스크린샷 이미지 - UXUI 디자인 강좌 4-9](https://designbase.co.kr/uxui-04-9/) - 안녕하세요. 이번 강좌는 iOS 앱스토어 스크린샷 제작에 초점을 맞추었습니다. 앱스토어 제품 페이지에는 최대 10개의 스크린샷을 제공할 수 있으며, 이는 실제 앱 화면 캡처일 필요는 없습니다. 특히, 아이폰 6.5인치와 5.5인치 디스플레이의 스크린샷은 필수 제출 항목입니다. 아이패드용 앱 개발 시에도 특정 해상도와 크기의 스크린샷이 요구됩니다. 앱 스크린샷 제작 시 명심해야 할 사항들은 해상도, 크기, 파일 형식, 배경,
- [iOS 앱 아이콘 파악하기 - UXUI 디자인 강좌 4-8](https://designbase.co.kr/uxui-04-8/) - 안녕하세요. 이번에는 iOS에서 앱 아이콘 디자인의 중요성과 앱스토어 제출 규격에 대해 알아보겠습니다. 앱 아이콘은 사용자에게 브랜드의 첫 인상을 주는 중요한 요소입니다. 따라서, 차별화되고 기억하기 쉬운 아이콘을 디자인해야 하며, 브랜드 가이드라인을 활용하는 것이 좋습니다. 앱스토어에 제출할 때는 어떤 규격을 가지며 주의해야 할 부분은 어떤 것들이 있는지 알아보겠습니다. 또한, 피그마 파일도 공유드립니다. 영상에서 다루진 않았지만, 앱 개발
- [iOS 에셋 어떻게 정리하고 공유할까? - UXUI 디자인 강좌 4-7](https://designbase.co.kr/uxui-04-7/) - 안녕하세요. 이번에는 iOS 디자인 작업 시 유용한 에셋 관리 팁을 알아보겠습니다. 먼저, 디자인 툴에서 1배율로 작업하되, 내보낼 때 @2x, @3x 접미사를 붙여 Retina 디스플레이의 높은 해상도에 맞는 이미지를 준비해야 합니다. 벡터 아이콘은 PDF 형식으로 1배율로 작업하고, 이미지는 고해상도 디스플레이를 기준으로 @3x 크기로 작업하는 것이 좋습니다. 피그마에서는 내보내기 옵션으로 1x, 2x, 3x를 선택하면 되며, 파일명에 자동으로
- [iOS 기능별 컴포넌트 파악하기 - UXUI 디자인 강좌 4-6](https://designbase.co.kr/uxui-04-6/) - 안녕하세요. 이번에는 iOS에서 제공하는 컴포넌트에 대해 알아볼게요. 보다보면 안드로이드와 비슷한 점과 차이점들이 보일겁니다. 당연히 모든 내용을 외우실 필요는 없고, 다양한 컴포넌트의 명칭과 기능을 카테고리별로 살펴보면서 파악해볼게요. 각 컴포넌트마다 상세한 내용은 아래 애플 디벨로퍼 웹사이트 링크를 통해 확인하실 수 있습니다. iOS 컴포넌트: 중점적으로 봐야 할 부분 명칭의 차이: 비슷한 기능과 사용성을 가지고 있음에도 불구하고, Android와 iOS는
- [디자이너 99%는 모르는 iOS 기능 'Autoshrink' - UXUI 디자인 강좌 4-5](https://designbase.co.kr/uxui-04-5/) - 안녕하세요. 이번에는 디자이너 99%가 모르는 기능 Autoshrink에 대해 알아볼게요. 다양한 화면 크기의 디바이스에 맞게 텍스트 크기를 조절하는 것은 UI 디자이너에게 중요한 부분이죠. iOS의 'Autoshrink'는 이러한 문제를 해결하는 데 유용한 기능입니다. 특히, 작은 화면에서 텍스트가 잘리는 문제를 방지할 수 있습니다. 실제 ios 앱 개발시 사용하는 Xcode에서 해당 기능을 어떻게 사용하는지, 그리고 적용하면 어떻게 동작하는지 보여드릴게요~! 이번
- [iOS 타이포그래피 이해하기 - UXUI 디자인 강좌 4-4](https://designbase.co.kr/uxui-04-4/) - 안녕하세요. 이번에는 iOS 타이포그래피에 대해 중요한 부분들을 알아볼게요. iOS의 기본 서체인 'San Francisco' 및 'New York'에 대한 살펴보고, SF Pro Display, Text, Compact의 차이점부터 다이나믹 타입 등 iOS 앱 디자인에 필요한 폰트 스타일과 주의사항도 다뤄볼게요. iOS 전용 서체 우선, iOS에서 기본적으로 제공되는 폰트에 대해 알아보겠습니다. iOS에서는 San Francisco 폰트를 기본적으로 제공하며, macOS에서도 사용되는 폰트입니다. San
- [iOS 레이아웃 이해하기 - UXUI 디자인 강좌 4-3](https://designbase.co.kr/uxui-04-3/) - 안녕하세요. 이번에는 iOS 레이아웃에 대해 중요한 부분들을 알아볼게요. 챕터 2에서 레이아웃 전반에 대해 살펴봤지만, 이번에는 iOS 디자인 요소에 초점을 맞춰 설명합니다. iPhone의 다양한 모델마다 인터페이스 차이가 있으며, '노치' 디자인은 iPhone X부터 시작되었습니다. 이 노치로 인해 발생하는 문제를 해결하기 위해 'Safe area' 개념이 도입되었습니다. 또한, iOS의 그리드 시스템, 기본 구조와 주의해야 하는 점들을 다뤄볼게요. 이번 강의에서는
- [iOS 이해하기 - UXUI 디자인 강좌 4-1](https://designbase.co.kr/uxui-04-1/) - 안녕하세요. 이번에는 iOS에 대해 자세히 알아볼게요. Android 관련 챕터와 비슷한 구조와 순서로 알아볼 건데, 강의를 듣다 보면 비슷한 점과 다른 점들이 보일 겁니다. 아예 다른 개념들도 있기 때문에 이번에도 집중해서 들어주세요. 이번 강의에서는 iOS의 개념, 버전, 특징, 디자인 가이드라인, 그리고 중요한 리소스에 대해 자세히 알아보았습니다. iOS 디자인에 대한 이해는 UX/UI 디자이너에게 중요한 부분입니다. iOS란? iOS는
- [구글 플레이 스토어 미리보기 이미지 - UXUI 디자인 강좌 3-9](https://designbase.co.kr/uxui-03-9/) - 런처 아이콘에 이어서 추가 작업이 남아있습니다. 실제 앱을 올리려면 Android는 플레이스토어라는 플랫폼을 마주하게 됩니다. 여기에 완성된 앱을 출시할 때 우리는 미리 보기 이미지를 준비해야 합니다. 미리보기 이미지 제작에 대한 사이즈와 제작시 주의할 점들을 같이 살펴볼게요. 이번 강의에서는 Android 플레이스토어에 앱을 출시할 때 준비해야 하는 미리보기 이미지에 대해 알아보았습니다. 이는 앱의 주요 특징과 기능을 설명하는 중요한
- [꿀벌 날아다니는 효과 - 애프터이펙트 강좌 2-6](https://designbase.co.kr/after-effects-02-6/) - 이번에는 날아들어오는 꿀벌 애니메이션을 만들어볼게요. 생각보다 매우 간단합니다. 예전에 일러스트레이터 강의에서 예제로 만든 꿀벌 일러스트가 있었죠. 애프터 이펙트로 불러오는 것부터 해볼게요. 3D Layer, Motion Blur 등을 사용해서 빠르게 만들 수 있습니다. 날아들어오는 꿀벌 애니메이션을 만드는 과정을 단계별로 설명하겠습니다. 이 과정은 일러스트레이터로 만든 꿀벌 일러스트를 애프터 이펙트(After Effects)로 가져와 애니메이션을 적용하는 것을 포함합니다. 일러스트레이터: 벌 일러스트
- [움직이는 웨이브 만들기 - 애프터이펙트 강좌 2-5](https://designbase.co.kr/after-effects-02-5/) - 움직이는 선(Wave)을 만드는 방법에 대해 설명하겠습니다. 여기에는 CC Lens와 노이즈 효과를 추가하여 더 흥미로운 시각적 효과를 만들 것입니다. 이 과정은 애프터 이펙트(After Effects)에서 진행됩니다. 선 추가 및 반복 선 생성: 컴포지션 밖에 선 하나를 만듭니다. 이 선이 기본 요소가 됩니다. Repeater 사용: 'Add > Repeater'를 사용하여 선을 반복합니다. 이를 통해 여러 개의 선을 쉽게 생성할
- [움직이는 그라데이션 배경 만들기 - 애프터이펙트 강좌 2-4](https://designbase.co.kr/after-effects-02-4/) - 이번에는 움직이는 그라데이션 배경을 만들어볼게요. 생각보다 매우 간단해서 빠르게 따라할 수 있습니다~! 솔리드(Solid) 생성 및 4 Color Gradient 효과 적용 솔리드 생성: 새 솔리드 레이어를 만듭니다. 이 레이어는 그라디언트 배경의 기초가 됩니다. 4 Color Gradient 적용: 생성한 솔리드 레이어에 '4 Color Gradient' 효과를 적용합니다. 이 효과는 네 가지 색상을 사용하여 복잡한 그라디언트를 만듭니다. 컬러 조정:
- [움직이는 포스터 만들기 - 애프터이펙트 강좌 2-3](https://designbase.co.kr/after-effects-02-3/) - 움직이는 그래픽 포스터를 만들 때 일러스트레이터 파일을 애프터 이펙트(After Effects)로 가져와 Displacement Map을 활용하는 방법에 대해 설명하겠습니다. 독특하고 동적인 배경 그래픽을 만드는 데 유용합니다. 일러스트레이터에서 애프터 이펙트로 파일 가져오기 파일 준비: 일러스트레이터에서 작업한 파일을 애프터 이펙트로 가져올 때는 각 요소가 별도의 레이어에 있어야 합니다. 이렇게 하면 애프터 이펙트에서 레이어별로 개별적으로 조작할 수 있습니다. 애프터 이펙트로
- [눈 내리는 마을, 카메라로 공간감까지 - 애프터이펙트 강좌 2-2](https://designbase.co.kr/after-effects-02-2/) - 여러분, 안녕하세요! 오늘은 카메라를 통해 원근감을 주는 방법부터 마스크 효과, 그리고 눈 내리는 효과까지 다양한 테크닉을 함께 알아보려고 합니다. 재미있게 함께 해볼까요? 카메라를 이용한 원근감 주기 카메라를 활용하면 놀라운 원근감을 줄 수 있어요. 어떻게 하는지 함께 살펴봅시다! 카메라 추가하기 우선, 새로운 컴포지션을 만들어 줍니다. 카메라를 추가해 줍니다. 각 레이어를 3D 입체로 바꾸는 작업을 해야 합니다.
- [안드로이드 앱 런처 아이콘 만들기 - UXUI 디자인 강좌 3-8](https://designbase.co.kr/uxui-03-8/) - 앱 런처 아이콘은 사용자의 첫 인상과 브랜드 인식을 형성하는 중요한 요소입니다. 특히 안드로이드와 같은 OS에서는 앱 아이콘을 디자인할 때 꼭 지켜야 할 가이드라인이 있습니다. 이번 영상에서는 안드로이드의 앱 런처 아이콘에 대해 자세히 알아볼게요. 앱 런처 아이콘이란? 앱 런처 아이콘은 사용자가 앱을 실행할 때 홈스크린이나 앱 드로어에서 볼 수 있는 아이콘입니다. 이 아이콘은 앱의 브랜드와 특징을
- [안드로이드에서 에셋은 어떻게 정리하고 공유할까? - UXUI 디자인 강좌 3-7](https://designbase.co.kr/uxui-03-7/) - 안녕하세요! 디자이너분들과 개발자분들을 위해 디자인 에셋을 안드로이드 스튜디오에 맞게 저장하는 방법에 대해 알아보려고 합니다. 피그마, 스케치, xd와 같은 다양한 툴에서 디자인을 해도 결국은 안드로이드는 안드로이드 스튜디오에서 구현됩니다. 아이콘 같은 에셋은 어떻게 전달하면 좋은지, 핸드오프는 어떻게 하면 좋은지 알려드릴게요. 참고로, 아래 내용을 완벽하게 따르지 않아도 개발에 큰 문제는 없습니다. 중요한 것은 개발자와 소통하는 과정입니다. 그러나 이러한
- [파티클로 콘페티 쉽게 애니메이션 만들기 - 애프터이펙트 강좌 2-1](https://designbase.co.kr/after-effects-02-1/) - 안녕하세요. 이번에는 애프터이펙트로 콘페티 애니메이션을 만들어볼게요. 이번에 중점적으로 활용해볼 기능은 파티클이에요! 한 번 배워두면 잘 쓸 수있습니다. 파티클이란? 파티클은 개별적인 입자나 객체들이 모여 복잡한 모션을 형성하는 것을 의미합니다. 예를 들어, 눈 내리는 효과, 연기, 불꽃, 별들이 하늘에 반짝이는 효과 등을 만들 때 파티클 시스템을 사용하곤 합니다. 솔리드 레이어 생성 가장 먼저, 파티클 이펙트를 적용할 솔리드
- [녹화 화면 스타일 만들고 스크립트로 시간 표기까지 - 애프터이펙트 강좌 1-6](https://designbase.co.kr/after-effects-01-6/) - 안녕하세요, 여러분. 오늘은 영상 편집에서 자주 볼 수 있는 '뷰파인더' 스타일의 그래픽을 어떻게 빠르게 만드는지에 대한 방법을 알려드릴까 합니다. 특히, 포토샵이나 일러스트레이터에서 만든 그래픽을 에펙에서 어떻게 효율적으로 가져와 작업하는지에 대한 팁을 드릴 예정입니다. 포토샵과 일러스트레이터 그래픽 불러오기 전의 준비 대부분의 에펙 사용자들은 처음부터 그래픽을 직접 그리기보다는 포토샵이나 일러스트레이터와 같은 다른 툴에서 미리 그래픽을 작업한 후,
- [핵심 기능을 통한 모션 제작 2편 - 애프터이펙트 강좌 1-5](https://designbase.co.kr/after-effects-01-5/) - 안녕하세요. 이번에는 애니메이션 적용하는 것을 복습하고, 쉽게 텍스트 효과를 적용하는 방법과 특정 효과를 전체에 적용할 수 있도록 도와주는 Adjustment layer에 대해 배워볼게요. 일러스트 애니메이션 3년 전에 제가 Lottie용으로 만든 간단한 애니메이션을 오늘 다시 사용해보려고 합니다. 처음으로 배운 애니메이션 효과와 페어런트 링크를 활용하여 애니메이션을 구성해보겠습니다. 텍스트 효과와 애니메이션 적용하기 텍스트 레이어 생성 텍스트 레이어는 간단하게 생성할
- [핵심 기능을 통한 모션 제작 1편 - 애프터이펙트 강좌 1-4](https://designbase.co.kr/after-effects-01-4/) - 이번 강의에서는 애프터 이펙트에서 애니메이션을 제작하기 위해 알아야 하는 기능을 2편으로 끝내볼게요! 이번 편에서는 이미지를 불러오거나, 배경을 만들고, 스케일이나 위치를 조절하는 방법을 배워볼 겁니다. 그리고 반복적으로 애니메이션을 적용하기 위한 익스프레션과 전체적으로 속성값을 조절하기 위한 Null 오브젝트를 배워볼게요. 덤으로 페어런트 링크라는 것까지 살펴볼 겁니다. 1. 에셋 불러오기 첫 번째로 알아볼 것은 에셋을 프로젝트에 불러오는 방법입니다. 폴더
- [기본 개념 : 컴포지션과 해상도, 프레임 이해하기 - 애프터이펙트 강좌 1-2](https://designbase.co.kr/after-effects-01-2/) - 이번 영상에서는 입문자를 위한 강의다보니 에프터 이펙트를 바로 사용하기 전에 영상 제작시 꼭 알아야 하는 중요한 개념인 컴포지션과 해상도, 그리고 프레임에 대해 알아보겠습니다. 이미 알고 계신 분들은 시간을 아끼기 위해 건너뛰셔도 괜찮습니다. 영상에서 컴포지션 이란? 컴포지션은 에프터 이펙트의 중심입니다. 무엇보다 이곳에서 여러분들의 창작물이 탄생합니다. 컴포지션은 여러 레이어를 결합하여 하나의 완성된 작품을 만드는 작업 단위를 의미합니다.
- [애프터이펙트 강좌를 시작합니다! 디자이너가 모션을 배워야 하는 이유 - 애프터이펙트 강좌 1-1](https://designbase.co.kr/after-effects-01-1/) - 드디어 애프터 이펙트 강의를 시작하게 되었습니다. 본 강의를 통해 에프터 이펙트라는 툴의 기본적인 기능부터 다양한 예제까지 함께 실습해보며, 자연스럽게 이 툴을 마스터하실 수 있도록 도와드리겠습니다. 애프터 이펙트의 기본 기능부터 다양한 예제를 실습해보면서 에펙이라는 툴을 자연스럽게 익히고, 이 툴을 통해 여러분이 원하는 방향의 작업물을 제작할 수 있도록 배워볼게요. 멈춰있는 그래픽에 움직임을 주고 싶다면?! 지금 당장 배워보세요ㅎㅎ
- [애펙 인터페이스 이해하기 - 애프터 이펙트 강좌 1-3](https://designbase.co.kr/after-effects-01-3/) - 이번에는 에프터이펙트의 인터페이스에 대해 살펴볼게요. 처음부터 모든 기능을 다 배우는게 목표가 아닙니다. 가장 중요한건 익숙해지는 것인데, 어떤게 어디에 무슨 기능을 하는지 대략적으로 이해하고, 나머지 영상들을 따라하면서 자연스럽게 익히는 것을 목표로 합니다. 에프터 이펙트 인터페이스와 주요 기능 알아보기 에프터 이펙트는 영상 제작 및 편집에 사용되는 프로그램으로, 그 기능과 인터페이스가 방대합니다. 이번 포스팅에서는 인터페이스와 주요 기능에 대해
- [Android 나인패치(Nine-Patch) 이해하기 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-03-6/) - 안녕하세요. 오늘은 안드로이드 개발에서 중요한 개념 중 하나인 나인패치에 대해 알아보려 합니다. UI를 디자인하며, 이미지의 확장성에 대한 문제에 직면할 때가 있습니다. 이럴 때 나인패치는 우리의 좋은 도우미가 될 수 있습니다. 나인패치란? 나인패치는 안드로이드에서 사용되는 특별한 이미지 리소스 파일 형식입니다. 주요 특징은 이미지의 특정 부분을 지정하여 그 부분만 확장되게끔 디자인하는 것입니다. 이렇게 되면 이미지가 자연스럽게 확장되거나
- [Android 컴포넌트 이해하기 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-03-5/) - 안녕하세요! 이번에는 안드로이드에서 기본적으로 제공하는 컴포넌트에 대해 알아보도록 하겠습니다. 앱을 만들 때 중요한 역할을 하는 이 컴포넌트들은 어떤 것이 있고, 왜 사용하는지에 대한 설명과 함께 주요 컴포넌트와 커스텀 컴포넌트를 만드는 방법에 대해 소개해 드리겠습니다. 컴포넌트란? 컴포넌트(Component)는 프로그래밍에 있어서 재사용이 가능한 독립된 모듈을 뜻합니다. 각각의 컴포넌트는 특정한 기능이나 디자인 요소를 담당하며, 이러한 컴포넌트들을 조합하여 앱의 화면이나
- [Android 타이포그래피 완벽 이해 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-03-4/) - 안녕하세요. 이번에는 안드로이드에서 권장하는 타이포그래피를 살펴보도록 할게요. 유형 스케일과 android에서 권장하는 폰트를 알아볼게요. 1. 권장 폰트 소개 안드로이드에서는 Roboto, Roboto Serif, Noto Sans 이렇게 크게 세 가지 폰트를 권장합니다. Roboto Roboto는 Android의 기본 서체로, 전 세계 수백 가지 언어를 지원하는 3,300개 이상의 글리프를 포함하고 있습니다. 추가적으로 Roboto Flex를 사용하여 더욱 다양한 타이포그래피 유연성을 얻을 수
- [Android Layout 완벽 이해 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-03-3/) - 안녕하세요. 이번에는 안드로이드에서 일반적으로 사용되는 레이아웃에 대해 배워보도록 할게요. 그리고 실제 안드로이드에서 개발자들이 화면 레이아웃을 잡을때 어떤 형식으로 개발하는지 살펴보면서 디자이너 입장에서 어떤식으로 동작하는지 알아보는 시간을 가질게요. 레이아웃 영역 머티리얼 디자인은 플랫폼, 환경 및 화면 크기 전반에 걸쳐 일관성을 유지하려고 노력합니다. Android에서는 크게 3가지 영역으로 구분합니다: App bars: 애플리케이션의 주요 기능을 제공하는 영역입니다. Body: 주
- [Android 특징 이해하기 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-03-1/) - 안녕하세요. 이번에는 Android에 대해 알아보고 이해하는 시간입니다. 안드로이드는 구글이 개발한 오픈 소스 모바일 운영 체제로, 다양한 스마트폰과 태블릿에서 사용되며 풍부한 기능을 제공합니다. 이 영상에서는 안드로이드의 주요 특징과 그에 따른 디자인 가이드라인을 배웁니다. 그 중 Roboto 폰트 사용, 상대 단위 사용(dp, sp), 메인 네비게이션 위치, 내장 네비게이션의 변경 등에 대해 간략한 설명이 있습니다. 또한, 안드로이드의 버전과
- [Android 해상도와 단위 DPI, DP, SP 완벽 이해 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-03-2/) - 안녕하세요. 이번에는 안드로이드에서 해상도와 단위의 중요성을 다루는 이 강의에서는 픽셀, DPI, 안드로이드의 다양한 DPI 단위, 밀도에 독립적인 픽셀(DP)과 스케일된 픽셀(SP)에 대해 설명합니다. 이러한 단위들은 디자인과 개발 과정에서 효율성을 높이며 다양한 디바이스에 대응하는 데 필수적입니다. 복잡해 보이는 개념도 쉽게 이해할 수 있게 예시와 함께 설명되어 있으며, 디자이너와 개발자 모두에게 유용한 내용을 담고 있습니다. 해상도란? 해상도는 스크린이나
- [앱 UI 디자인 기본 : 필수로 숙지해야 할 그래픽 개념 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-6/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 필수적으로 알아야 하는 그래픽에 대해 알아보는 시간입니다. UI 디자인에 사용되는 그래픽의 역할과 종류, 그래픽 사용 시 주의할 점, UGC에 대한 개념, 운영까지 고려한 스탠더드까지 알아두면 좋은 개념들을 다뤄볼게요.
- [워드프레스에 구글 애드센스로 광고 넣는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-7/) - 이번에는 구글 애드센스를 연결해서 광고로 돈을 벌 수 있도록 설정을 해보겠습니다.포트폴리오 사이트가 목적인 분들은 멋이 가장 생명이기 때문에 이 부분은 건너뛰시고.. 블로그 운영을 하며 광고 수익을 얻고 싶은 분들만 사용해보세요 :) 구글 애드센스를 이용하여 블로그에서 광고 수익을 창출하는 방법은 아래와 같습니다. Site Kit 플러그인 설치 및 설정 먼저, 앞서 설치한 Google Site Kit 플러그인을 활성화해주세요.
- [웹사이트에 몇명이 보는지, 어떤 검색어로 들어왔는지, 사이트의 속도는 어떤지 파악하는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-6/) - 이번 시간에는 웹사이트의 트래픽과 검색 트래픽을 파악하는 방법을 배워보겠습니다. Google이 만든 사이트 킷을 활용하면 매우 간편하게 웹사이트의 통계 정보를 확인할 수 있습니다. Google Site Kit 활성화 먼저, 앞서 설치한 Google Site Kit 플러그인을 활성화해주세요. 그리고 구글 계정으로 연동을 진행하면 됩니다. 시간이 조금 지나면 트래픽 및 검색 트래픽에 대한 정보를 확인할 수 있습니다. '트래픽' 탭 트래픽
- [웹사이트 보안 높이는 방법 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-3/) - 안녕하세요! 이번 시간에는 웹사이트의 보안을 강화하는 방법을 배워보겠습니다. 보안의 중요성 웹사이트의 보안은 매우 중요합니다. 해킹당하면 개인 정보 뿐만 아니라 다른 사이트의 계정까지 노출될 수 있습니다. 특히 쇼핑몰이나 커뮤니티와 같이 고객 정보를 보유하고 있는 경우, 정보 유출로 인한 피해가 크게 발생할 수 있습니다. 보안을 높이는 방법 1. 어드민 계정 - 쉬운 아이디와 비밀번호 사용하지 말 것
- [웹 호스팅 연결 및 FTP로 테마 파일 이전 - 워드프레스 강좌](https://designbase.co.kr/wordpress-05-1/) - 드디어 워드프레스 마지막 챕터입니다. 이번 챕터에서는 남들이 볼수 있도록 지금까지 만든 웹사이트를 웹 호스팅 서버에 올리는 방법을 알아보겠습니다. 저번에 설치한 파일질라 FTP로 해당 호스팅과 연결하는 방법과, 플러그인을 통해 마이그레이션을 쉽게 하는 방법을 배울거고요. 특정 플러그인을 통해 웹사이트의 보안을 높이는 방법, 검색엔진 최적화하는 방법, 그리고 웹사이트 자체를 최적화시켜서 속도를 높여주는 방법을 배워볼게요. 그리고 웹사이트를 운영을 하면서
- [앱 UI 디자인 기본 : 필수로 숙지해야 할 타이포그래피 개념 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-5/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 필수적으로 알아야 하는 타이포 그래피에 대해 알아보는 시간입니다. 타이포 그래피가 무엇이고 UI 디자인에서 어떤 중요한 역할을 하는지, OS 별 사용되는 서체, 그리고 자간, 행간을 포함한 가독성에 대한 개념까지 다뤄볼게요. 추가로 알아두면 좋은다국어 지원하는 앱 UI 디자인할 때 주의해야 할 점들을 다뤄볼게요.
- [앱 UI 디자인 기본 : 아이콘 디자인시 알아야 할 개념 및 가이드라인 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-4/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 필수적으로 알아야 하는 아이콘에 대해 알아보는 시간입니다. 아이콘이 무엇이고 무슨 역할을 하는지, 그리고 OS에서 필수로 알아야 하는 가이드라인과 규격, 시각 보정 적용된 키라인 등의 개념들을 다뤄볼게요.
- [앱 UI 디자인 기본 : 컬러 올바르게 사용하는 방법 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-3/) - 안녕하세요. 이번에는 앱 UI 디자인을 할 때 필수적으로 알아야 하는 컬러에 대해 알아보는 시간입니다. 앱 UI 디자인 작업 시 컬러 시스템이 필요한 이유와 예시, 그리고 알아야 하는 컬러 구성, UI 디자인 시 주의해야 할 점들을 다뤄볼게요. 추천 도서 : 좋아 보이는 것들의 비밀 *이랑주 작가님 인스타그램 : https://www.instagram.com/leelangju
- [앱 디자인 레이아웃과 그리드 시스템 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-2/) - 안녕하세요. 이번에는 앱 UI 디자인을 할때 필수적으로 알아야 하는 레이아웃과 그리드 시스템을 알아보는 시간입니다. 레이아웃이란, 화면 크기, 텍스트, 이미지, 여백 등의 다양한 구성요소를 고려하여 앱 내에 정보를 시각적으로 배치하는 것입니다. 그리드 시스템이란, 여러 종류의 요소를 질서 있게 배치하기 위한 *그리드 규칙을 말합니다. 그리드를 활용하면 시각적 통일성을 줄 수 있습니다. 영상을 통해 자주 사용되는 레이아웃이 뭔지
- [챕터 2 소개 : UI 디자인에 대한 공통 필수 지식 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-02-1/) - 이번 챕터에서는 UI 디자인에 대한 공통 필수 지식에 대해 배워볼게요. 레이아웃, 컬러, 아이콘, 타이포그래피, 그래픽 스타일 등이 있습니다. 안드로이드와 iOS의 다른 점을 살펴봤지만, 실제 UI를 디자인하기 위해 공통적으로 알아야 하는 개념들이 있습니다. 이번 챕터에서 꼭 알아야 하는 개념을 살펴볼게요. 물론, OS마다 차이점이 있지만 그 다른 부분들은 챕터 3,4에서 OS 별로 자세히 다뤄볼게요. 그 외에도 썸존,
- [앱 만들어지는 과정과 PMF - UXUI 디자인 강좌](https://designbase.co.kr/uxui-01-6/) - 저번 영상에서 Android와 iOS에 대해 간략하게 살펴봤는데요. 이번에는 앱이 만들어 지는 과정을 간략하게 살펴보고, 가장 중요하게 생각하는 부분에 대해 이야기를 해볼게요. 일반적으로 기획, 디자인, 개발, QA, 배포 5단계를 거치는데, 각 단계마다 중요한 포인트와 가장 중요한 개념, 그리고 디자이너가 갖추면 좋은 마음가짐에 대해서도 같이 나눠볼게요.
- [Android와 iOS 이해하기 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-01-5/) - 안녕하세요. 이번 시간에는 OS 환경을 이해하고 Android와 iOS의 차이점에 대해 배워볼게요. 머릿속에 그림을 그리면서 공부하면 좋은데, 너무 상세한 정보부터 담기엔 부담이 갈 수 있어서 좀 큰 틀에서 먼저 설명을 드리겠습니다.
- [앱과 웹의 다른 점 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-01-4/) - 이번에는 웹과 앱의 차이점을 다뤄볼게요. 우리는 모바일 UXUI에 중점적으로 학습을 하는 것이기 때문에 웹과의 차이점이 뭔지 알아볼게요. 축구와 농구의 차이는 알아야 되는 것처럼. 웹과 앱의 차이는 알아야 이해도가 더 높은 상태에서 앱 디자인을 할 수 있겠죠. 여러 관점에서 다른 환경을 이해하는 시간을 가져볼게요.
- [UXUI디자이너가 알아두면 좋은 디자인 툴 소개 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-01-3/) - 안녕하세요! 오늘은 UX/UI 디자이너가 UI 디자인을 시작하기 위해 알아야 할 필수 디자인 툴들에 대해 알아보는 시간입니다. 축구 선수가 경기를 위해 유니폼, 축구화, 축구공 등을 필요로 하는 것처럼, 디자이너도 적절한 도구를 사용해야 합니다. 이번 영상에서는 디자인 툴의 종류와 각 툴에 대한 소개를 드릴 것이며, 관심 있는 툴들은 별도의 강좌를 통해 배울 수 있습니다. 그럼, 이제 필수
- [효율적인 공부 방법 및 마음 가짐 (앱 사례) - UXUI 디자인 강좌](https://designbase.co.kr/uxui-01-2/) - 안녕하세요. 이번 영상에서는 바로 전문적이고 딱딱한 내용을 배우기 전에 효율적인 공부 방법과 가져야 할 마음가짐, 그리고 간단하지만 성공한 앱 사례 등에 대해 이야기를 하고 싶어요. 우리에겐 ‘시간’이라는 제약이 있죠. 취미로 공부하시는거면 느긋하게 하셔도 상관없지만, 취업을 목적으로 하시는 분들이라면 빠르게 핵심을 배워서 취업하고 싶잖아요. 그러려면, 여러분이 잘하는 게 뭔지, 부족한게 뭔지를 알아보고, 그것들을 채워나가면서 목적에 맞게
- [웹디자이너가 코딩을 공부해야 하는 이유 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-1/) - 안녕하세요 디자인베이스입니다. 드디어 웹 디자이너를 위한 웹 코딩 강좌를 시작합니다. 여러분이 코딩을 못하는 이유는 딱 한 가지입니다. 안 해서입니다. 왜냐? 흥미가 없기 때문에 안 하게 되고 안 하면 실력이 늘 수가 없죠. 디자인과는 성향이 완전히 다르기 때문에 일반적으로 디자이너 분들이 코딩을 처음 접하면 어렵게 느끼는 것은 자연스러운 것입니다. 웹 개발을 공부한 디자이너로서 디자이너의 입장에서 최대한
- [CSS 개념 잡기 Display & Cascading - 웹 코딩 강좌](https://designbase.co.kr/webcoding-8/) - 웹 디자이너를 위한 웹 코딩 강좌 여덟 번째 시간입니다. 저번 강좌에서 간단한 카드 UI 예제를 코딩하면서 Class와 id에 대해 배워봤는데, 아직 이해가 안 가는 부분들이 꽤 있죠?! 오늘은 Display 속성과 Cascading에 대해 배워보도록 해요. 중요한 개념들이라서 꼭 알아둬야 합니다!
- [디자인을 똑같이 코딩하려면 꼭 알아야 할 박스 모델 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-11/) - 웹 디자이너를 위한 웹 코딩 강좌 열한 번째 시간입니다. 박스 모델에 대해 배워볼게요. 나중에 배워볼 강좌 중에 전체적인 레이아웃을 짜거나 특정 UI를 코드로 구현할 때 박스 모델에 대한 개념을 알면 더욱더 쉽게 작업이 가능합니다. 초급자에게 중요한 것은 Box로 바라보는 눈을 기르는 것입니다.
- [CSS 코드로 애니메이션 구현하는 방법 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-18/) - 웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 CSS 애니메이션을 사용하는 방법에 대해서 알아보도록 할게요. 지금까지 예제를 배워보며 간간이 나왔던 transition과 animation의 차이점도 알아보면서 어떤 식으로 사용되는지 알아봐요.
- [CSS로 그라데이션 배경 만드는 방법 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-19/) - 웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 CSS를 사용해서 그라데이션 넣는 방법을 알아볼게요. linear-gradient, radial-gradient, conic-gradient, repeating-radial-gradient 등 다양하게 사용할 수 있습니다. 해당 그라데이션을 사용할 때 컬러 방향이나 2개 이상의 컬러 넣는 방법, 해당 컬러의 힌트 중심을 바꾸는 방법에 대해서도 배워볼게요.
- [반응형으로 만드는 마법, 미디어 쿼리 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-22/) - 웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 반응형 웹을 위한 미디어쿼리를 배워보도록 할게요. 반응형 웹 디자인을 하다 보면 분기(breakpoint)를 줘서 디자인하죠. 일반적으로 데스크톱, 태블릿, 모바일 이렇게 작업을 합니다. 미디어 쿼리 사용법과 메타태그 뷰포트에 대해서 자세히 알아보도록 하죠.
- [반응형 영상 배경 만들기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-23/) - 오늘은 HTML에서 video 태그를 활용해서 영상을 웹에 넣는 방법을 배워볼게요. 그리고 자연스럽게 간단한 레이아웃을 만드는 연습도 해볼게요. 비디오 태그에 사용 가능한 기능들을 자세히 알아보도록 할게요. video : Video를 웹에 불러오는 HTML 태그 / video 태그 사이는 비디오 파일이 문제가 있어 지원하지 않는 경우에 대체 텍스트로 나옵니다.
- [CSS로 마우스 커서 조절하기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-25/) - 오늘은 마우스 커서를 CSS로 조절하는 방법을 배워볼게요. 마우스 커서는 되게 사소한 부분이지만, 실제로 개발된 사이트 중에 제대로 지켜지지 않아 사용성을 헤치는 경우가 있습니다. 코드 몇줄로 커서의 모양을 원하는 대로 바꿀 수 있습니다. 우리가 지켜야할 부분이 어떤 것들인지 같이 살펴보도록 할게요.
- [SEO를 위한 메타태그 이해하기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-24/) - 오늘은 중요한 개념인 SEO에 대해서 배워보겠습니다. SEO란 검색엔진 최적화인데, 구글 같은 검색 포털 사이트에서 어떻게 해야 특정 키워드로 내가 만든 웹사이트가 검색 결과에서 상위에 노출될 수 있는지 이런 부분을 좌우하는 개념입니다. SEO에 좋으려면 구글봇이 내 사이트에 방문해서 크롤링을 통해 색인에 저장할 수 있도록 코드를 짜야 합니다.
- [카카오프렌즈 캐릭터그리기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-2/) - 일러스트레이터를 이용해서 카카오 프렌즈의 귀여운 캐릭터들을 따라 그리며 중요한 기능을 배우는 강좌입니다. 일러에서 자주 사용하는 Pathfinder와 Expand 기능을 익혀볼게요. 카카오 프렌즈 캐릭터 중 라이언과 무지, 어피치 그리고 콘을 그려보도록 하죠~!
- [아이코닉한 그래픽 디자인 손쉽게! Shape Builder Tool - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-3/) - 실전으로 배우는 일러스트레이터 강좌입니다. 이번에는 예제처럼 아이코닉한 그래픽 디자인을 아주 빠르게 손쉽게 작업하는 방법을 배워볼게요. 실무 디자이너들도 은근히 모르는 툴! Shape Builder Tool을 익혀봅시다. 아주 간단해요. 빠르게 작업이 가능합니다.
- [몽실몽실 털 만들기(3D 모피 효과) - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-4/) - 실전으로 배우는 일러스트레이터 강좌입니다. 오늘은 몽실몽실 털 질감을 만들어볼게요. 3D 모피 효과를 만드는 방법은 생각보다 간단합니다. 예제와 함께 사용할 기능으로는 Blend Tool과 Distort Roughen 효과 입니다. 러펀효과는 말 그대로 거칠게 효과입니다.
- [GIF로 움직이는 이모티콘 만들기(1편) - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-7/) - 이번에는 GIF로 움직이는 이모티콘 만들기를 해보는 시간입니다. 움직이는 이모티콘을 만들기 위해 포토샵과 일러스트레이터 두 가지의 툴이 필요합니다. 이모티콘 자체를 그리기 위해서 일러스트레이터를 활용하고, 만든 일러스트 파일을 포토샵으로 불러와서 움직이는 이모티콘 GIF로 출력하는 방법을 배워보도록 할게요. 1, 2편으로 나눠서 진행합니다. 관심 있으시면 구독 부탁드려요~! *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을
- [원형 그라디언트 그래픽 만들기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-6/) - 일러스트레이터 툴 강좌입니다. 원형 그라디언트 로고를 한 번 만들어볼게요. 예제를 만들면서 일러스트레이터의 기능들을 배울 수 있습니다. Shape Builder Tool과 Live Paint Bucket, 그리고 Swatches의 Global 기능을 활용해서 로고를 디자인을 해봅시다.
- [X 배너 디자인하는 방법 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-5/) - 일러스트레이터를 이용해서 X 배너 디자인하는 강좌입니다. X 배너의 규격은 어떻게 되고, 컬러 모드, 해상도(ppi) 설정하는 방법부터 배너를 디자인할 때 알아두면 좋은 디자인 접근법도 같이 배워보겠습니다.
- [심볼 활용해서 3D 매핑하기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-10/) - 일러스트레이터 열 번째 강좌입니다. 이번에는 3D 구에 텍스트를 넣는 방법을 배워볼게요. 만드는 방법은 생각보다 쉽습니다. 일러 툴에서 3D를 만들기 위해서는 3D 기능을 사용하는 것이 아주 편합니다. 이번에 주로 다룰 기능은 Symbol과 Revolve, 그리고 Map Art입니다.
- [isometric 아이소메트릭 3D 그래픽 일러스트 만들기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-9/) - 일러스트레이터 아홉 번째 강좌입니다. 이번에는 아이소메트릭 3D 그래픽 일러스트를 만드는 방법을 배워볼게요. 저번 시간에 배운 기능을 활용해서 응용 편을 만들어봤습니다. 그리드 같은 것도 필요 없습니다. 아이소메트릭 스타일의 그래픽을 더 이상 어렵게 작업하지 마세요.
- [isometric 아이소메트릭 3D 텍스트 그래픽 만들기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-8/) - 일러스트레이터 여덟 번째 강좌입니다. 이번에는 아이소메트릭 3D 텍스트 그래픽을 만드는 방법을 배워볼게요. 이번에도 아주 쉽습니다. 실 작업 시간은 2~3분 정도로 얼마 안 걸립니다. 이벤트 배너나 콘텐츠 썸네일로 사용해보세요.
- [블랜드 툴로 3D 텍스트 만들기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-12/) - 일러스트레이터 열두 번째 강좌입니다. 이번에는 블랜드 툴로 3D 텍스트 만들기를 배워볼게요. 블랜드 툴은 두 개의 개체를 연결할 때 사용합니다. 예제에 사용된 그래픽 디자인을 만들어보면서 한 번 배워봅시다. Blend Tool : 자연스럽게 그래픽을 연결해주는 기능
- [초간단 물결 라인 만들기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-11/) - 일러스트레이터 열한 번째 강좌입니다. 이번에는 물결 라인을 만드는 방법을 배워볼게요. 어떻게 만드는지 알 것 같나요?! 감각적인 포스터 만드는 데 사용해보세요 : ) 이번에 주로 다룰 기능은 Transform과 Mesh입니다.
- [작업 환경 세팅하기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-2/) - 이번에는 일러스트레이터에서 작업환경을 세팅하는 방법을 알아볼게요. Window에서 Workspace를 통해 기본이 되는 세팅을 한 후에 Window 탭에서 자주 사용하는 패널들을 꺼내볼게요.
- [새 도큐먼트 만들기 & Bleed 이해하기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-3/) - 일러스트레이터 기초 강좌 세 번째로 새 도큐먼트 만들기를 해볼게요. 모든 툴의 가장 기본이 되는 문서 환경에 대해서 배워볼게요. 옵션에서 컬러 모드와 해상도, 그리고 Bleed의 중요성에 대해서 배워볼게요 :)
- [툴바 기초 01 선택툴, 네모툴,아이드로퍼 툴 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-4/) - 이번 일러스트레이터 기초 강좌에서는 툴바에 대해서 배워볼게요. 가장 기본이 되는 셀렉션 툴과 도형 툴, 그리고 아이드로퍼 툴에 대해서 배웁니다. 단축키와 사용법을 배우고 색상을 Fill과 Stroke에 대해서도 배워볼 거예요. 마지막으로 열린 도형과 닫힌 도형에 대한 개념도 알아봐요.
- [지우고 자르는 툴바 Erase tool, Scissors tool - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-7/) - 일러스트레이터 툴바에서 제공하는 툴 중에 요소를 지우는 툴인 Erase Tool과 클릭한 지점을 자르는 Scissors Tool 두 가지를 배워보도록 할게요.
- [그리기 위한 툴바 익히기 Pen tool, Brush tool, Pencil tool 툴 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-6/) - 일러스트레이터 툴바에서 제공하는 툴 중에 Pen Tool과 Brush Tool, Pencil Tool에 대해 알아볼게요. 펜 툴은 포토샵과 마찬가지로 중요한 툴 중에 하나입니다. 간단한 예제를 따라 그리면서 펜 툴에 대한 사용법을 꼭 익혀보세요 :)
- [툴바 기초 Zoom, Hand 툴 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-5/) - 일러스트레이터 툴바에서 제공하는 툴 중에 Zoom Tool과 Hand Tool에 대해 알아볼게요. 작업 화면을 디자이너가 원하는 방향과 사이즈에 맞게 컨트롤하기 위해서는 이 두 가지 툴을 알아야 합니다. 실제로는 단축키가 더욱 중요합니다. 자세한 내용은 영상을 통해 알아볼게요.
- [회전, 확대, 반전, 기울이기 사용하는 방법  - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-8/) - 일러스트레이터 툴바에서 제공하는 툴 중에 오브젝트를 회전 시키고 확대 축소하고 상하좌우로 반전시키고 기울이는 방법에 대해서 배워볼게요. Rotate Tool, Scale Tool, Reflect Tool, Shear Tool을 배워보며 각 툴마다 알아야 할 옵션에 대한 부분까지 알아보도록 할게요.
- [자와 가이드로 그리드 만들기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-11/) - 일러스트레이터에서 자(rulers)와 가이드 선(guides)을 이용해서 그리드를 만들어보도록 할게요. 디자인의 기초 중의 기초는 바로 그리드죠. 그리드에 대해 간략하게 설명하자면 시각적인 통일감을 주기 위한 어떠한 규칙을 말합니다. 어떻게 그리드 선을 만들고 숨기고 잠그기와 풀기에 대해서 알아두면 유용한 단축키도 같이 알아보도록 할게요.
- [그라데이션 끝장내기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-12/) - 일러스트레이터에서 그라데이션 컬러 사용하는 방법을 알아보도록 할게요. gradient tool과 gradient panel에 대해서 배워볼 건데요. 컬러를 넣는 방법과 컬러의 위치, 그라데이션 각도, stroke모드에 그라데이션 넣는 방법, 그라데이션 타입 선택하는 방법 등 하나하나 자세히 알아볼게요.
- [아트보드와 오브젝트 정렬의 모든것 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-10/) - 일러스트레이터를 사용하면서 무심코 지나쳤던 기능들, 불필요한 반복 노동을 줄였을 정렬 기능에 대해서 배워보도록 할게요. 아트 보드를 쉽게 정렬하는 방법과 오브젝트를 중심을 기준으로 정렬하는 방법과 좌우 여백을 기준으로 정렬하는 방법을 알려드릴게요. 미리 알았더라면 좋았을 기능 바로 배워보시죠.
- [블렌드 툴로 도형 자연스럽게 연결하는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-9/) - 일러스트레이터에서 자주 사용되는 툴입니다. 두 개의 물체를 자연스럽게 연결해주는 블렌드 툴에 대해서 배워볼게요. 블렌드 툴의 다양한 옵션과 블렌드가 적용된 도형으로 일반 도형으로 바꾸는 방법과 블렌드 효과 취소하기 등 알아두면 좋은 기능들도 같이 알아보도록 할게요. 핵심 요약 블렌드 툴 사용법 : 좌측 툴바에서 블렌드툴 선택 후 연결하고 싶은 요소들 클릭블렌드 툴 더블클릭하면 옵션이 나옵니다.Spacing 옵션Smooth Color
- [활용도 만점 등고선 그래픽 디자인 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-13/) - 일러스트레이터를 이용해서 활용도 만점인 등고선 그래픽 디자인을 해보도록 할게요. 등고선을 만드는 방법은 아주 간단합니다. 일러스트레이터의 기초 강좌부터 지금까지 사용하면서 배운 기능들을 활용하면 쉽게 제작이 가능합니다. 펜슬 툴을 가지고 중간 봉우리 구간, 봉우리를 이어주는 구간, 가장 높은 고도 구간 등을 마우스로 빠르게 그려줍니다. 블랜드 툴을 이용해서 본인이 원하는 간격을 설정 후 중간중간을 이어줍니다. 마지막으로 오브젝트 메뉴에서 Expand를 통해 선으로 깨주면 끝입니다. 마무리는 포토샵으로 옮겨서 퀄리티를 올리실 수 있겠죠?!
- [마스크 사용 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-17/) - 일러스트레이터에서 마스크를 사용하는 방법을 알아볼게요. 마스크는 오브젝트를 특정 모양 안에 넣을 때 사용되는 기능입니다. 포토샵에서 제공하는 마스크와는 사용법이 조금 다릅니다. 간단한 예제를 통해 마스크 개념을 알려드릴게요.
- [심볼과 심볼 스프레이어 툴 사용법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-16/) - 일러스트레이터에서 자주 사용하는 그래픽은 심볼로 등록해서 반복적으로 사용할 수 있습니다. 심볼 스프레이어 툴을 이용해서 기존에 등록한 심볼을 반복적으로 만들 수 있습니다. 클릭 몇 번 하면 꽃이나 낙엽, 나무와 같은 그래픽을 수십 개를 만들 수 있어요. 그래픽 그룹을 회전도 시키고, 크기도 다르게 하고, 위치도 다르게 하는 방법을 알아볼게요!
- [선의 두께를 자유자재로 조절하는 Width 툴  - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-15/) - 일러스트레이터에서 제공하는 툴 기능인 Width Tool을 이용해서 선의 두께를 자유롭게 조절하는 방법을 알려드릴게요. 은근 많은 분이 이 기능을 모르시는 것 같아요. 알아두면 아주 편하게 작업할 수 있습니다. 2분 30초가 아깝지 않을 거예요 :)
- [간단 예제 장미 일러스트 만들기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-14/) - 일러스트레이터를 활용해서 간단한 예제인 장미 일러스트를 만들어보는 시간을 가져볼게요. 지금까지 배워본 기능들을 활용해서 만들어볼 건데 기본 원리와 간단한 기능 사용법만 알면 아주 쉽게 제작할 수 있습니다. 펜 툴, 오브젝트 회전, 아웃라인뷰, 쉐입빌더툴 등 사용해볼 예정입니다.
- [패스파인더와 쉐입 빌더 툴 마스터하기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-13/) - 일러스트레이터에서 도형을 자유자재로 합치고, 나누고 하기 위해 꼭 필요한 툴인 패스파인더와 쉐입 빌더 툴 사용하는 방법을 알아보도록 할게요. 패스파인더에는 Unite, Minus Front, Intersect, Exclude, Divide, Trim, Merge, Crop 등의 기능을 하나하나 알아볼게요. 그리고 쉐입 빌더 툴을 활용해서 도형을 합치고 빼는 방법을 통해 간단한 원숭이 일러스트 예제를 만들어볼게요.
- [별 반짝이, 네잎클로버 모양 쉽게 만드는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-21/) - 일러스트레이터에서 별 반짝이 모양과 네잎클로버 모양을 쉽게 만드는 방법을 알아볼게요. 저도 이 기능을 알기 전까지는 매번 직접 그려서 했었습니다.. 하지만, Distort & Transform에서 제공하는 기능을 알고 실무에서 필요할 때마다 반짝이를 쉽게 만들고 있습니다. 한번 배워보도록 하죠.
- [삐뚤빼뚤 낙서효과 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-20/) - 일러스트레이터에서 Scribble 효과를 통해 삐뚤빼뚤한 낙서 느낌의 그림을 만들어 보겠습니다. 다소 밋밋할 수 있는 일러스트에 낙서 효과를 통해 좀 더 완성도 있는 손그림 느낌으로 만들어보세요.
- [그림자 효과로 뉴모피즘 그래픽 만들기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-19/) - 일러스트레이터에서 그림자 효과를 통해 뉴모피즘(Neumorphism) 그래픽 효과를 만들어 보겠습니다. Appearance 메뉴를 활용해서 효율적으로 제작하는 방법을 알아볼게요.
- [비트맵 이미지를 벡터로 변환하는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-18/) - 일러스트레이터에서 image trace 사용하는 방법을 알아볼게요. 이미지 트레이스는 비트맵 기반의 이미지를 벡터 그래픽으로 변환해 주는 아주 좋은 기능입니다. 플랫한 그래픽을 만들기 위해 펜 툴로 직접 그린다면 많은 시간이 소모되는데, 일러스트레이터에서 제공하는 이미지 트레이스 기능을 활용하면 몇 초 만에 변환됩니다.
- [클릭 몇번으로 도형 왜곡하는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-23/) - 일러스트레이터 Effect에서 특정 도형을 아치 형태나 둥근 형태 등등으로 변환시킬 수 있는 warp 기능을 배워보겠습니다. 클릭 몇 번으로 도형을 왜곡시킬 수 있습니다.15가지나 되는 유형을 제공하는데 그중에 Wave, Fish, Arch 이렇게 3가지를 배워볼게요. 예제를 직접 해보면서 익혀볼게요. 핵심 요약 Effect 메뉴에서 Warp > 원하는 옵션을 클릭하면 조절창이 뜨죠. 효과의 방향이나 구부러짐의 정도를 조절할 수 있습니다. 그리고
- [부드러운 원형 그라디언트 그래픽 만들기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-advanced-14/) - 일러스트레이터를 이용해서 활용도 만점인 등고선 그래픽 디자인을 해보도록 할게요. 등고선을 만드는 방법은 아주 간단합니다. 일러스트레이터의 기초 강좌부터 지금까지 사용하면서 배운 기능들을 활용하면 쉽게 제작이 가능합니다. 펜슬 툴을 가지고 중간 봉우리 구간, 봉우리를 이어주는 구간, 가장 높은 고도 구간 등을 마우스로 빠르게 그려줍니다. 블랜드 툴을 이용해서 본인이 원하는 간격을 설정 후 중간중간을 이어줍니다. 마지막으로 오브젝트 메뉴에서 Expand를 통해 선으로 깨주면 끝입니다. 마무리는 포토샵으로 옮겨서 퀄리티를 올리실 수 있겠죠?!
- [감성 한 방울을 더 해주는 Grain 효과 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-advanced-15/) - 이번 일러스트레이터 강좌에서는 감성 한 방울을 더 해주는 그레인(Grain) 효과를 주는 방법을 알려드릴게요. 플랫한 그래픽에 그레인 효과를 입히면 은은하게 입체감이 느껴지고 감성적으로 변하면서 완성도가 높아집니다.약간의 반복작업이 필요하기 때문에 레몬 일러스트를 예제로 사용해볼게요! 고양이 예제로 해보고 싶은 분들은 멤버십 전용 예제 파일을 통해 진행해보세요 :) 핵심 요약 이런 효과를 주는 원리는 간단합니다. 투 톤을 가지고 표현을
- [1분 만에 롱쉐도우 만드는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-24/) - 안녕하세요. 이번에는 일러스트레이터에서 1분 만에 긴 그림자 그래픽 만들기를 해볼게요. 만드는 방법은 정말 간단합니다. 주로 사용할 기능은 Blend Tool입니다.예제를 통해 따라 하시면 더 빠르고 쉽게 이해하실 수 있습니다 :) 핵심 요약 Blend Tool을 이용해서 도형을 연결해주면 됩니다. 블렌드 툴 옵션에서 Spacing을 Specified distance로 바꾸고 간격을 1px로 적용하면 자연스럽게 연결됩니다. 그때 그림자 역할을 할 그래픽에 컬러는
- [반복 작업을 효과적으로 하는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-25/) - 이번에는 일러스트레이터에서 많은 사람들이 모르는 꿀 기능을 알려드릴 거예요. 특정 도형을 반복적으로 회전시키거나, 그리드에 맞춰서 반복적으로 복제를 하거나, 거울 효과를 통해 좌우를 동시에 바꿔주거나 이런 기능을 해볼게요. 핵심 요약 Object > Repeat > Radial - 원형으로 반복으로 복제가 됩니다. 물체를 반복하는 방법은 위아래로 하면 됩니다. 이런 그래픽을 쉽게 만들 수 있겠죠. Object > Repeat >
- [프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-26/) - 안녕하세요. 이번 시간에는 일러스트레이터에서 프리폼 그라디언트 사용법에 대해서 배워보도록 할게요. 예전에 그라디언트 사용법을 알아봤는데, 이번에는 Freeform 타입으로 좀 더 자유로운 그라데이션을 만들 수 있는 기능을 알아볼게요. 핵심 요약 Gradient 패널을 열어주고, Type을 맨 마지막 Freeform을 선택해 준 후 컬러를 조절할 수 있습니다. 감성적인 그라데이션 배경을 만들어 볼 수 있겠죠?
- [타이포그래피 지식을 바탕으로 텍스트 레이어 사용하기 - 포토샵 강좌 입문 2022](https://designbase.co.kr/photoshop-07/) - 이번 시간에는 포토샵에서 텍스트를 어떻게 넣고 디자인을 수정하는지 이런 방법을 알아볼게요. 그러고 나서 타이포 그래피 적으로 중요한 기초 지식을 다뤄볼게요. 타이포그래피는 우리가 자주 사용하는 화면(User Interface)에 정보로 들어갈 수도 있고, 일러스트 요소와 같이 포스터에도 활용되죠. 그 외에 영상, 패키지, 브로슈어 등 정말 다양한 곳에서 필수적으로 들어가는 요소이고 중요한 기본 개념입니다. 타이포그래피에 대한 기본 지식을 가지고
- [완성된 코드 웹 서버에 올리기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-31/)
- [구글 애널리틱스 웹사이트에 연결하는 방법 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-32/)
- [UXUI 강좌 소개 및 디자인을 배워야 하는 이유 - UXUI 디자인 강좌](https://designbase.co.kr/uxui-01-1/) - 안녕하세요. 오래기다리셨죠? 드디어 uxui강의를 시작합니다. 입문자를 대상으로 도움되는 내용은 어떤것들이 있을지, 그리고 이해가 가기 쉽게 설명한게 맞을지? 불필요한 내용은 없는지 이런 고민을 하면서 오랜 기간 공들였습니다. 이번이 첫번째 영상인데, 우리가 uxui를 왜 배워야하는지, 그리고 uxui가 대략 무엇인지, 이 강의를 통해 여러분이 얻게될 지식은 무엇인지 등을 다뤄보고자 합니다.
- [움직이는 라인에 마우스 클릭시 슬로우 모션 추가 - Three.js 강의](https://designbase.co.kr/threejs-20/) - 이번에 배워볼 three.js 예제는 랜덤으로 라인이 나오고, 클릭하면 카메라가 이동하고 슬로우 모션같은 느낌도 줄 수 있죠. 크게 3번에 나눠서 진행할거예요. 랜덤으로 라인 생성 트윈맥스로 애니메이션을 적용할겁니다. 마우스 다운, 업 이벤트로 슬로우모션 적용 *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신
- [RGBELoader로 완성도 높이기 - Three.js 강좌](https://designbase.co.kr/threejs-13/) - 이번에는 RGBELoader를 배워볼게요. HDR 데이터를 활용해서 배경과 환경에 적용해서 광원으로 사용을 도와주는 기능입니다. 지금까지는 단순히 빛을 추가해서 물체의 음영을 표현했다면, RGBELoader를 이용해서 Scene에 HDR 파일을 추가해서 더 깊이있는 빛 처리가 가능합니다. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를
- [GLTFLoader로 3D파일 불러오기 - Three.js 강좌](https://designbase.co.kr/threejs-14/) - 안녕하세요. 이번에는 GLTFLoader에 대해서 배워볼게요. 저번시간에 사용했던 RGBELoader와 같이 혼합해서 사용하는 방법도 알려드릴 게요. 이제좀 three.js에 익숙해지셨을 것 같은데, 기초 과정은 거의 끝나갑니다. 15화까지 3D 파일을 불러오는 걸 배워보고, 그 이후에는 이 3d 환경을 웹에서 마우스 오버나, 스크롤, 클릭등의 인터렉션을 어떻게 활용할 수 있는지 배워보도록 할게요. 그 전까지는 기본 지식을 배웠다면, 이제 진짜 웹사이트에 멋잇게
- [OBJLoader로 3D파일 불러오기 - Three.js 강좌](https://designbase.co.kr/threejs-15/) - 이번에는 OBJLoader와 MTLLoader를 사용해서 obj 확장자로 출력한 3d파일 불러오는 방법을 배워볼게요. 저번 영상에서 GLTFLoader를 불러오는 것과 거의 비슷하기 때문에 빠르게 사용 방법만 알아볼게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
- [Raycaster 이용해서 3D 오브젝트 마우스 오버시 움직임 조절하기(Gsap)](https://designbase.co.kr/threejs-16/) - 이번에는 Raycaster를 이용해서 3D 오브젝트에 마우스 오버시 움직임 조절하는 방법을 알아볼게요. 우선, 나의 마우스의 위치를 이동할 때마다 구하고, Raycaster를 통해 Scene내에 물체 위에 마우스가 있는지 파악해서 애니메이션을 구현하는 방식을 배워볼게요. 부드러운 애니메이션 적용을 위해 Gsap의 Tweenmax를 같이 사용합니다. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서
- [마우스 위치에 따라 애니메이션 추가(Raycaster 응용) - Three.js 강의](https://designbase.co.kr/threejs-17/) - 이번에는마우스를 움직일 때 마우스의 위치에따라 주변 오브젝트들이 반응하는 인터렉션을 구현해볼거예요. 저번에 배운 레이케스터를 사용할 예정이고, 애니메이션은 부드럽게 하기위해 GSAP의 트윈맥스를 사용합니다. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
- [마우스 위치에 따라 회전시키기(파티클 추가) - Three.js 강의](https://designbase.co.kr/threejs-18/) - 이번에는 마우스 위치에 따라 오브젝트를 회전시키는 방법을 배워보고, 함수를 사용해서 파티클을 추가해볼게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
- [스크롤에 따른 3D 인터렉션(회전, 카메라 이동) - Three.js 강의](https://designbase.co.kr/threejs-19/) - 이번에는 스크롤에 따라서 불러온 3d의 위치나 회전, 크기를 조절해볼겁니다. 이러한 인터렉션을 구현하려면 Gsap과 스크롤 트리거라는 라이브러리가 필요합니다. 어떻게 사용하는지 같이 알아보도록 할게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
- [6가지 종류의 빛 만들기 - Three.js 강좌](https://designbase.co.kr/threejs-08/) - 안녕하세요. 이제 three.js에서 제공하는 빛에 대해서 배워볼게요. 저번 시간에 배웠던 카메라만큼 중요한 개념 중에 하나입니다. three.js를 통해 표현할 수 있는 빛의 종류들과 실제 코드로 어떻게 구현하는지, 그리고 빛의 위치나 방향을 알려주는 Helper 활용법 등을 알아볼게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신
- [이 영상 하나로 카메라 완벽 이해하기 - Three.js 강좌](https://designbase.co.kr/threejs-07/) - 안녕하세요. 이번에는 three.js에서 코드로 카메라를 설정하는 방법, 카메라의 위치 설정, 카메라 관련 반응형 코드 이해 등 카메라 개념과 상세한 예시를 통해 three.js에서 제공하는 카메라를 완벽히 이해하고 넘어갈 수 있습니다. fov가 뭔지, aspect가 뭔지 이런 개념은 조금 생소할 수 있는데, DSLR 활용해서 촬영을 해보셨거나 사진학을 배우신 분들이라면 좀 더 쉽게 배우실 수 있습니다. *디자인 베이스 강좌는
- [도형에 재질 추가하는 방법(Material) - Three.js 강좌](https://designbase.co.kr/threejs-05/) - 저번 시간에 만들어본 Geometry에 Material을 추가하는 방법을 알려드릴게요. 여러 종류의 재질이 있는데 각 재질마다 특성이 있기 때문에 천천히 살펴보시는 걸 추천드립니다. 그리고 재질은 빛에 영향을 받기 때문에 빛을 추가하는 법도 빠르게 배워볼게요. 참고로 빛은 나중에 자세히 다뤄볼 예정입니다 :) *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은
- [재질에 텍스처 추가하는 방법 - Three.js 강좌](https://designbase.co.kr/threejs-06/) - 안녕하세요. 저번시간에는 머티리얼에 대해 배워봤죠. 이번에는 그 머티리얼에 추가로 텍스처를 넣는 방법을 배워볼게요. 질감을 배워보면 3D 물체에 훨씬더 현실성있게 표현이 가능하고 완성도를 높일 수 있습니다. TextureLoader를 이용해서 저번시간에 배워본 메시 스텐다드 머티리얼에 텍스처를 넣는 방법과 추가된 텍스처에 대한 프로퍼티 map, nomalMap, displacementMap, roughnessMap에 대해 배워볼게요. 질감 다운받기 : https://3dtextures.me/2022/01/16/stone-path-008/ *디자인 베이스 강좌는 Mac OS를 기준으로
- [3D 도형 추가하는 방법 (+반응형 적용) - Three.js 강좌](https://designbase.co.kr/threejs-04/) - 저번 시간에는 장면, 그리고 카메라와 렌더러를 세팅했으니 이제 진짜 도형을 그려봐야겠죠. 3D 물체를 구현해야 하기 때문에 좌표의 점을 이은 선과 면으로 이루어진 도형인 Geometry와 색상이나 질감을 표현한 재질인 Material을 합쳐서 표현합니다. 이번 시간에는 Geometry에 대해서 알아볼게요. Material에 대해서는 다음 강좌에서 좀 더 상세하게 다뤄볼게요. 추가로 브라우저의 화면을 줄였을 때 반응형 처리하는 코드까지 배워보도록 할게요. three.js
- [기본 뼈대 이해하기 Renderer, Scene, Camera - Three.js 강좌](https://designbase.co.kr/threejs-03/) - 안녕하세요. 저번 시간에 기본적인 설치를 마쳤는데, 바로 코드로 직접 짜기 전에 three.js의 기본 구조를 살펴볼게요.three.js에서 가장 기본이 되는 구조는 renderer, scene, camera,입니다.장면을 만들어서 그 안에 3D 도형을 넣고 그걸 카메라로 비춘 다음에 렌더 어를 통해 그걸 canvas라는 HTML안에 렌더링해서 보여주는 개념이에요.대략적인 개념을 이해하고 가장 기본이 되는 장면과 카메라, 랜더러 코드를 작성해볼게요. three.js 기본 구조 -
- [Three 설치하는 방법(Cdn, npm, boilerplate, webpack) - Three.js 강좌](https://designbase.co.kr/threejs-02/) - 안녕하세요. three.js를 사용하기 위해서 필요한 파일들을 설치해서 사전 준비를 하는 시간입니다. three.js를 다운로드해서 사용하는 방법은 크게 3가지가 있어요. 직접 파일을 설치하는 방법, NPM으로 설치하는 방법, 마지막은 보일러 플레이트를 활용하는 방법입니다. 이 세 가지 방법을 다 알려드릴 텐데, 여러분이 편하신 방법으로 사용하시면 됩니다. 근데 저는 맨 마지막을 기준으로 설치한 환경으로 이번 three.js 강좌를 끝까지 진행할 예정이니까
- [웹사이트에서 3D를 자유자재로?! - Three.js 강좌](https://designbase.co.kr/threejs-01/) - 안녕하세요. 드디어 Three.js 강좌를 시작합니다. three.js란 웹페이지에 3D 객체를 쉽게 렌더링하도록 도와주는 자바스크립트 라이브러리입니다. three.js 웹사이트 - https://threejs.org/VS Code 웹사이트 - https://code.visualstudio.com/ 웹사이트를 더욱 멋있게 생동감 있게 표현할 수 있는 기술이라서 평소에 3D툴을 다룰 줄 알거나 3D 인터렉션에 대해 관심있는 분들은 공부하셔도 좋을 것 같습니다.three.js를 코드로 사용할 수 있도록 설치부터, three.js의 기본 구조를 파악하고, 간단한
- [3d 물체에 그림자 적용하는 방법 - Three.js 강좌](https://designbase.co.kr/threejs-09/) - 안녕하세요. 저번 영상에서는 빛에 대해 다뤄봤는데, 이번 영상에서는 그림자를 다뤄볼게요. Three.js에서 3D 도형에 그림자를 적용하기 위해서는 크게 3단계가 필요합니다. 렌더러에 그림자 사용 설정하고, 빛을 받아 그림자를 표현할 물체와 그 그림자를 받을 물체를 특정 코드로 설정해야 합니다. 마지막으로 빛 자체에도 그림자 설정을 코드로 추가해 주면 됩니다. 기본적으로 도형과 빛이 있어야 그림자가 있겠죠?! 그런데, 저번 영상에서 설명
- [귀여운 꿀벌 일러스트 쉽게 만드는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-27/) - 안녕하세요. 오늘은 아주 귀여운 꿀벌 일러스트를 만들어보는 시간을 가져볼게요. 지금까지 배워본 기능 중 기본도형과 패스파인더, 그리고 쉐입빌더 툴 기능을 활용해서 빠르고 쉽게 만들어볼거예요. 이제 슬슬 도구에 대해 익혔다면, 여러분이 원하는 그림을 그려보시길 추천드립니다. 다른 것들도 한번 만들어보는 연습을 해보세요.
- [자유롭게 화면 조절하는 방법 OrbitControls - Three.js 강좌](https://designbase.co.kr/threejs-10/) - 안녕하세요. 이번 시간에는 화면을 마우스로 회전하고, 줌인 줌아웃을 할 수 있도록 만들어볼게요. 복잡한 코드 필요 없이 three.js에서 제공하는 orbitControls를 추가 설치 후 코드 몇 줄만 적어주면 끝납니다. 관련 문서 : https://threejs.org/docs/#examples/en/controls/OrbitControls *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를
- [3D 공간에 안개 효과 적용하는 방법 - Three.js 강좌](https://designbase.co.kr/threejs-11/) - 안녕하세요. 이번에는 Three.js로 만든 3D 공간에 안개를 추가해볼게요.3D 엔진의 안개는 일반적으로 카메라로부터의 거리에 따라 특정 색상으로 페이드 하는 방식입니다. 별거 아니지만, 막상 적용하면 깊이감을 표현할 수 있습니다. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. Three.js에서 안개 사용
- [3차원 하늘 공간 만드는 방법 - Three.js 강좌](https://designbase.co.kr/threejs-12/) - 이번에는 3차원 하늘 공간을 만들어볼게요. 어떤 원리로 만드는지, 배열과 반복문을 활용해서 어떻게 만드는지 자세히 배워볼게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. Three.js에서 3차원 공간 만드는 방법 어린 시절에 정육면체 많이 만들어봤죠? 그것처럼 각 면에 이어지도록 이미지를
- [일러스트레이터 강좌 소개 & 인터페이스 파악하기 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-1/) - 드디어 디자인베이스에서 일러스트레이터 기초 강좌 시작합니다!! 포토샵만 기초 강좌를 다뤘는데, 기본기부터 파악하고 싶은데 일러스트레이터에는 왜 없냐고 문의가 많아서 고민해 보다 이렇게 만들었어요. 최대한 쉽게 중요한 내용을 저와 같이 파악해봐요. 이번 시간에는 간단한 강좌 소개와 인터페이스에 대해 빠르게 알아보는 시간을 가질게요.
- [24. 스크롤 시 특정 위치에 고정되는 스티키 메뉴 만들기 - 프로토파이 강좌](https://designbase.co.kr/protopie-24/) - 이번 시간에는 프로토파이로 스티키 네비게이션을 만드는 방법을 알려드릴게요. 기존에 만드려고 했던 강좌였는데, 마침 메일로 요청을 주셔서 빠르게 만들었습니다. 일반적으로 Hi-Fi 프로토타이핑을 하기 위해 UI를 피그마나 스케치, xd에서 우선 작업을 한 후에 프로토파이로 import하잖아요. 이번에는 피그마에서 작업한 ui를 불러와서 해보겠습니다. 이번에는 크게 3단계로 나눠서 진행해볼게요. 1단계 : 상세페이지 내 탭 네비게이션을 스크롤 했을 때 상단 앱바
- [UI 내 모션은 이미 대세, 로티 파일즈를 소개해드릴게요! - LottieFiles 강좌](https://designbase.co.kr/lottiefiles-01/) - 안녕하세요 여러분~! 로티파일즈는 단순히 작업한 애니메이션을 JSON으로 출력해서 로티를 쉽게 사용하도록 도와주는 것 뿐만아니라 작업물을 프라이빗하게 공유하거나 임베드 기능을 통해서 같이 일하는 디자이너, 프론트엔드 개발자와 같은 이해 관계자들과 협업시에 도움을 주는 기능을 제공하고 있습니다. 그 외에도 웹사이트 내에서 로티 관련된 다양한 기능들을 제공합니다. 최근 디자인스펙트럼과 로티파일즈가 개최한 Why Motion 행사에서 모션이 중요해지고 있는 상황을 같이
- [02. 에프터이펙트에서 작업한 모션을 로티로 적용하는 방법 - LottieFiles 강좌](https://designbase.co.kr/lottiefiles-02/) - 안녕하세요. 이번시간에는 에펙에서 작업한 결과물을 로피타일즈를 통해 웹사이트에 올리고 json으로 저장해서 활용하는 방법을 알려드릴게요. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
- [03. Figma에 LottieFiles 사용하는 방법 - LottieFiles 강좌](https://designbase.co.kr/lottiefiles-03/) - 오늘은 로티파일즈 플러그인을 통해 피그마에서 로티 애니메이션을 사용하는 방법을 알려드릴게요. 요즘 많은 디자이너분들이 UI 작업을 피그마에서 사용하고 있죠. 이 피그마 프로토타입에서 GIF를 지원하다보니까, 이런 부분을 공략한것 같아요. 로티 파일즈 플랫폼 내에 업로드 되어잇는 애니메이션을 gif로 변환해서 올릴 수 있는 기능을 제공하고 있습니다. *디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수
- [04. Lottie interactivity로 애플 웹사이트 따라하기 - LottieFiles 강좌](https://designbase.co.kr/lottiefiles-04/) - 오늘 만들어볼 예제는 애플 인터렉션 따라하기 입니다. 스크롤을 내려보면 만들어놓은 애니메이션이 움직이는 것을 볼 수 있죠. 실제로 로티를 사용한 부분을 따라서 직접 구현해볼 예정입니다. 일러스트레이터 파일에서 작업한 그래픽을 어떻게 에프터이펙트로 옮기는지, 그리고 그 옮긴 에펙에서 어떻게 애니메이션을 구현하는지, 마지막으로 애니메이션을 로티파일즈로 보낸 후 Lottie Interactivity를 활용해서 스크롤 인터렉션을 구현하는 방법을 배워보도록 할게요. *참고로 해당 강좌는
- [명함 디자인하기 - 일러스트레이터 강좌](https://designbase.co.kr/illustrator-1/) - 일러스트레이터를 이용해서 명함을 디자인하는 강좌입니다. 명함의 규격은 어떻게 되고, 컬러 모드, 해상도(ppi) 설정하는 방법 가독성을 위한 여백과 최소 폰트 사이즈 그리고 인쇄 시 발생할 수 있는 문제점들을 알아볼게요.
- [일러스트 고퀄리티로 쉽게 만드는 방법(feat. illustrator) - 포토샵 강좌 실전](https://designbase.co.kr/photoshop-advanced-19/) - 안녕하세요. 오늘은 일러스트레이터에서 그린 간단한 우주선 일러스트를 포토샵으로 불러와서 쉽게 그래픽 퀄리티를 높이는 방법을 알려드릴게요. 불러올 때 포토샵 2022에 새로 생긴 기능인 Layers 옵션을 사용하면 쉽게 작업할 수 있습니다. *Photoshop 2022에서만 작업이 가능합니다.
- [Displace를 활용해서 배경에 맞춰 자연스럽게 합성하는 방법 - 포토샵 강좌 실전](https://designbase.co.kr/photoshop-advanced-18/) - 안녕하세요. 오늘은 포토샵에서 제공하는 Distory의 Displace 기능을 이용해서 배경 이미지의 굴곡에 맞게 텍스트를 수정해주는 방법을 알려드릴게요. 예제처럼 배경이미지의 굴곡에 특정 오브젝트를 자연스럽게 합성할 때 사용할 수 있습니다. 크게 3단계로 진행하는데, 방법은 간단하니까 직접 따라해보셔도 좋을 것 같습니다 :)
- [웹디자인 실습 모바일 서브 페이지(Feat. 스케치 심볼의 힘) - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-13/) - 오늘은 웹디자인 입문 강좌 열세 번째 시간입니다.저번 강좌에서 했던 웹 메인 페이지 모바일 시안에 이어서 서브 페이지 모바일 디자인 작업해볼게요. 이번에도 역시 쉽게 작업이 가능합니다. PC에서 심볼 등록 후 반복작업을 잘 끝내놨다면 모바일 버전으로 심볼을 복제 후 사이즈 조정을 해줍니다. 그 후에 pc 심볼 적용된 레이어의 심볼을 mobile 버전 심볼로 바꿔주고 위치만 조정해 주면 끝!
- [웹디자인 실습 모바일 메인 페이지 - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-12/) - 오늘은 웹디자인 입문 강좌 열두 번째 시간입니다. 웹사이트 PC 시안이 끝났으니 모바일 시안을 작업해볼게요. 작업 전에 모바일 퍼스트에 대해서 가볍게 알아보고, 가이드라인에 맞게 제작하는 것과 스케치를 이용해서 편하게 제작하는 방법을 알아볼게요. 핵심 요약 반응형 웹에서 모바일 시안으로 넘어가기 전에 모바일 퍼스트라는 용어를 알아보고 갈게요. 인터넷 사용 디바이스 통계를 보면 10년 전인 2010년에는 데스크톱의 비중의 거의
- [시선강탈 웹 메인 배너 만드는 방법(feat. 포토샵) - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-11/) - 오늘은 웹디자인 입문 강좌 열한 번째 시간입니다.서브 페이지 시안에서 작업했던 상단 배너 이미지를 만드는 방법을 알아볼게요. 웹 디자인에서 레이아웃도 중요하지만, 콘텐츠에 사용되는 이미지 퀄리티도 중요하죠. 컨셉 포트폴리오라면 최소한 메인 배너 정도는 본인이 제작을 해야한다고 생각합니다. 대비를 통해 시선강탈을 위한 배너를 포토샵을 활용해서 만드는 방법을 배워봐요.
- [무한 루프 슬라이더를 만드는 방법 - 프로토파이 강좌](https://designbase.co.kr/protopie-23/) - 안녕하세요. 이번에는 무한 루프 슬라이더 표현하는 방법을 알려드릴게요! 오픈 카톡 방에서 루프 되는 슬라이드가 어떻게 작업하는지 물어보신 분이 계셔서 강좌로 만들었습니다.완성된 예제는 인디케이터가 동작하고, 스와이프도 되고, 좌우 화살표가 있어서 탭을 하면 슬라이드가 작동도 하죠. 물론, 모바일에서는 이런 화살표는 사용 안 하지만 나중에 웹 프로토타입 할 때 활용할 수 있을 것 같아서 기능을 추가해서 강좌로 만들었습니다.그리고
- [결과문 보기 및 공유하기(Feat. 은근 모르는 기능들 소개) - 제플린 강좌](https://designbase.co.kr/zeplin-03-membership/) - 이번시간에는 업로드된 결과물을 보는 방법과 실무에서 쓰면 좋은데 은근히 잘 모르는 제플린에 있는 기능들에 대해서 배워보도록 하죠. 다음 시간에는 프로토타입 실습 예제를 진행해보도록 하겠습니다!
- [스케치, 피그마, XD 각각에 맞는 제플린 사용법 - 제플린 강좌](https://designbase.co.kr/zeplin-02-membership/) - 안녕하세요. 저번 시간에 설치를 마쳤으니까 이번에는 스케치, 피그마, XD 각 툴마다 제플린으로 export 하는 방법을 알아보도록 할게요. 개발자가 코드로 구현하기 어려운 엘리먼트(예시. 아이콘)들은 각 툴마다 Export 속성을 적용하고 제플린에 올려야 올바르게 다운 받을 수 있습니다.
- [기본 도형 이 영상 하나로 끝내기  - 포토샵 강좌 입문 2022](https://designbase.co.kr/photoshop-06/) - 안녕하세요. 이번시간에는 기본 도형을 만드는 방법을 알아볼게요.무언가를 캔버스에 그리고 추가하려면 좌측에 있는 툴바에서 제공하는 기능을 활용 가능합니다. 그중 가장 기본적인 도형을 추가하는 방법을 알아볼게요. 원형, 네모, 선, 다각형 등 다양한 도형을 추가하고 크기 조절과 컬러를 바꾸는 방법도 알아볼게요.도형 선택시 옵션바에서 알아두면 좋은 기능과 프로퍼티스 패널에서 알아두면 유용한 기능 위주로 알려드릴게요. 핵심 요약 도형 생성하는 방법
- [도큐먼트 생성과 캔버스 사이즈 조절  - 포토샵 강좌 입문 2022](https://designbase.co.kr/photoshop-05/) - 안녕하세요. 오늘은 도큐먼트 생성하는 방법과 생성할 때 설정한 캔버스 사이즈를 변경하는 방법을 알아볼게요.도큐먼트 생성 방법은 메뉴바 File에서 New(Cmd + N)을 눌러주세요.저번에 배웠던 색상 모드와 해상도의 지식을 가지고 빠르게 만들어볼게요. 저와 함께 배우면서 사용할 예제의 대부분은 해상도 1920x1080, 72ppi, RGB 모드 이렇게 제작을 할 예정입니다. 캔버스 사이즈 조절 방법도 알아볼게요. 도큐먼트를 만들 때 해상도 설정을 했었죠.
- [작업 환경 설정하기  - 포토샵 강좌 입문 2022](https://designbase.co.kr/photoshop-04/) - 안녕하세요. 이번 포토샵 입문 강좌에서는 제가 작업할 때 사용하는 포토샵 환경을 소개해드리고, 작업 환경 설정하는 방법을 알아볼게요. 툴바와 패널 항목패널을 설정하는 방법 환경 설정으로 포토샵 인터페이스 색상 테마 변경하는 방법과 단위 설정하는 방법 핵심 요약 제가 사용하는 패널은 Adjustments, Properties, Character, Paragraph, Layers, Paths 이렇게 입니다.워크스페이스 조절은 메뉴바에 window 에서 조절이 가능합니다. 자주 사용되는 패널들은
- [필수 개념 픽셀과 해상도 이해하기  - 포토샵 강좌 2022](https://designbase.co.kr/photoshop-03/) - 안녕하세요. 이번 포토샵 입문 강좌에서는 픽셀과 해상도에 대해 알아볼게요.이 분야에 대해 깊게 들어가면 한 시간 이상 설명해야 하지만, 입문과정에서 당장은 그렇게까지 알 필요는 없습니다. 딱 두 가지만 기억하시면 됩니다. 픽셀(단위)과 해상도 개념 이해하기목적에 맞게 해상도를 설정하는 방법 영상 내에 추가로 궁금해할 만한 질문에 대한 답변도 있습니다.예를 들면, ppi가 높으면 화질이 좋아지는 거면 300ppi로 안 하고
- [필수 개념 색상모드 이해하기  - 포토샵 강좌 2022](https://designbase.co.kr/photoshop-02/) - 안녕하세요. 이번 포토샵 입문 강좌에서는 색상모드에 대해 알아볼게요.이번 강좌를 통해 RGB와 CMYK 컬러모드의 명확한 차이, 포토샵에서 컬러모드 설정 및 수정하는 방법 이렇게 2가지를 배울 수 있습니다. 핵심 요약 컬러 모드를 명확히 알아야 여러분의 작업물을 올바르게 작업할 수 있습니다. CMYK Color와 RGB Color 이 두 가지는 많이 들어보셨을 거예요. (이미 완벽하게 아신다면 이 강좌는 스킵!)가장 외우기
- [포토샵 인터페이스 파악하기 - 포토샵 강좌 2022](https://designbase.co.kr/photoshop-01/) - 안녕하세요 여러분~! 포토샵 입문 강좌를 새롭게 시작합니다.🎉포토샵이 무엇인지를 빠르게 살펴보고, 포토샵의 인터페이스를 살펴볼게요. 기존에 제작된 강좌는 너무 오래돼서 내용을 다듬고 보완해서 새롭게 준비했습니다.강좌 녹화 기준 스펙을 공유드리면, 포토샵 2022 버전 23.1.1입니다. 그리고 맥 OS로 녹화하기 때문에 윈도우로 사용하시는 분들과는 화면이나 단축키가 조금 다를 수 있습니다.영상 속에서 단축키를 제가 Cmd라고 하면 윈도우에서는 Ctrl이고 Option은 윈도우에서 alt키
- [프로토타이핑 실습 예제 02 - 프로토파이 강좌](https://designbase.co.kr/protopie-22-membership/) - 안녕하세요. 프로토파이 실습 마지막 시간입니다. 이번 프로토파이 강좌에서는 영상 재생 기능과 드래그로 영상 재생 페이지를 최소화하는 걸 구현해 볼게요.
- [프로토타이핑 실습 예제 01 - 프로토파이 강좌](https://designbase.co.kr/protopie-21-membership/) - 안녕하세요. 지금까지 배워본 프로토 파이의 핵심 개념들을 바탕으로 앞전에 스케치, 피그마, XD 강좌에서 만든 UI 디자인 예제를 프로토 타이핑하는 실습을 해보겠습니다.크게 두 단계로 나눠서 진행할게요. 이번 강좌에서는 아트 보드 사이즈부터 작업한 툴에서 Import 하고 페이지 링크 거는 걸 구현하고, 다음 강좌에서는 영상 재생 기능과 드래그로 영상 재생 페이지를 최소화하는 걸 구현해 볼게요.
- [제플린 플러그인 설치 방법 - 제플린 강좌](https://designbase.co.kr/zeplin-01-membership/) - 안녕하세요. 이번 시간에 배워볼 내용은 제플린이 무엇인지 알아보고 스케치, 피그마, XD 툴마다 어떻게 제플린 플러그인을 설치하는지 알려드릴게요.
- [유튜브 UI 클론 디자인 실습 예제 2 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-14-membership/) - 드디어 XD 마지막 강좌입니다. 저번 시간에 이어서 각 페이지에 맞게 필요한 요소들을 구성요소로 등록하면서 작업해 보도록 할게요.
- [유튜브 UI 클론 디자인 실습 예제 1 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-13-membership/) - 지금까지 배워본 XD 기능들을 바탕으로 유튜브 UI 클론 디자인 실습을 진행해 볼게요. 예제로 제작할 디바이스 환경에 맞는 아트 보드 및 그리드를 생성하고, UI 디자인을 할 때 하는 작업 방식을 추천드립니다. 앞에서 배워본 컴포넌트를 활용해서 앱에서 공통으로 활용되는 컴포넌트인 탭바 Top과 바텀 네비게이션을 효율적으로 만드는 방법을 배워볼게요.
- [작업물 공유하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-12-membership/) - xd에서 작업물을 공유하는 방법을 알아볼게요.디자이너가 작업한 디자인 시안에 대한 속성을 개발자와 공유하는 데 매우 유용한 기능입니다. 디자인을 공유함으로써 오브젝트 높이, 폭, 크기, 정렬, 두 아이콘(오브젝트) 간 상대 간격, 색상, 타이포그래피와 같은 중요한 정보를 제공할 수 있습니다. 또한, 의견을 댓글로 남길 수도 있습니다.xd에서 제공하는 공유의 보기 설정은 디자인 검토, 개발, 프레젠테이션, 사용자 테스트, 사용자 정의 이렇게
- [XD 프로토타입 & 디바이스 미리보기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-11-membership/) - 오늘은 xd에서 제공하는 프로토타입 기능과 디바이스 미리 보기를 통해 스마트폰 앱에서 완성된 프로토타입을 직접 사용하는 방법에 대해 배워볼게요.XD에서는 프로토 타이핑할 때 트리거와 액션을 이해하면 됩니다. 트리거에 탭, 드래그, 키 및 게임패드, 음성 이렇게 제공하는 데 영상을 통해 자세히 알려드릴게요.
- [스케치, 피그마, XD에서 프로토파이로 import하는 방법 - 프로토파이 강좌](https://designbase.co.kr/protopie-4/) - UI 디자인툴 삼대장인 스케치, 피그마, XD에서 프로토파이로 import 하는 방법에 대해서 알아볼게요. 아주 간단한 예제는 프로토파이 자체에서 제작을 해도 괜찮지만, 복잡한 UI는 UI 전용 툴에서 제작한 이후에 프로토파이로 불러오는게 더 효율적입니다. 불러올때 주의해야할 점도 같이 살펴보도록할게요.
- [3분 만에 웹 슬라이더 만들기  - 웹 코딩 강좌](https://designbase.co.kr/webcoding-30/)
- [쉽게 반응형 헤더 만들기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-29/)
- [결과물 내보내기- 어도비 XD 강좌](https://designbase.co.kr/adobexd-10-membership/) - 이번에는 xd에서 에셋 내보내는 방법을 알아보겠습니다. 스케치, 피그마와 비교하면 조금 다르게 되어있습니다. 내보내기 하는 방법은 간단합니다. 내보내려는 아트보드나 요소를 선택(다중 선택) 후 우측 패널 하단에 내보내기에 대해 표시를 해줍니다. 메뉴바에서 파일 - 내보내기 - 일괄 처리 / 선택됨 / 모든 아트 보드 이렇게 있습니다. 원하는 기능을 누르면 내보내기 옵션이 나오는데 포맷, 내보내기 대상 등 상황에 맞는 해상도를 맞출 수 있습니다. 아이콘을 png와 svg를 내보내기 하려면 두 번 해줘야 하는 단점도 있긴 한데 해당 단점은 제플린으로 해결할 수 있습니다.
- [jQuery로 모달 팝업 만들기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-28/) - 오늘은 jQuery 사용법을 배워볼게요. 우리가 배우려는 제이쿼리는 자바스크립트를 좀 더 효율적이고 쉽게 사용하는 걸 도와주는 라이브러리입니다. 배워볼 예제는 모달 팝업입니다. 클릭하면 켜지고, 딤 레이어나 닫기 버튼 누르면 꺼지도록 만들어볼게요. 바로 제이쿼리를 알아보기 앞서 우리가 이걸 배우는 게 맞는지 알아보는 시간과 변수와 함수, 클릭 이벤트 등의 간단한 사용법을 배워볼게요.
- [반복 그리드로 효율적으로 UI 디자인하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-09-membership/) - 이번에는 xd의 기능 중에 반복 그리드를 알아보겠습니다. 반복 그리드는 말 그대로 같은 스타일의 디자인 요소가 반복적으로 반복되어야 할 때 사용합니다. 리스트 형식이나 카드 타입의 ui를 디자인할 때 효과적이겠죠? 반복 그리드 사용 방법은 반복적으로 사용하고자 하는 요소를 선택하고 우측 패널에 있는 반복 그리드 기능을 눌러줍니다. 그 상태에서 우측 혹은 하단에 있는 그린 컬러의 앵커를 잡아 늘려줍니다. 그리고 사이 간격을 여기서 조절할 수 있습니다.
- [반응형 크기 조정하는 방법 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-08-membership/) - 오늘은 어도비 XD에서 반응형 레이아웃을 위한 반응형 크기 조정 기능을 알아보겠습니다. 해당 기능을 사용 안 한 경우에 아트 보드 사이즈를 늘리면 늘어나면서 이상하게 깨지는데, 잘 활용하면 사이즈를 늘렸을 때 설정에 맞게 UI가 자동으로 맞춰집니다. AOS에서 iOS로 변경할 때라던가, 반응형 컴포넌트로 제작해서 반응형 웹 디자인을 할 때 사용하면 좋은 기능입니다. 사용 방법은 아트 보드 선택 후 우측 패널에서 반응형 크기 조정을 활성화해주고 핀과 고정을 찍어주면 됩니다.
- [스크롤, 스텍, 패딩 사용법 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-07-membership/) - 안녕하세요. 이번 시간에는 XD에서 제공하는 기능 3가지 스크롤, 스택, 패딩에 대해서 배워보도록 할게요. xd에서 제공하는 스크롤은 상하, 좌우로 설정이 가능합니다. 스택은 설정한 간격을 두고 배치를 할 수 있으며, 레이아웃을 유지한 채로 순서를 쉽게 바꿀 수 있습니다. 참고로 스택 기능을 적용하려면 그룹을 해서 값을 줄 수 있습니다. 패딩은 주로 탭, 칩, 버튼에 사용할 수 있는 유용한 기능이에요. 영상을 통해 위 3가지 기능에 대한 사용법을 자세히 배워볼게요.
- [구성요소 상태 이해하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-06-membership/) - XD 구성요소에서 상태에 대해 알아보겠습니다. 상태.. 뭘 말하는 걸까요?.. 예를 들어 간단한 버튼에도 디폴트, 마우스 오버, 클릭했을 때 등 다양한 경우가 있죠. 이를 상태라고 합니다. 디자인 시스템 제작 시에 아주 중요한 기능이죠. 앞전에 피그마에서 배워본 variants와 비슷한 기능입니다. 간단한 버튼 예제를 만들어보면서 사용법을 쉽게 알아볼게요.
- [글래스모피즘 그래픽 만드는 방법 - 포토샵 강좌 실전](https://designbase.co.kr/photoshop-advanced-17/) - 이번 포토샵 강좌에서는 2021년 유행이었던 글래스모피즘 스타일의 그래픽을 제작해 볼게요. UI에도 많이 사용되고, CSS로 만들어주는 제너레이터도 생겼죠. 구글에 검색을 해보면 이런 스타일이 적용된 다양한 디자인 작업물들이 있죠. 포토샵으로 글래스모피즘 스타일을 바로 해보기 전에 특징을 먼저 살펴볼게요.
- [구성요소 사용법 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-05-membership/) - 저번 XD 강좌에서 에셋 화면에 색상과 문자 스타일에 대해 배워봤죠. 이번 XD 깅좌에서는 구성요소에 대해 알려드릴게요. 스케치의 심볼, 피그마의 컴포넌트와 비슷한 기능인데 사용법의 차이가 있습니다. 아주 중요한 기능이니까 자세히 배워볼게요. 다음 강좌에 나올 상태(States)와 같이 활용하면 더욱 유용하게 사용할 수 있습니다.
- [색상 및 문자 스타일 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-04-membership/) - 오늘은 xd 기능 중 색상과 문자 스타일을 배워보겠습니다. 스케치의 스타일, 피그마의 스타일과 비슷한 기능인데 이 두 가지 툴과 비교해 봤을 때 기능적인 완성도는 조금 낮습니다. 좌측 하단에 에셋 창을 켜주면 색상, 문자 스타일, 구성요소 이렇게 뜨는데요. 그중에 오늘 배워볼 부분은 색상과 문자 스타일입니다.
- [도형 및 텍스트 사용 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-03-membership/) - 이번 시간에도 가장 기본적인 도형과 텍스트를 이용해서 예제를 만들어보도록 할게요. 또 인풋 UI라 따라 하기 지루하겠지만, 똑같은 예제를 사용해서 여러분이 3가지 툴을 이용할 때 어떻게 다른지 더 명확하게 아실 수 있을 겁니다.
- [XD 인터페이스 파악하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-02-membership/) - XD 인터페이스에 대해 배워볼게요. XD도 과거와 다르게 많은 기능을 제공하고 있습니다. Xd를 스케치, 피그마와 비교해 보자면 프로젝트 규모가 작고 이미지 편집이 병행되어야 하는 상세페이지 같은 경우에 빠르고 효율적으로 할 수 있는 툴입니다. 어떤 기능이 어디에 있는지 하나하나 살펴보도록 할게요.
- [XD 툴 이해하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-01-membership/) - UI 툴 패키지 강좌에서 마지막 툴인 XD를 배워볼 차례입니다. 지금까지 배웠던 스케치와 피그마는 비슷한 부분이 많았는데, 이번에 배울 XD는 살짝 다를 수 있습니다. 그래도 사용법은 앞에서 배웠던 툴보다 살짝 더 쉽기 때문에 걱정하지 마세요. 중요한 것은 툴 사용법보다는 UI 작업을 효율적으로 하는 과정을 배워보는 것이니까 강좌 끝까지 배워보세요. 이것만 알면 이제 툴 때문에 이직 시 혹은 취업 시에 스트레스 받을 일은 없을 거예요.
- [반복적인 그래픽 쉽게 만드는 방법 - 일러스트레이터 기초 강좌](https://designbase.co.kr/illustrator-basic-22/) - 일러스트레이터에서 반복적인 그래픽을 쉽게 만드는 방법을 알아볼게요. 저번 시간에 배워봤던 Distort & Transform에서 제공하는 기능 중 Transform에 대해서 배워볼게요. 위치 조정, 크기 조정, 회전 조정, 반복 여부 등을 활용해서 파동이라던가 패턴 그래픽을 만들 수 있습니다.
- [스케치 플러그인 추천 - 스케치 강좌](https://designbase.co.kr/sketch-10-membership/) - 스케치에서 같이 사용하면 좋은 플러그인들을 소개해드릴게요. 플러그인이란, 본체에 꽂아서 새로운 기능을 추가 확장할 수 있는 장치라고 생각하면 됩니다. 스케치라는 본체에 넣을 수 있는 플러그인은 생각보다 너무나 많아요. 그중에 유용한 플러그인 Anima, rename it, distributor 이렇게 세 가지를 알아보도록 할게요.
- [스크롤 인터렉션 구현하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-20/) - 안녕하세요. 이번에는 웹 UI 스크롤 인터렉션을 구현하는 방법을 배워볼게요. 해당 예제는 '토스 채용 사이트'에 있는 인터렉션을 보고 좋아서 예제로 만들어 봤습니다. 바로 한번 해볼게요. 구현한 범위는 스크롤 인터렉션과 마우스 오버 시에 이렇게 표현이 되는 부분입니다. 이번 프로토파이에서 사용할 기능은 Variables와 트리거에서는 Chain, Detect, Mouse Over, Mouse Out 입니다. 추가로 iOS Background Blur를 사용하는 방법과 리스폰스에서 조절하는 방법도 같이 배워볼게요.
- [스케치 에셋 내보내기  - 스케치 강좌](https://designbase.co.kr/sketch-09-membership/) - 스케치에서 내보내기 하는 방법에 대해 배워보겠습니다. 내보내기는 포토샵, 일러에 익숙한 분들은 jpg, png로 저장하기라고 생각하면 쉽습니다. 하지만, 스케치와 같은 UI 전용 툴에서 내보내기를 할 경우는 딱 2가지입니다. 전체 시안 내보낼 때 아트 보드 통째로 내보내는 경우와 개발자분들이 ui를 실제로 개발할 때 사용할 수 있는 에셋들을 내보내는 경우입니다.
- [스케치에서 프로토타입 만드는 방법  - 스케치 강좌](https://designbase.co.kr/sketch-08-membership/) - 이번 스케치 강좌에서는 제공하는 프로토 타이핑에 대해 배워보는 시간입니다. 나중에 배워볼 피그마와 XD에서 제공하는 프로토 타이핑 기능들과 비교해 보면 굉장히 간단한 기능만 제공합니다. 스케치 프로토 타이핑은 인비전에서 제공하는 것처럼 링크 기반의 아트 보드 이동을 제공합니다. 간단하게 연결 및 삭제하는 방법과 미리 보기를 통해서 보는 방법을 배워볼게요.
- [리사이징과 레이아웃 이해하기  - 스케치 강좌](https://designbase.co.kr/sketch-07-membership/) - 이번 스케치 강좌에서는 리사이징과 레이아웃에 대해 배워보는 시간입니다. 리사이징과 레이아웃도 중요한 개념입니다. 모바일 UI 디자인을 하기 위해서 알아야 할 부분 때문인데요. OS도 다르고, 해상도가 너무나도 다양하기 때문에 이 기능을 활용하면 더욱 효율적으로 디자인을 할 수 있습니다.
- [심볼 응용하기  - 스케치 강좌](https://designbase.co.kr/sketch-06-membership/) - 스케치 심볼 응용하는 방법을 배워볼게요. 저번 시간에는 심벌이 필요한 이유와 심벌 등록 법과 사용법을 가볍게 알아봤죠. 실무에서 ui 디자인을 하다 보면, 남이 작업한 스케치 파일을 전달받아서 사용할 때도 많은데, 은근히 심볼을 사용할 줄 모르는 분들이 많습니다. 핵심 기능이기 때문에 효율적으로 충실히 사용하는 게 중요합니다.
- [심볼 이해하기  - 스케치 강좌](https://designbase.co.kr/sketch-05-membership/) - 스케치에서 가장 중요한 심볼에 대해 배워볼게요. 도형 스타일이나 폰트의 종류 및 크기 두께 등의 수준이 아니라 엘리먼트부터 컴포넌트까지 만들어서 활용할 수 있습니다. 저번에 배운 스타일과 같이 사용하면 배로 유용하게 사용할 수 있습니다. 디자인 시스템을 만들기 위해서는 꼭 필요한 기능입니다.
- [부트스트랩으로 웹사이트 만드는 방법 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-27/) - 유명한 프레임워크인 부트스트랩을 통해서 웹사이트를 쉽게 만드는 방법을 알아보겠습니다. 예전에 웹디자인 입문 강좌에서 부트스트랩을 통한 웹 ui 엘리먼트와 컴포넌트를 소개한적이 있었죠. 이번에는 직접 사용해보는 시간입니다.
- [파비콘 30초만에 적용하기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-26/) - 파비콘을 웹사이트에 쉽고 간단하게 적용하는 방법을 알아볼게요. 파비콘이란 favorites+icon의 합성어로, 인터넷 웹 브라우저의 주소창에 접속했을 때, 상단 탭의 왼쪽에 작게 보여지는 아이콘을 말합니다. 파비콘 이미지 크기는 몇으로 하고, 어떻게 ico파일로 출력하는지, 그리고 HTML 코드로 어떻게 넣는지 다 알려드릴게요.
- [유튜브 UI 클론 디자인 실습 예제 2 - 스케치 강좌](https://designbase.co.kr/sketch-12-membership/) - 저번 시간에 이어서 UI 클론 디자인 실습 예제를 마무리 지어볼게요. 콘텐츠 영역에 들어가는 카드 UI, 리스트 UI 등을 작업하면서 지금까지 배워본 기능들을 활용해 볼게요. 반복적으로 사용되는 요소가 무엇인가를 고민하는 게 가장 중요합니다. 큰 개념인 컴포넌트와 작은 요소 개념인 엘리먼트를 심볼로 등록하면 효율적으로 작업이 가능합니다.
- [유튜브 UI 클론 디자인 실습 예제 1 - 스케치 강좌](https://designbase.co.kr/sketch-11-membership/) - 스케치 기능들을 바탕으로 유튜브 UI 클론 디자인 실습을 진행해볼게요. UI 전용 툴들의 차이점을 배우고 실무에서 어떻게 적용해야 효율적인지 배워보는 시간이에요. 예제로 제작할 디바이스 환경에 맞는 아트보드 및 그리드를 생성하고, UI 디자인을 할 때 하는 작업 방식을 추천드립니다. 앞에서 배워본 심볼을 활용해서 앱에서 공통으로 활용되는 컴포넌트인 탭바 Top과 바텀 네비게이션을 효율적으로 만드는 방법을 배워볼게요.
- [레이어 및 텍스트 스타일  - 스케치 강좌](https://designbase.co.kr/sketch-04-membership/) - 스케치에서 중요한 기능 중 하나인 레이어 및 텍스트 스타일을 배워볼게요. 이번에 배울 스타일은 스타일 가이드를 위해 꼭 필요한 기능입니다. "컬러는 ~사용할 거야, 폰트는 이렇게 쓸 거야~!" 이런 식으로 규칙을 정할 때 사용합니다. 전체적으로 스타일을 통일시켜서 구축할 때나 운영할 때 가이드라인을 지켜 제작하기 때문에 새로운 기능을 추가하거나 전체적으로 수정하는데 들어가는 시간과 비용을 절약할 수 있는 거예요.
- [기본 도형 사용법  - 스케치 강좌](https://designbase.co.kr/sketch-03-membership/) - 스케치에서 가장 기본적인 도형과 텍스트를 이용해서 간단한 예제를 만들어볼게요.
- [스케치 인터페이스 파악하기  - 스케치 강좌](https://designbase.co.kr/sketch-02-membership/) - 스케치 인터페이스에 대해 배워볼게요.UI 전용 툴이기 때문에 UI 디자인에 필요한 기능만 있어서 우리는 불필요한 기능을 배우는데 시간을 빼앗기지 않고 핵심만 알면 됩니다. 스케치 인터페이스에 대해 하나하나 집어보죠.
- [스케치 강좌 소개  - 스케치 강좌](https://designbase.co.kr/sketch-01-membership/) - UI 툴인 스케치에 대해 배워볼게요. 각 툴마다 차이가 있는데 협업 기능이나 프로토타이핑 기능을 제외하고 딱 UI 툴의 기능적 완성도만 놓고 봤을 때 스케치가 뛰어나다고 생각해서 먼저 시작합니다. 스케치를 배운 이후에 피그마와 XD를 배울 때 어떤 부분이 차이가 있는지 비교할 수 있습니다.
- [반응형 웹디자인을 위한 최적화된 그리드 시스템 - 스케치 강좌](https://designbase.co.kr/sketch-4/) - 스케치 강좌입니다. 반응형 웹디자인을 위한 최적화된 그리드 만들기를 해보겠습니다. 크게 4가지가 있습니다. 최대폭(max-width), 컨테이너(container), 단의 개수(columns), 거터와 칼럼 넓이입니다. 효과적인 레이아웃을 만들려면 몇 단이 좋은지, 거터와 칼럼 값은 어떻게 하는 게 좋은지 확인해보세요.
- [ 인정받는 디자이너 되기 위한 에셋 내보내기와 작명법 - 스케치 강좌](https://designbase.co.kr/sketch-16/) - 스케치 강좌 열여섯 번째입니다. 스케치에서 에셋을 내보내는 방법과 에셋 작명법에 대해 알아봅시다. UI 디자인 작업이 끝나면 에셋을 어떻게 넘길지 고민이죠. 제플린에 올리면 끝일 것 같지만 에셋 작명이 남아있습니다. 아이콘, 이미지, 확장자는 어떻게 할지 등.. 실무에서 작명 시 알아두면 좋은 팁들을 알려드릴게요
- [웹디자인 그리드 시스템의 모든 것?! - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-4/) - 오늘은 웹디자인 입문 강좌 네 번째 시간입니다. 웹 디자인의 가장 기초가 될 수 있는 그리드 시스템! 그리드 시스템에 핵심인 컨테이너(전체폭), 거터(단과 단 사이 간격), 컬럼 수, 마진에 대해 배우고 그리드 시스템의 허와 실을 저와 함께 알아봅시다.
- [로티 강좌 소개 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-1/) - 안녕하세요. 드디어 Lottie.js 강좌를 시작합니다. 로티는 애니메이션을 Json 형식의 코드로 변환해서 제작해서 웹이나 앱에서 사용할 수 있도록 제작된 라이브러리입니다. 사용전 설치부터 간단한 사용법과 javascript를 활용해서 이벤트 제어하는 것까지 알아보도록 할게요. Lottie.js 강좌는 멤버십 회원을 대상으로 제작된 강좌인데, 기초적인 사용법에 대한 부분 까지는 누구나 볼 수 있도록 업로드 될 예정입니다. 고급 강좌부터는 멤버십 회원에게 제공됩니다 :)
- [자바스크립트로 스크롤 시 프레임 재생하기 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-8/) - 로티 여덟번째 강좌입니다. 이번 lottie 강좌에서는 우리가 만든 애니메이션 예제를 자바스크립트를 이용해서 스크롤 내릴때마다 프레임이 재생되게 하는 방법을 알아볼게요. 현재 브라우저의 뷰포트 화면 높이를 구해서 스크롤이 몇 프로 됐는지 알아보고 Lottie에서 애니메이션 재생하는 매소드인 anim.goToAndStop()을 사용해볼게요.
- [자바스크립트로 특정 영역 클릭하면 lottie 애니메이션 재생하기 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-6/) - 로티 여섯번째 강좌입니다. 이번 lottie 강좌에서는 자바스크립트를 이용해서 특정 영역 탭하면 lottie 애니메이션 재생하는 방법을 배워볼게요. 단순 gif, video와 다르게 js를 통해 다양한 인터렉션을 줄수있습니다.
- [자바스크립트로 애니메이션 느리게, 멈춤, 거꾸로 재생하기 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-7/) - 로티 일곱번째 강좌입니다. 이번 lottie 강좌에서는 자바스크립트를 이용해서 애니메이션 느리게, 마우스 오버시에 멈추게, 거꾸로 재생하는 방법을 알아볼게요.
- [ 유튜브 썸네일 만들때 알아야 하는 숨은 원리 - 포토샵 강좌 실전](https://designbase.co.kr/photoshop-advanced-16/) - 포토샵으로 유튜브 섬네일을 만드는 방법에 대해서 알아보도록 할게요. 단순히 특정 디자인을 하는 게 아니라 사이즈부터 타이포그래피, 이미지 활용법 등 썸네일 제작 시 유의해야 할 부분들까지 알아보는 시간입니다.
- [스켈레톤 ui, 로딩 속도를 심리적으로 빠르게 - 강좌](https://designbase.co.kr/protopie-19/) - 프로토파이로 스켈레톤 UI를 만들어 보도록 할게요. 실제 데이터가 렌더링 되기 전, 보일 화면의 윤곽을 먼저 그려서 사용자 입장에서 어떤 화면이 그려질지 예측할 수 있게 됩니다. 그리고 같은 속도의 로딩이라도 단순 회전 로딩과 비교하면 심리적으로 훨씬 빠르게 느낄 수 있습니다. 무거운 이미지나 영상을 불러오거나 데이터를 복잡한 로직에 의해 계산되는 영역에 사용하면 좋습니다.
- [사람의 눈을 이해하는 시각 보정 - 방구석 클래스](https://designbase.co.kr/room-corner-lecture-4/) - 시각 보정에 대해서 배워보도록 할게요. 사람의 눈은 굉장히 예민하고 정확하고 섬세한데, 한편으로는 심리적인 것에 약해 착시효과도 일어나게 됩니다. 시각디자인을 하고 있다면 꼭 알아야 할 개념이니까 다양한 사례들과 함께 시각 보정에 대해 배워보도록 할게요.
- [카드 UI 예제 코드로 만들기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-21/) - 웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 HTML과 CSS를 사용해서 카드 UI 예제를 코드로 제작해볼게요. 스케치로 가볍게 만들어본 예제를 보면서 어떻게 코드를 짜면 좋을지 계획을 해보는 습관을 지니는 게 좋아요. 디자인을 코드로 옮길 때는 가장 먼저 박스로 바라보는 연습이 중요합니다. 다음 시간에는 반응형 웹을 위한 미디어쿼리를 배워보도록 할게요 :)
- [내 맘대로 실루엣 커스텀 도형 만들기  - 포토샵 강좌 기초](https://designbase.co.kr/photoshop-basic-28/) - 오랜만에 포토샵 기초 강좌로 찾아왔습니다. 아주 간단한 방법으로 실루엣 커스텀 도형 등록하는 방법을 알아보는 시간입니다. 말이나 고양이, 새 등 실루엣으로 만들 이미지를 불러와서 외각을 선택한 이후에 커스텀 도형으로 등록해볼게요. 초보자도 쉽게 따라 할 수 있습니다.
- [포토샵 액션으로 작업 속도 올리기 - 포토샵 꿀팁](https://designbase.co.kr/photoshop-tip-3/) - 디자이너로서 작업하면서 속도를 높이고 싶으시죠? 가장 기본이 되는 것이 단축키 사용인 것은 여러분도 아실 거예요. 그런데 은근 자주 사용하는 기능들 중에 단축키가 없는 기능들이 꽤 많다는 사실을 아셨나요? 정렬부터 마스크 씌우기, 스마트 오브젝트 만들기, 레스터 라이즈 등등 꽤 많습니다. 이런 기능들을 포토샵 액션을 통해 등록하는 방법을 알려드릴게요.
- [뒤로가기 히스토리 100단계로 늘리는 방법 - 포토샵 꿀팁](https://designbase.co.kr/photoshop-tip-2/) - 포토샵에서 뒤로가기 히스토리 100단계로 늘리는 방법에 대해 알려드리겠습니다. 몰입해서 작업하다 보면히스토리가 아주 많이 쌓이는 경우가 발생하죠. 10분 전에 작업한 모습으로 되돌리고 싶어지는 경우가 생겨서, 뒤로 가기 하다 보면 원하는 단계까지 뒤로 안 가지는 경우가 있죠. 이럴 때 필요한게 뒤로가기 단계를 늘리면 됩니다.
- [포토샵 인터페이스 색상 바꾸기 - 포토샵 꿀팁](https://designbase.co.kr/photoshop-tip-01/) - 포토샵 꿀팁 대방출! 오늘은 포토샵 인터페이스 색상 바꾸는 방법을 알아보겠습니다. 포토샵 환경설정에서 인터페이스 설정창에서 전체적인 색상을 본인에 입맛에 맞게 바꿔보세요.
- [도장툴로 뭐든지 쉽게 복제하기 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-15/) - 이번에는 포토샵 도장툴(Clone Stamp Tool)에 대해 알아보겠습니다. 도장툴이란 무엇일까요? 말 그대로 찍어내는 것인데요. 무슨 원리지 이해를 하려면 우선 실제 도장을 찍는 단계를 잘 생각해보시면 쉽습니다. 도장을 찍기 전에 도장 모양을 선택하고 인감을 묻힙니다. 그리고 찍을 곳을 찾고 찍죠. 이 단계는 포토샵에서 도장툴 사용하는 방법과 동일합니다.
- [이미지 색상 조정하는 방법 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-14/) - 포토샵에서 제공하는 기능 중 Adjustments를 이용해 이미지의 색상을 조절하는 방법을 배워보겠습니다. 필수로 알아야 되는 기능 3가지가 있습니다. Hue/Saturate, Color Balance, Desaturate입니다.
- [이미지의 밝기 조절하는 방법 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-13/) - 포토샵 기초 강좌로 Adjustments 기능에서 이미지의 밝기 조절하는 방법에 대해 배워보겠습니다. 그중 자주 사용하는 Levels, Curves에 대해 알아봅시다. 예시에 있는 인물 사진을 밝게 톤 보정해보겠습니다.
- [그라데이션 컬러 사용하는 방법 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-12/) - 포토샵에서 그라데이션 컬러를 효율적으로 사용하는 방법을 배워보겠습니다. 그라데이션을 사용하는 두 가지 방법이 있습니다. 첫 번째는 선택영역에 툴 박스 안에 있는 그라디언트 툴을 사용하는 것이고, 두 번째는 레이어에 Add a Layer Style을 사용하는 것입니다.
- [선택 툴 알아보기 (Marquee Tool, Lasso Tool, Quick Selection Tool 등) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-11/) - 포토샵 선택 툴을 이용해서 선택 영역을 잡는 방법을 배워보겠습니다. 특정 영역을 선택하기 위해 Marquee Tool, Lasso Tool, Quick Selection Tool 등 다양한 도구들이 있습니다. 매직봉 툴처럼 자동으로 잡아주는 기능들이 보기에는 편리해보지만, 정확도가 많이 떨어지기 때문에 지양해주세요. 외각을 따야한다면 펜툴을 사용하는 게 더욱 좋습니다.
- [이미지 자유자재로 조절하기 (크기 조절, 회전, 반전, 투시, 비스듬히 하기, 왜곡 등) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-10/) - 오늘은 포토샵으로 오브젝트를 자유자재로 조절하는 방법을 배워보겠습니다. 예를 들어, 이미지 사이즈를 늘리거나 줄이는 방법 혹은 회전하기, 좌우(상하) 반전하기, 비스듬히 하기, 투시 먹이기, 왜곡 시키기 등 하나하나 배워보도록 하겠습니다.
- [내 자신을 더욱 멋있게 얼굴 보정하는 방법 - 포토샵 강좌 기초](https://designbase.co.kr/photoshop-basic-27/) - 포토샵 기초 스물일곱 번째 강좌입니다. 오늘은 포토샵을 이용해서 자기자신의 얼굴을 더욱 멋있게 보정하는 방법을 알려드릴게요. 누구나 인생샷을 본인의 프로필이나 SNS에 올리고 싶어하죠. 포토샵에서 제공하는 Liquify라는 기능을 활용해서 아주 손쉽게 얼굴 보정할 수 있습니다.
- [포토샵 폰트 옵션 파악하기 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-9/) - 포토샵으로 손쉽게 폰트 꾸미는 방법에 대해 알아보겠습니다. 폰트를 선택하고 사이즈 조절부터 두께, 자간, 행간 등 다양한 조절 방법과 레이어에 Add a layer style을 통해 다양한 효과를 주는 방법을 배워보겠습니다.
- [포토샵 브러시 완벽 이해 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-8/) - 포토샵 기초 강좌로 브러시에 대해서 완벽히 이해하는 시간입니다. 브러시하면 보통 그림 그릴 때 사용한다고 알고 계실 텐데, 포토샵으로 그림을 그린다는 것은 일러스트 작가가 아닌 이상 결코 쉬운 일이 아닙니다. 오히려 배너에 들어가는 이미지 제작할 때 자주 사용됩니다. 포토샵 브러시 사이즈를 쉽게 조절하고 투명도를 조절하는 방법을 배워보겠습니다.
- [손쉽게 10초 만에 그리드 만들기 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-07/) - 포토샵 기초 강좌입니다. 오늘은 포토샵 그리드에 대해 배워보겠습니다. 시각 디자인에서 작업하기 전에 시각적인 규칙성을 위해서 그리드를 만들죠. 그렇다면, 그 가이드라인은 어떻게 만들까요? 아주 손쉽게! 10초 만에 완벽한 그리드를 만드는 방법을 배워보겠습니다.
- [상황에 맞는 저장 방식 이해하기 (JPG, PNG, GIF) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-06/) - 포토샵 기초 강좌로 작업물을 저장하는 방식에 대해 배워볼게요. 작업물을 만들고 나서 가장 중요한 것이 상황에 맞는 형식의 파일로 저장하는 것입니다. JPG(JPEG)와 PNG의 차이, 그리고 GIF란 어떨때 사용하는 것인가 알아보겠습니다. 가끔 보이는 .psb 확장자에 대해서도 알아보죠
- [캔버스 사이즈의 이미지 사이즈 차이점 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-04/) - 포토샵 기초 강좌입니다. 포토샵에서 캔버스 사이즈와 이미지 사이즈의 차이를 알아볼게요. 이미지 자체의 크기를 키우거나 단위, 해상도를 조절하고 싶을때 이미지 사이즈 변경을 사용하고, 이미지의 기본 사이즈는 유지하고 배경의 넓이만 조정하고 싶을때 캔버스 사이즈 변경을 사용합니다.
- [레이어와 스마트 오브젝트 이해하기 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-05/) - 포토샵 기초 강좌로 아주 중요한 레이어와 스마트 오브젝트에 대해 알아 볼 예정입니다. 레이어란 무엇인지에 대한 내용부터 레이어를 생성, 삭제, 병합, 그룹핑 등 가벼운 기능을 배워보겠습니다. 스마트 오브젝트의 장점은 원본 해상도를 유지해줍니다. 그렇기 때문에 디자인 작업 상에 유지보수에 용이합니다.
- [픽셀과 해상도의 이해 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-03/) - 일반인, 왕초보도 쉽게 배울 수 있는 디자인 교육 채널입니다. 포토샵 기초 강좌입니다.픽셀과 해상도에 대해 알아보겠습니다. :) 포토샵은 기본적으로 픽셀 기반의 툴입니다. 영상을 통해 픽셀이 무엇인지 알아보세요. 정확히 알아야 나중에 결과물을 웹 상에 업로드하거나 출력했을 때 문제가 생기지 않습니다~!
- [RGB와 CMYK 색상모드 차이 이해하기 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-02/) - RGB 색상모드는 가산혼합 혹은 빛의 삼원색으로 불리며, 디지털에서 사용됩니다. CMYK 색상모드는 감산혼합, 색료혼합으로 불리며, 인쇄에서 사용됩니다. 본인 작업물의 결과가 디지털에 업로드되는 것인지, 인쇄물로 출력될 것인지에 따라 바르게 색상모드를 설정해주세요.
- [포토샵 인터페이스 파악하기 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-01/) - 포토샵 기초 강좌입니다. 오늘은 포토샵 인터페이스에 대해 알아보겠습니다. 상단 메뉴바, 툴바, 옵션바, 캔버스, 패널 등을 배워볼 예정입니다.
- [ 힐링 브러시 툴로 잡티 없애기(여드름, 기미, 주근깨 없애는 방법) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-16/) - 오늘은 아주 유용한 강좌입니다. 힐링 브러시 툴로 여드름, 기미, 주근깨 등 얼굴에 있는 잡티를 아주 손쉽게 없애보겠습니다. 점이나 여드름 하나 지우는데 걸리는 시간은 0.5초 클릭 한 번입니다. 얼굴에 잡티가 많으면 본연의 피부색이 가려서 좀 더 어두워 보이게 됩니다.
- [로그인 UI 화면 예제 코드로 만들기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-20/) - 웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 HTML과 CSS를 사용해서 로그인 페이지 UI를 코드로 제작해볼게요. 지금까지 배운 내용이 총집합했어요! 부모와 자식에 대한 부분부터 Float, relative, z-index 등 꼭 알아야 하는 개념들을 이용해서 예제를 제작할 수 있어요.
- [흐리게, 선명하게 보정하기 Blur & Sharpen Tool - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-17/) - 포토샵 기초 강좌입니다. 오늘은 Blur Tool과 Sharpen Tool을 이용해서 사진을 흐릿하게 하거나 선명하게 보정하는 방법을 알아보겠습니다. 마치 DSLR로 찍은 사진처럼 아웃포커싱 효과를 줄 수 있습니다. Blur는 이미지 흐리게 하고, Sharpen은 이미지 선명하게 합니다.
- [밝게, 어둡게 보정하기 Dodge & Burn Tool - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-18/) - 포토샵 기초 강좌입니다. 오늘은 사진 보정할 때 자주 사용하는 Dodge 툴과 Burn 툴을 배워보겠습니다. Dodge 툴은 밝게 할 때 사용하고 Burn 툴은 어둡게 할 때 사용합니다. 예제를 통해 같은 이미지가 두 기능을 통해 얼마나 다른 느낌으로 변하는지 확인해보세요.
- [이전단계 되돌리기, 다음단계, 히스토리 패널 사용법 (Undo, Redo, History Panel) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-19/) - ​오늘은 포토샵에서 이전 단계로 되돌리는 방법과 다음 단계로 이동하는 방법, 그리고 히스토리 패널에 대해 배워보겠습니다. 사진 보정이나 디자인 작업을 하다보면 실수했거나 맘에 안들어서 이전 단계로 되돌려야 되는 경우가 있죠. 그럴 때는 되돌리기를 하면 됩니다. 영상을 통해 배워볼게요.
- [오브젝트손쉽게 정렬하기 - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-20/) - 포토샵 기초 강좌로오브젝트들을 정렬하는 방법을 배워볼게요. 포토샵에서 제공하는 Align을 이용해서 다양한 기준의 정렬을 할 수 있습니다. 좌측 정렬, 중앙 정렬, 우측 정렬, 상단 정렬 외에도 일정한 간격으로 정렬할 수도 있습니다.
- [이건 진짜 모르면 안되는 플러그인 Anima - 스케치 강좌](https://designbase.co.kr/sketch-14/) - 애니마 툴킷의 주요 기능은 크게 3가지로 나뉩니다. 레이아웃 관련 기능, 프로토타입 관련 기능, 내보내기 관련 기능입니다. 그중, 짧은 시간 안에 중점적으로 배워볼 핵심 기능은 Layout - Stack, Padding, Pin과 Prototype - Links, Breakpoints
- [UI 디자이너가 설명하는 스케치(Sketch)를 꼭 써야 하는 이유 - 스케치 강좌](https://designbase.co.kr/sketch-1/) - 드디어 제 현재 직업에 가장 최적화된 스케치 강좌를 시작합니다!! 실무에서 UI 디자이너로 활동하고 있으며, 사용한 지는 4년 정도 됐네요. 스케치도 그동안 많이 업데이트됐고, 플러그인도 방대하고 막강해졌습니다. 차차 실전 예제를 통해 스케치를 배워보도록 하죠.
- [스케치(Sketch) 툴 인터페이스 파악하기 - 스케치 강좌](https://designbase.co.kr/sketch-2/) - 스케치 강좌 두 번째입니다. 스케치 툴에 익숙해지려면 인터페이스를 훑어봐야겠죠? 익숙해질 때까지 사용하시면 아주 쉽다고 느껴지실 거예요. 스케치에서 제공하는 메뉴바부터 툴바, 레이어, 캔버스, 속성값 조절 창 등 하나하나 살펴봅시다.
- [제플린 올바르게 사용하는 방법 - 스케치 강좌](https://designbase.co.kr/sketch-10/) - 스케치 강좌 열 번째입니다. 이번에는 핸드오프 툴로 아주 유명한 제플린을 알려드릴게요. 제플린 회원가입부터 제플린 맥 OS 툴 설치, 스케치 전용 제플린 플러그인 설치까지 해보고 어떻게 작동을 하고 연동을 하는지 배워봅시다. 생각보다 아주 간단합니다. 에셋 출력시 유의사항도 알아봅시다.
- [제플린 대체용 가이드라인 플러그인 Sketch Measure - 스케치 강좌](https://designbase.co.kr/sketch-12/) - 스케치 강좌 열 두 번째로 추천 플러그인 Sketch Measure은 가이드라인을 도와주는 플러그인입니다. 보안에 예민한 프로젝트, 제플린을 사용하지 않는 회사 업무 환경, 가이드라인 문서 제작 이런 경우 제플린 대체용으로 사용해보세요.
- [펜 툴로 외각 따내기 (Pen Tool) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-21/) - 포토샵 기초 스물한 번째 강좌입니다. 이번 영상을 통해 펜 툴을 사용해 물체의 외각을 따는 방법을 배워볼 거에요. 예제로는 거북이의 외각을 완벽하게 따보겠습니다. 외각을 따는 작업할 때 팁은 영상을 통해 확인해보세요.
- [크롭 툴로 이미지 자르기 (Crop Tool) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-22/) - 포토샵 기초 강좌입니다. 크롭 툴을 활용해서 이미지를 자르는 방법을 배워보겠습니다. 1:1, 16:9 등의 비율로 자를 수 도 있으며, 1080*1080px 등 가로, 세로 값과 해상도를 조절해서 캔버스를 자를 수 있습니다.
- [블렌딩 모드의 핵심 기능 (Blending Mode) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-23/) - 오늘은 포토샵 블렌딩 모드(Blending Mode)에 대해 알아보겠습니다. 블렌딩 모드란 말 그대로 혼합 모드입니다. 레이어 간의 색상 값을 가지고 더하거나, 빼고, 곱하거나 나눕니다. 합성을 하기 위해 사용되는 기능이라고 생각하시는 게 더 편할 것 같네요. 주로 사용하는 핵심 4가지인 Multiply, Screen, Overlay, Color에 대해 알아볼게요.
- [합성의 필수 기능 레이어 마스크 (Layer Mask) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-24/) - 포토샵 기초 강좌로 합성의 필수 기능인 레이어 마스크에 대해 알아보겠습니다. 마스크 쓰면 입이 가려지듯이 특정 영역을 마스크를 씌우면 그 영역은 가려집니다. 합성에 꼭 필요한 기능이에요. 포토샵에서 제공하는 지우개 툴과는 다르게 마스크로 숨겨진 픽셀의 손실 없이 나중에 마스크를 다시 편집할 수 있습니다.
- [클릭 몇 번으로 패턴 만들기(격자, 사선, 땡땡이, 기타 그래픽) - 포토샵 기초 강좌](https://designbase.co.kr/photoshop-basic-25/) - 포토샵을 이용해서 손쉽게 패턴을 만들어볼 거예요. 격자무늬, 사선, 점 땡떙이, 사선 땡땡이, 기타 그래픽(본인이 원하는)을 패턴으로 만들어서 사용하는 방법을 배워볼게요. 포토샵에서 클릭 몇 번으로 만드는 패턴을 통해 여러분이 원하는 패턴 디자인을 해보세요.
- [내용 인식 채우기로 지우기 3초 컷 - 포토샵 강좌 기초](https://designbase.co.kr/photoshop-basic-26/) - 포토샵 기초 스물여섯 번째 강좌입니다. 오늘은 포토샵을 이용해서 지우고 싶은 부분을 빠르게 자동으로 지워우는 방법을 알아볼게요. 포토샵에서 제공하는 내용 인식 채우기를 사용하면 2~3초면 아주 자연스럽게 지워줍니다.
- [진짜보다 진짜같은 골드 효과 (PSD 완성본 공유) - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-2/) - 이번에는 포토샵을 이용해서 진짜보다 더 진짜 같은 골드 텍스트 효과(Gold Text Effect)를 해보겠습니다. 생각보다 간단하고 무겁지도 않습니다. 포토샵으로 텍스처 공부하시는 분들은 한번 따라 해보세요.
- [GIF로 움직이는 이모티콘 만들기(2편) - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-8/) - 1편에 이어서 GIF로 움직이는 이모티콘 만들기 마무리 강좌입니다. 움직이는 이모티콘을 만들기 위해 일러스트레이터로 만든 이미지를 포토샵으로 불러와서 움직이는 이모티콘 GIF로 출력하는 방법을 배워보도록 할게요. 1편을 보지 않으신 분들은 1편을 본 이후에 2편을 봐주세요~!
- [애니메이션 목업 직접 만드는 방법 - 포토샵 강좌 실전](https://designbase.co.kr/photoshop-advanced-15/) - 포토샵 실전 열다섯번 강좌입니다. 포토샵으로 애니메이션 목업을 직접 만드는 방법을 알려드릴게요. 이번 강좌의 준비물은 딱 두가지입니다. 목업 이미지로 사용될 무료 이미지 찾는것과 영상으로 사용될 ui 프로토타이핑 영상(mp4) 파일입니다.
- [구글 웹 폰트 적용하고 자간 행간 조절하기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-17/) - 웹 디자이너를 위한 웹 코딩 강좌 열일곱 번째 시간입니다. 이번 시간에는 구글 웹폰트를 사용해서 고퀄리티의 무료 웹폰트를 불러오는 방법을 알아보고 폰트의 두께, 자간과 행간을 조절하는 방법을 알아볼게요. 디자이너에게 폰트는 중요한 요소인데 폰트 사용에 따른 라이센스는 조심해야하죠. 저작권 걱정없는 구글 무료 웹폰트 적용해보도록 할게요. link 태그를 사용해서 쉽게 불러올 수 있습니다.
- [네이버 블로그 홈페이지형 만드는 꿀팁 - 방구석 클래스](https://designbase.co.kr/room-corner-lecture-3/) - 이번 방구석 클래스에서는 네이버 블로그를 홈페이지 형 블로그로 만드는 방법을 알아볼게요. 기본적으로 네이버 블로그 사용법을 이해하고, 위젯에 대한 사용법과 간단한 웹 코드인 HTML을 배워볼 예정입니다.
- [고퀄리티의 Start Animation 구현하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-18/) - 드디어...프로토파이 마지막 강좌입니다. 이번에는 웹 디자인 입문 강좌에서 사용된 예제를 프로토파이로 제작을 해보는 시간을 가져볼게요. 회사마다 다르지만, Start Animation 혹은 진입 애니메이션이라고도 하는데 차근차근 지금까지 배워본 기능들을 활용해서 완성해보도록할게요.
- [Lottie를 프로토파이에 사용하는 방법 - 프로토파이 강좌](https://designbase.co.kr/protopie-17/) - 프로토파이에서 Lottie도 사용할 수 있습니다. 로티 애니메이션에 대해서 잘 모르시는 분들이 계시다면... 로티 강좌도 다루고 있으니 같이 보시는 것도 추천드립니다. 프로토파이에서 video 레이어를 넣는 것처럼 로티 애니메이션을 넣는 방법에 대해서 배워보도록 할게요.
- [ Sound 인터렉션 만들기 - 프로토파이 강좌](https://designbase.co.kr/protopie-16/) - 프로토파이에서 기본으로 제공하는 기능 중 Sound 기능을 사용해서 주변 소리에 반응하는 인터렉션 구현하는 방법을 알아볼게요. 재미난 예제를 통해 어떻게 사용되는지 빠르게 알아볼게요.
- [Tilt 기능사용해서 기울기에 반응하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-15/) - 프로토파이에서 기본으로 제공하는 기능 중 Tilt 기능을 사용해서 기울기에 반응하는 인터렉션 구현하는 방법을 알아볼게요.
- [클라우드 활용 & 모바일 앱에서 확인하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-14/) - 프로토파이에서 제작한 프로토타입을 클라우드를 활용해서 웹으로 공유하는 방법과 모바일 앱을 설치해서 디바이스에서 바로 사용하며 확인할 수 있는 방법을 알려드리겠습니다.
- [체인과 레인지 이해하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-13/) - 프로토파이에서 체인과 레인지 개념 완벽하게 이해하는 방법을 알아볼게요. 레인지는 앞에서 배워본 조건과 비슷한 개념입니다. 특정 레이어를 기준으로 그 안에 속성값의 범위를 지정해서 그에 맞는 리스폰스를 작동하는 개념입니다. 체인이란 이름처럼 어떤 트리거가 있으면 그 트리거에 대해 연쇄작용을 하는거예요. 자세한 내용은 영상을 통해 배워보도록 하죠 :)
- [조건 사용해서 토글 버튼 만들기 - 프로토파이 강좌](https://designbase.co.kr/protopie-12/) - 이번시간에는 프로토파이에서 조건(Condition) 개념을 이해하고 토글 버튼 만들어볼게요.
- [함수 개념 이해하고 글자수 세기 프로토타이핑하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-11/) - 프로토파이에서 함수(Function) 개념 이해하고 글자수세기 프로토타이핑을 만드는 방법을 배워볼게요.
- [변수 개념 완벽하게 이해하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-10/) - 프로토파이에서 변수(Variable) 개념 완벽하게 이해하는 방법을 알아볼게요. 변수라는 것은 어떤 정보를 컴퓨터 저장하는 공간에 이름을 붙이는 것인데요, 프로토파이에서는 숫자, 텍스트, 컬러를 변수로 등록이 가능합니다. 변수 패널 사용법과 리스폰스 Assign에 대해서 알아볼게요. 예시를 통해 익히면 더욱 쉽게 이해할 수 있습니다.
- [쉬운 예제 제작부터 출력까지 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-9/) - 로티 아홉번째 강좌입니다. 이번 lottie 강좌에서는 마지막으로 간단한 예제를 제작해보는 시간이에요. 일러스트레이터로 간단한 얼굴 일러스트를 그리고, 에프터이펙트로 간단한 예제를 만들어 출력해서 코드로 적용하는 방법까지 전체적으로 알아볼게요.
- [프로퍼티 개념 완벽하게 이해하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-9/) - 프로토파이에서 프로퍼티(Property) 개념 완벽하게 이해하는 방법을 알아볼게요. 프로퍼란 속성이라는 뜻인데요, 객체 내부의 속성을 의미합니다. 말이 어렵죠... 하지만, 예제를 통해 직접보면 아주 쉽게 이해가 가실꺼에요. 어떻게 하는지 같이 살펴보도록 할게요!
- [input 레이어 활용해서 예제 만들기 - 프로토파이 강좌](https://designbase.co.kr/protopie-8/) - 프로토파이 input 레이어를 활용해서 로그인 페이지 Validation 표현하는 예제 만들기를 해볼게요. input 레이어를 이용하면 네이티브 앱에서 사용하는 키보드를 제공해서 직접 타이핑이 가능합니다. Return 기능도 같이 알아보면서 진짜 개발된 앱처럼 표현하는 방법을 배워봐요. 예제 파일은 아래 링크를 통해서 받으실 수 있습니다.
- [로티 출력된 코드 간단하게 정리하기 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-5/) - 로티 다섯번째 강좌입니다. 이번 lottie 강좌에서는 출력한 코드를 효율적으로 작업하기 위해 코드를 분리 및 정리하는 방법을 알아볼게요. HTML, CSS, JS, Json 파일로 다 쪼개서 HTML은 HTML파일에서, CSS는 CSS파일에서, JS는 JS파일에서 나눠서 작성후 연결해서 가독성과 효율성을 높여보도록 할게요!
- [로티 출력된 코드 분석하기 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-4/) - 로티 네번째 강좌입니다. 이번 lottie 강좌에서는 출력한 코드를 분석하는 시간을 가져볼게요. HTML, CSS, JS, Json 타입으로 나뉩니다. 어떻게 동작하는지 살펴보도록 할게요. 이후 강좌부터는 멤버십 회원을 대상으로 제공중입니다. 구독 옆에 '가입 버튼'을 통해 가입 후 영상을 시청하실 수 있습니다 :)
- [에프터이펙트 Bodymovin 사용법 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-3/) - 로티 세번째 강좌입니다. 저번 강좌에서 설치한 에프터이펙트 익스텐션인 Bodymovin사용 방법을 알아볼게요. Bodymovin은 lottie를 사용할 수 있도록 출력을 도와주는 익스텐션입니다. 출력후 데모 확인해서 제대로 작동하는지 확인까지 해보도록 할게요.
- [Scene을 활용해서 페이지 이동하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-7/) - 프로토파이 Scene을 활용해서 페이지간의 이동하는 방법을 알아볼게요. Scene을 사용하는 이유는 두가지가 있습니다. 첫번째는 한 화면에 많은 애니메이션을 적용하면 복잡해지는데, 화면별로 나누면 복잡하지 않게 효율적으로 관리가 가능합니다. 두번째는 Jump라는 리스폰스를 활용해서 Scene간의 이동할 수 있습니다.
- [페이징 적용하는 방법 - 프로토파이 강좌](https://designbase.co.kr/protopie-6/) - 프로토파이에서 페이징 적용하는 방법을 알아볼게요. Paging Container라는 기능을 활용해서 특정 영역에서 상하, 좌우로 paging 처리할 수 있습니다. 주로 Card 타입의 UI에서 Carousel 효과를 줄때 사용할 수 있습니다. 예제로는 배너 영역을 좌우로 스와이프하면 넘어갈 수 있도록 사용했습니다~!
- [페이지 스크롤 설정하는 방법 - 프로토파이 강좌](https://designbase.co.kr/protopie-5/) - 이번에는 프로토파이에서 페이지 스크롤하는 방법을 알아볼게요. scroll container를 사용해서 특정 영역에 가로 혹은 세로로 스크롤 옵션을 줄 수 있습니다. 자세한 내용은 영상을 통해서 배워보도록해요 :)
- [Lottie 사용을 위한 환경 세팅하기 - Lottie.js 강좌](https://designbase.co.kr/lottie-js-2/) - 로티 두번째 강좌입니다. lottie.js를 사용하기 위해서는 여러가지 설치가 필요합니다. 우선 에프터이펙트에 lottie를 사용할 수 있도록 출력을 도와주는 Bodymovin이라는 익스텐션 설치하는 방법을 알아볼게요.
- [핵심 개념 오브젝트, 트리거, 리스폰스 - 프로토파이 강좌](https://designbase.co.kr/protopie-3/) - 프로토파이의 핵심 개념을 이해하는 시간입니다. 프로토파이를 사용하려면 크게 3가지를 이해하면 되는데 오브젝트, 트리거, 리스폰스 입니다. 오브젝트(Object) - 어떤 인터렉션을 주려고 하는 물체를 말합니다. 트리거(Trigger) - 특정 이벤트를 발생하기 위한 행동을 말합니다. 예를 들면, 탭, 더블탭, 드래그 이런 행동이 있습니다. 리스폰스(Response) - 특정 오브젝트에 특정 트리거를 했을 때에 대한 반응을 말합니다.
- [인터페이스 파악하기 - 프로토파이 강좌](https://designbase.co.kr/protopie-2/) - 이번 시간에는 프로토파이 인터페이스를 파악하는 시간이에요. 크게 5가지로 나눌 수 있는데요. 상단에 Tool bar, 좌측에 Layer Panel, 가운데 Artboard 영역 우측에 Animation Panel, 그리고 Preview 영역 이렇게 있습니다. 저랑 같이 한번 살펴봐요.
- [프로토파이 강좌 소개 - 프로토파이 강좌](https://designbase.co.kr/protopie-1/) - 드디어 프로토파이 강좌를 시작합니다! 이번 시간에는 프로토파이 강좌 소개를 하는 시간이에요. 목적 자체는 유료 강좌로 제작됐지만, 기본적으로 알아두면 좋은 기본 개념인 '07.Scene을 활용한 페이지 간 이동' 영상까지는 유튜브에 무료로 업로드될 예정입니다. 그 이후에 고급 기능과 개념들에 대한 강좌 영상은 멤버십 회원으로 가입해주시면 볼 수 있습니다.
- [ 배경이미지 넣는 방법 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-16/) - 웹 디자이너를 위한 웹 코딩 강좌 열여섯 번째 시간입니다. 이번 시간에는 CSS를 활용해서 Background 이미지를 넣는 방법을 알아볼게요. HTML에서 img 태그와 무엇이 다른지도 같이 살펴보며 CSS에서 background 속성을 어떻게 쉽고 효율적으로 넣는지도 알아보도록 할게요.
- [디자인 작업 전 꼭 알아야 할 기능 Stack, Padding, Scroll  - 어도비 XD 강좌](https://designbase.co.kr/adobexd-9/) - 어도비 XD 아홉 번째 강좌입니다. 이번 강좌에서는 XD에서 제공하는 기능 중 스택과 패딩을 배워볼게요. 레이아웃을 만들거나 인라인 버튼을 만들거나 다양한 상황에서 스택과 패딩을 활용하면 효율적으로 작업이 가능합니다.
- [제플린 사용법은 이걸로 끝 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-8/) - 어도비 XD 여덟 번째 강좌입니다.XD에서 제플린을 사용하는 방법을 배워보겠습니다. 예전에 스케치에서 제플린 사용법을 배워봤는데 이번에는 XD! 사용 시 주의해야 할 부분은 딱 두 가지입니다. 크기나 간격 등의 수치가 정수로 떨어지게 조정해야 하는 것과 아이콘같이 벡터로 내보내야 하는 경우는 XD 상에서 내보내기를 활성화시켜줘야 합니다.어도비 XD 여덟 번째 강좌입니다. 이번 강좌에서는 XD에서 제플린을 사용하는 방법을 배워보겠습니다. 예전에 스케치에서 제플린 사용법을 배워봤는데 이번에는 XD! 사용 시 주의해야 할 부분은 딱 두 가지입니다. 크기나 간격 등의 수치가 정수로 떨어지게 조정해야 하는 것과 아이콘같이 벡터로 내보내야 하는 경우는 XD 상에서 내보내기를 활성화시켜줘야 합니다. 제플린을 왜 사용해야 하는지부터 소개 후 자세한 제플린 사용법을
- [반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh - 웹 코딩 강좌](https://designbase.co.kr/webcoding-15/) - 웹 디자이너를 위한 웹 코딩 강좌 열다섯 번째 시간입니다. 오늘도 CSS에서 반응형으로 코딩할 때 자주 사용하는 단위에 대해서 배워볼게요. %, em, rem, vw, vh 이렇게 5가지를 알아볼게요. 평소에 몇 개는 알고 몇 개는 어렴풋이 알고 있었다면 이번 강좌를 통해 직접 눈으로 보면서 알아보도록 해요.
- [CSS Float 사용법 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-14/) - 웹 디자이너를 위한 웹 코딩 강좌 열네 번째 시간입니다. 오늘도 Float에 대해서 배워볼게요. 레이아웃을 구현하거나 특정 요소의 위치를 좌측이나 우측으로 보낼 때 사용합니다. 함께 알아둬야 할 개념인 Clear에 대해서도 같이 배워볼게요.
- [레이어와 에셋 정리하는 법 (Feat. Zeplin) - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-14/) - 오늘은 웹디자인 입문 강좌 열네 번째 시간입니다. 제가 준비한 마지막 웹디자인 입문 강좌입니다. 레이어와 에셋을 정리하는 방법과 제플린에 업로드하는 방법을 알려드릴게요. 실무에서의 팁 역시 같이 담았습니다. 웹 디자인의 실력은 스스로 계속해서 작업해보면서 수정하면서 늘어요. 이 강좌를 시작으로 여러분만의 디자인을 해보세요. 고생 많으셨습니다.
- [웹디자인 입문 강좌](https://designbase.co.kr/start-webdesign-basic-course/) - 사수가 없어서 시작을 어떻게 해야될지 모르겠어요, 웹디자이너가 되고 싶은 학생인데 학교에서 따로 안 배워요, 전 웹디자이너가 아닌데 회사에서 시켜요. 일반적으로 웹 디자인 혹은 앱 디자인을 하고 싶은 분들의 가장 큰 고민은 이 3가지라고 생각이 됩니다. 웹 디자인 기초부터 배워봅시다.
- [아직도 웹사이트 만드는 게 어려우세요? - 방구석 클래스](https://designbase.co.kr/room-corner-lecture-1/) - 이번 방구석 클래스에서는 '윅스로 코딩 없이 나만의 웹사이트 만들어보는 방법'을 알아볼게요. 윅스 많이 들어보셨죠? 광고에 하도 많이 나와서 뭔지는 대략 알겠는데 해보지 않은 분들에게 도움 되는 영상을 가져왔습니다.
- [웹플로우, 코딩 공부 전에 배워야 할 웹 제작 툴 - 방구석 클래스](https://designbase.co.kr/room-corner-lecture-2/) - 코딩을 공부하기 전에 알아두면 좋은 웹 제작 툴인 웹 플로우를 알아볼게요. 웹 플로우(webflow)는 코딩 없이 사이트를 쉽게 제작이 가능합니다. 윅스와는 또 다른 느낌의 툴입니다. 디자인 툴과는 다르게 코딩이 어떻게 되는지 알아볼 수 있는 시간을 가져봐요.
- [초간단 개발환경 세팅하기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-2/) - 웹 디자이너를 위한 웹 코딩 강좌 두 번째 시간입니다. 웹 코딩에 대한 이해와 실제 작업을 하기 전에 최소한의 준비물이 있습니다. 바로 에디터 툴! 마치 포토샵과 같은 거예요. 물론 그림판으로 그림을 그리듯, 메모장으로도 코드를 작성할 수는 있지만... 개인적으로 굳이 그렇게 해야 하나 싶어요. 저는 개인적으로 비주얼 스튜디오 코드를 사용합니다. 브라켓, 아톰, 서브라임 텍스트, 스톰 등등의 좋은
- [웹 언어 HTML, CSS, Javascript의 역할 파악하기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-3/) - 웹 디자이너를 위한 웹 코딩 강좌 세 번째 시간입니다. 웹 개발에는 무수히 많은 언어가 있습니다. 웹 개발에는 크게 프론트 앤드 개발과 백 앤드 개발로 나뉩니다. 그중에 디자이너로서 배우기 쉬운 영역인 프론트 앤드 개발 중 마크업 언어를 배울 예정입니다. 우리는 새로운 영역에 학습에서 흥미를 유지하기 위해 HTML, CSS를 중점적으로 배울 거지만 Javascript까지는 어떤 역할인지 빠르게 배워보도록
- [꾸밈을 담당하는 CSS의 문법과 연결 방법 3가지 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-5/) - 핵심 요약 CSS에 대한 추가 학습이 필요하다면 아래 링크를 참고해 주세요. CSS에 대한 자세한 정보들이 있습니다. 당장 외우지 말고 필요할 때 그때그때 찾아보면 됩니다 : ) 일단은 북마크해두세요ㅎㅎhttps://www.w3schools.com/css/default.asp HTML에 사용한 태그를 선택자에 넣고 스타일 속성과 값을 입력해 주면 스타일을 입힐 수 있습니다.생각보다 아주 간단한 문법이에요.이제 html과 어떻게 연결해서 사용하는 방법부터 알아야겠죠?html과 css를 연결하는 방법은 3가지인데,
- [뼈대를 담당하는 HTML의 문법과 문서 구조 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-4/) - 웹 디자이너를 위한 웹 코딩 강좌 네 번째 시간입니다.웹 코딩 강좌에서는 HTML, CSS를 중점적으로 배운다고 했었죠. 오늘은 그중에 뼈대를 담당하는 HTML을 배워볼 거예요. 기본적으로 어떤 문법으로 사용하는지, HTML의 문서 구조는 어떻게 이루어져 있는지 아주 간단한 예제를 통해 배워봐요~!영상에서도 말하지만 외우려고 노력하지 말고!! 대략적으로 이런 '느낌'이구나를 유지해 주세요. 끝까지 완주할 때까지 흥미를 잃으면 안 됩니다! 예제
- [HTML + CSS로 버튼 만들기(Feat. 마우스 오버) - 웹 코딩 강좌](https://designbase.co.kr/webcoding-6/) - 핵심 요약 버튼을 어떻게 만드는지 알아봤습니다.영상을 보고 따라해보세요 하단에서 코드를 확인해보세요. HTML 코드 버튼 예제 확인 CSS 코드 button{ width:120px; height: 40px; color:#fff; background: #004fff; font-size: 16px; border:none; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,79,255,0.3); transition:0.3s; position: absolute;
- [Card UI 코드로 만들기(Class와 ID) - 웹 코딩 강좌](https://designbase.co.kr/webcoding-7/) - 웹 디자이너를 위한 웹 코딩 강좌 일곱 번째 시간입니다. 오늘은 Card UI를 코드로 만들어보는 시간입니다. HTML과 CSS를 활용해서 어떻게 만드는지 예제를 통해 배워볼 수 있어요. 오늘 중점적으로 배워볼 개념은 Class와 ID입니다. 아주 중요하니까 꼭 알아가도록 해요 :)
- [부모와 자식 관계 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-9/) - 웹 디자이너를 위한 웹 코딩 강좌 아홉 번째 시간입니다. 부모와 자식에 대한 개념을 알아볼게요. 특정 class나 id 안에 있는 요소에만 스타일을 적용시키고 싶을 때 사용합니다. Javascript를 할 때도 비슷한 개념이 있어서 알아두면 좋습니다.
- [스타일 초기화를 위한 Reset.css & Normalize.css - 웹 코딩 강좌](https://designbase.co.kr/webcoding-10/) - 웹 디자이너를 위한 웹 코딩 강좌 열 번째 시간입니다. 브라우저에서 제공하는 기본 스타일을 초기화하는 방법을 알아볼게요. 내가 코드로 넣지도 않은 스타일이 있다면 답답하죠? 그러기 위해서는 스타일을 초기화하는 코드를 넣어야 합니다. Reset.css 와 Normalize.css 두 가지를 알아볼 거예요.
- [위치를 내 맘대로! CSS Position 이해하기 - 웹 코딩 강좌](https://designbase.co.kr/webcoding-12/) - 웹 디자이너를 위한 웹 코딩 강좌 열두 번째 시간입니다. 레이아웃을 짜기 위해 아주 중요한 포지션에 대해 배워볼게요. 박스를 본인이 원하는 위치로 옮기는 방법을 배워볼게요. 포지션에는 5가지 속성이 있는데 최신 브라우저에만 적용되는 Sticky를 제외하고 Static, Relative, Absolute, Fixed에 대해 예제를 통해 알아보도록 해요.
- [CSS z-index로 앞뒤로 보내기(feat. parallax 효과) - 웹 코딩 강좌](https://designbase.co.kr/webcoding-13/) - 웹 디자이너를 위한 웹 코딩 강좌 열세 번째 시간입니다. 포토샵 레이어와 비슷한 개념으로 css z-index를 통해 앞뒤 순서 정할 수 있는 방법을 배워볼게요. 아주 쉽습니다. 포지션을 배웠다면, 같이 알아두면 되는 개념이에요. z-index의 기본값은 0이고, z 축 기준으로 앞으로 보내려면 수치를 크게 하면 됩니다. 음수로도 표현이 가능합니다. z-index를 사용하려면 꼭 position에 relative, absolute, fixed와 같이 값이 있어야 적용됩니다.
- [웹디자인 실습 PC 카테고리 페이지 - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-10/) - 오늘은 웹디자인 입문 강좌 열 번째 시간입니다. 메인 페이지 PC 시안은 끝냈으니 이번에는 카테고리 페이지 PC 시안을 작업해볼게요. 카테고리 페이지는 반복되는 콘텐츠가 많아서 심볼을 이용한 단순 반복 작업을 위한 인내심이 필요합니다.
- [웹디자인 실습 PC 섹션, 푸터 디자인 04 - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-9/) - 오늘은 웹디자인 입문 강좌 아홉 번째 시간입니다. 저번 시간에 이어 럭셔리 클래스 영역과 푸터 영역 디자인을 이어서 해보도록 할게요. 이걸로 메인 페이지 PC 시안은 끝입니다 :)
- [웹디자인 실습 PC 섹션 디자인 03 - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-8/) - 오늘은 웹디자인 입문 강좌 여덟 번째 시간입니다. 저번시간에 이어 하단 영역 디자인을 이어서 해보도록 할게요. 이번에는 Find your bmw와 Journal 섹션 영역 디자인을 해보겠습니다. 이번에도 스케치 심볼을 활용해서 편하게 디자인을 하는 방법을 같이 알아봅시다.
- [웹디자인 실습 PC 배너 디자인 02 - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-7/) - 오늘은 웹디자인 입문 강좌 일곱 번째 시간입니다. 저번시간에는 공통으로 적용될 헤더(Header)를 작업했었죠. 이어서 바로 아래 메인 배너 영역을 작업해볼게요.
- [웹디자인 실습 PC 헤더 디자인 01 - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-6/) - 오늘은 웹디자인 입문 강좌 여섯 번째 시간입니다. 지금까지 작업 전에 배워볼게 많았죠? 이제 실제로 디자인 작업을 들어갑니다. 어떤 식으로 풀어볼까 하다가, 아무래도 예제를 따라 하게 하기엔 무리가 있을 것 같아서 제가 작업하는 과정과 툴을 사용하면서 터득한 저만의 팁을 알려드릴게요. 이번에는 페이지 공통으로 적용될 헤더(Header)를 작업해볼게요.
- [게슈탈트 이론으로 보는 와이어프레임(지식 UP) - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-5/) - 오늘은 웹디자인 입문 강좌 다섯 번째 시간입니다. 웹디자인 작업하기 전에 와이어프레임이 무엇인지, 왜 중요한지 알아봅시다. 와이어프레임에서 중요한 점은 고민을 많이 해야하기 때문인데 그 중 디자이너가 고민할때 알아두면 좋은 게슈탈트 이론에 대해 배워보는 시간을 갖도록해요!
- [부트스트랩으로 웹 UI 컴포넌트 파악하기 - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-3/) - 오늘은 웹디자인 입문 강좌 세 번째 시간입니다. 부트스트랩을 통해 웹 UI 컴포넌트를 알아볼게요. 저번 강좌에서 웹에 전반적인 내용을 알아봤다면, 이번에는 실무에서 사용하는 웹 디자인의 컴포넌트와 엘리먼트 용어를 배워봅시다. 버튼, 인풋, 테이블, 브래드크럼브, 팝오버, 아코디언, 캐로샐 등의 요소를 알아볼 수 있습니다.
- [이 용어 뭔지 아세요? - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-2/) - 오늘은 웹디자인 입문 강좌 두 번째 시간입니다. 웹디자인과 관련된 알아두면 좋은 용어를 살펴보겠습니다. 어포던스가 뭔지 아시나요? WSG는 뭘까요? LNB와 GA는 뭘까요? 웹 디자인 쪽으로 처음 공부할 때 이해하기 어려운 용어들이 있었지만, 실무로 일해보니까 알고 있어 도움되는 용어가 있습니다.
- [지금 웹 디자인을 배우는 건 너무 늦었나? - 웹디자인 입문 강좌](https://designbase.co.kr/webdesign-1/) - 디자인베이스에서 웹 디자인 입문 강좌를 시작합니다. 사수가 없어서 시작을 어떻게 해야될지 모르겠어요…” “웹디자이너가 되고 싶은 학생인데 학교에서 따로 안 배워요…” “전 웹디자이너가 아닌데 회사에서 시켜요…” 일반적으로 웹 디자인 혹은 앱 디자인을 하고 싶은 분들의 가장 큰 고민은 이 3가지라고 생각이 됩니다. 웹디자인 입문 강좌 1화에서는 가볍게 해당 강좌 소개와 웹 디자인에 대한 개인적인 생각에 대해 공유합니다.
- [XD 소개 및 인터페이스 파악하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-1/) - 어도비 XD 첫 번째 강좌입니다. 어도비에서 스케치의 대항마로 내놓은 XD가 꾸준히 버전업이 되면서 프로토 타이핑과 상태 등 다양한 기능들이 좋아지고 있죠. XD에 대한 간단한 소개부터 인터페이스를 살펴봅시다.
- [XD 핵심 기능 반복 그리드 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-2/) - 어도비 XD 두 번째 강좌입니다. 이번 강좌에서는 XD의 핵심 기능 중의 하나인 반복 그리드(Repeat grid)를 알려드리겠습니다. 반복되는 UI 요소가 있을 때 활용하는 기능입니다. 사용법과 유의사항에 대해 배워보도록 하죠.
- [XD 포토샵에서 편집하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-3/) - 어도비 XD 강좌입니다. XD의 핵심 기능 중의 하나인 포토샵에서 편집을 알아보겠습니다. 스케치에서 UI 작업을 하다가 배너나 이미지 보정이 필요한 부분은 포토샵을 따로 켜서 작업하고 불러와 줘야 하는데 XD에서는 역시 같은 어도비사에서 제작한 툴이라 포토샵과 호환성이 좋네요.
- [UI 디자인을 효율적으로 하기 위한 필수 기능! 에셋 컴포넌트 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-4/) - 어도비 XD 네 번째 강좌에서는 어도비 XD에서 가장 중요한 에셋 컴포넌트에 대해 알아봅시다. 자주 사용하는 엘리먼트(버튼, 아이콘, 로고, 인풋창 등)나 컴포넌트(네비게이션바, 탭바, 카드 UI 등)을 등록하고 사용하는 기능입니다. 반복되는 UI 디자인을 할 때 사용하면 좋습니다.
- [마우스 오버를?! 컴포넌트 상태 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-5/) - 어도비 XD 다섯 번째 강좌로 컴포넌트 상태에 대해 배워보죠. 상태(states)는 UI 엘리먼트 상에서 있을 수 있는 다양한 경우를 말합니다. 버튼에 Default, Hover, Pressed, Disabled 이런 다양한 경우의 상태가 있죠. 이를 각각 따로 컴포넌트로 등록하지 않아도 하나의 컴포넌트에 다양한 상태를 등록해서 사용할 수 있습니다.
- [프로토타이핑 마스터하기 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-6/) - 어도비 XD 여섯 번째 강좌입니다. 이번 강좌에서는 XD에서 프로토타이핑 기능을 배워보겠습니다. 프로토타이핑의 기본인 링크를 걸어줄 요소 선택과 이동할 아트보드를 선택하는 것이죠. 어떻게 사용하는지 배워보고, 드래그와 자동 애니메이트를 활용해서 좀 더 다양한 프로토타이핑을 한번 예제를 통해 배워보세요.
- [반응형을 위한 반응형 크기 조정 기능 - 어도비 XD 강좌](https://designbase.co.kr/adobexd-7/) - 어도비 XD 일곱 번째 강좌입니다. 이번 강좌에서는 XD에서 반응형 레이아웃을 구현하기 위해 필요한 반응형 크기 조정 기능을 배워보겠습니다. 스케치의 리사이징 기능과 거의 똑같은 기능입니다. 스케치와는 다르게 자동과 수동으로 나뉘는데 수동 조정을 통해서 어떤 원리로 작동을 하는지 짧은 시간안에 배워봅시다. 
- [앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 - 스케치 강좌](https://designbase.co.kr/sketch-3/) - 스케치 강좌 세 번째입니다. 이번에는 앱 UI 디자인을 하기 위해서 알아야 할 가장 기본적인 것을 알아볼 거예요. OS 별 아트 보드 규격입니다. 아이폰 앱, 안드로이드 앱 디자인을 하려면 사이즈 규격부터 알아야겠죠? 안드로이드 작업시에 중요한 DP 단위의 개념도 알아봅시다.
- [심볼만 알면 디자인 수정이 두렵지 않다 - 스케치 강좌](https://designbase.co.kr/sketch-5/) - 스케치 강좌 다섯 번째입니다. 이번에는 스케치의 핵심 기능 중 하나인 심볼에 대해 알아보겠습니다. 심볼만 제대로 사용한다면, 포토샵으로 작업하는 것보다 훨씬 작업 능률을 올릴 수 있습니다. 라이브러리처럼 등록하고 손쉽게 사용해보세요.
- [반응형 UI?! 리사이징(Resizing) - 스케치 강좌](https://designbase.co.kr/sketch-7/) - 스케치 강좌 일곱 번째로 리사이징을 배워보겠습니다. 스케치에서 가장 신박한 기능 중에 하나죠. 아트 보드의 사이즈를 바꿀 경우에 그 사이즈에 맞게 반응형 웹처럼 잡아주는 기능입니다. 각 요소들을 스케일로 늘리는 것이 아니라 UI 디자이너의 의도에 맞게 리사이징이 됩니다.
- [스타일 가이드를 위한 필수 기능 Text Style, Layer Style - 스케치 강좌](https://designbase.co.kr/sketch-6/) - 스케치 강좌 여섯 번째입니다. 이번에는 스케치의 핵심 기능 중 Text Style, Layer Style에 대해 알아보겠습니다. 저번 시간에 배운 심볼과 같이 사용해야 빛을 바라죠. 스타일 가이드라고 들어보셨나요? 심볼과 스타일 가이드를 어떻게 사용하는지 알아보겠습니다.
- [스케치에서 프로토타입 만드는 방법(Prototyping) - 스케치 강좌](https://designbase.co.kr/sketch-8/) - 스케치 강좌 여덟 번째입니다. 스케치 자체 프로토 타이핑 기능을 배워보겠습니다. 아트 보드 사이즈를 스케치 프리셋에 없는 사이즈로 작업할 시에 Custom으로 나오게 되는데 그럴 때는 스크롤이 안되는 경우가 있습니다. 프리셋에 따로 커스텀 사이즈를 등록 후에 이용하면 문제없이 잘됩니다.
- [스케치 60 핵심 업데이트 컴포넌트 패널과 팝오버 살펴보기 - 스케치 강좌](https://designbase.co.kr/sketch-9/) - 스케치 강좌 아홉 번째입니다. 이번에 아주 큰 변화가 있었죠! 바로, 스케치 버전 60으로 되면서 컴포넌트 패널과 팝오버 형식으로 업데이트된 점입니다. 기존에 심볼이나 스타일을 사용할 때 불편했던 점을 많이 개선됐습니다. 어떻게 바뀌었는지 저랑 빠르게 한 번 살펴봅시다 : )
- [추천 플러그인 Rename it 레이어 이름 쉽게 하기 - 스케치 강좌](https://designbase.co.kr/sketch-11/) - 스케치 강좌 열 한 번째입니다. 작업 중간에 혹은 마무리 지을 때 레이어나 그룹, 아트보드 명을 정리해야 하는데, Rename it은 이름을 쉽게 바꿀 수 있도록 도와주는 플러그인입니다! 이름을 처음부터 규칙성 있게 정하거나 변경할 이름을 찾아 다른 이름으로 바꿀 수 있습니다.
- [정렬 끝판왕 플러그인 Distributor - 스케치 강좌](https://designbase.co.kr/sketch-13/) - 스케치 강좌 열 세 번째입니다. 이번에는 스케치 플러그인 중 'Distributor'를 추천하는 영상입니다. 오브젝트 간의 정렬을 빠르게 도와주는 플러그인입니다! 수직 수평 방향으로 본인이 원하는 간격으로 정렬해주는 기능입니다. 단축키를 외워두면 작업 능률이 올라갑니다.
- [에펙에서 프로토 타이핑을? 플러그인 AEUX - 스케치 강좌](https://designbase.co.kr/sketch-15/) - 스케치 강좌 열다섯 번째입니다. 이번에는 스케치 플러그인 중 에펙에서 프로토 타이핑을 쉽게 할 수 있도록 도와주는 플러그인 'AEUX'를 알려드릴게요. 스케치를 사용하는 분들 중 평소에 애프터 이펙트를 사용하신다면 추천하는 플러그인이에요!! AEUX는 애프터 이펙트의 AE와 사용자 경험의 UX를 합쳐진 이름으로 스케치에서 제작된 UI를 에펙에서 바로 수정할 수 있도록 Import 시켜주는 아주 강력한 기능입니다.
- [이런 건 어떻게 만들까? 그래픽 포스터 디자인 만들기(3분컷) - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-11/) - 핵심 요약 기본기만 알면 할 수 있는 재미난 그래픽 디자인입니다. 사용법은 아주 간단합니다. 1. 우선 색감이 풍부한 사진 아무거나 불러와줍니다. 2. 포토샵 필터를 사용해서 이미지를 왜곡시켜줍니다. Filter > Distort > Spherize Filter > Distort > Wave Filter > Distort > Twirl 값은 여러분이 원하는 대로 조절해주세요. 3. Liquify 기능을 이용해서 자유자재로 뭉개줍니다. Liquify 실행 단축키포토샵 실전 열한 번째 강좌입니다. 이번에는 포토샵을 이용해서 그래픽 포스터 디자인 만들기를 해볼게요. 도대체 이런 건 어떻게 만들지?! 싶던 것들이 많죠. 제가 그 궁금증을 해결해드릴게요. 전 해결사니까요 : ) 딱 3분.. 라면 끓이는 동안 이 영상을 본다면 여러분도 감각적인 포스터 디자인을 쉽게 할 수 있습니다.
- [사진을 손그림처럼 바꿔주는 스케치 효과! - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-10/) - 포토샵 실전 열 번째 강좌입니다. 포토샵을 이용해서 사진 이미지를 손그림처럼 바꿔주는 스케치 효과를 배워보겠습니다. 손으로 그린 것처럼 아주 감쪽같이 변합니다. 이렇게까지 디테일한 강좌는 없을 겁니다!! 가족, 애인, 친구들의 사진을 이용해서 손그림을 그려준 것처럼 만들어서 선물해보세요
- [프로 디자이너처럼 홀로그래픽 만들기 Mixer Brush - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-13/) - 포토샵 실전 열세 번째 강좌입니다. 포토샵을 이용해서 홀로그래픽을 만드는 방법을 알려드릴게요. 믹서 브러시를 활용해서 만들어 볼게요. 믹서 브러시 옵션을 조절하면서 본인 스타일에 맞는 홀로그래픽을 만들어보세요. 배너나 포스터, 스마트폰 배경화면에도 사용할 수 있습니다~!
- [수채화 효과 주는 방법 - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-12/) - 포토샵 실전 열두 번째 강좌입니다. 포토샵을 이용해서 사진에 수채화 효과 주는 방법을 배워볼게요. 수채화의 특징을 알아보고 각종 필터와 브러쉬와 마스크를 이용해서 수채화 느낌이 나도록 바꿔볼게요 : )
- [가성비 뛰어난 듀오톤 효과 1분컷 - 포토샵 강좌 실전](https://designbase.co.kr/photoshop-advanced-14/) - 포토샵 실전 열네 번째 강좌입니다. 이번에는 가성비가 아주 뛰어난 효과에 대해 알아볼게요! 그라디언트 맵을 이용해서 몇 분 만에 듀오톤 그래픽으로 만드는 방법을 배워보세요. 누끼를 딴 후에 색감을 상세하게 정하는 시간을 제외하고 듀오톤 효과를 적용시키는 것은 겨우 몇 초면 됩니다.
- [감각적인 그래픽 디자인 Inspired By Magdiel Lopez - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-3/) - 포토샵 스킬 UP 강좌입니다. 오늘은 감각적인 그래픽 디자인을 해보겠습니다. Magdiel Lopez의 작품에서 영감을 받아 비슷한 스타일을 만들어볼게요. 아티스트적인 감각이 필요하지만, 방법은 굉장히 쉽습니다... 포토샵으로 어떻게 했는지 영상으로 한 번 볼까요? ^^
- [귀여운 뚱보 고양이 그리기(일러스트레이션) - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-4/) - 포토샵을 이용해서 귀여운 뚱보 고양이를 그리는 방법을 배워볼게요. 이번 강좌에서 알아야 할 기능 및 개념은 4가지 정도입니다. 브러시 툴, 쉐입 레이어, 펜 툴 그리고 블렌딩 모드 정도입니다. 포토샵 기초 강좌를 봤다면 여러분도 따라 할 수 있습니다.
- [합성 마스터 따라잡기 Inspired By Max Asabin - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-7/) - 이번에는 포토샵 실전 강좌로, 합성 마스터로 유명한 막스 아시빈(Max Asabin)의 작업물을 따라 해보며 포토샵 합성을 배워보는 시간입니다. 포토샵 합성 마스터가 되고 싶다면, 강좌를 보고 따라해보세요~!
- [Cutout 필터로 사진을 그래픽처럼! (펜 툴 없이) - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-5/) - 포토샵 강좌입니다. Cutout 필터를 이용해서 인물 사진을 손쉽게 그래픽 스타일처럼 만들어 볼게요. 펜 툴을 전혀 사용하지 않고, 펜 툴로 만든 듯한 느낌으로 작업해보겠습니다. 포토샵으로 그래픽 디자인을 하다 보면 필터 갤러리를 종종 사용하는 데 어떻게 활용하는지 알아볼게요.
- [웨딩사진에 보케(Bokeh) 효과 주기(PSD 소스 제공) - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-6/) - 오늘은 웨딩사진에 보케 효과를 주는 방법을 배워볼게요. 보케 소스를 무료 배포합니다. 사용 방법은 아주 간단해요. 보케란 렌즈의 초점을 의도적으로 범위 밖으로 하는 사진 표현 방법입니다. 아웃포커싱 촬영 기법처럼 빛이 초점을 맞지 않아 번짐 효과처럼 보이게 되죠.
- [완전 리얼 3D 네온사인 효과 Neon Sign Effect - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-9/) - 포토샵 실전 아홉 번째 강좌입니다. 포토샵을 이용해서 진짜 같은 네온사인 효과를 배워보겠습니다. Add a Layer Style을 사용해서 제작하며, 단순 그로우로만 제작하지 않습니다. 포토샵으로 텍스처 공부하시는 분들은 한 번 따라 해보세요.
- [그래픽 디자인 이중 노출 효과 주기 (Double Exposure Effect) - 포토샵 실전 강좌](https://designbase.co.kr/photoshop-advanced-1/) - 포토샵 실전 강좌입니다. 이번에는 그래픽 디자인 강좌로 이중 노출 효과 주기 (Double Exposure Effect)에 대해 배워볼게요. 간단하지만 멋있게 연출해보세요.
- [어도비 XD 강좌 오픈](https://designbase.co.kr/start-adobe-xd-course/) - 어도비 XD 툴 강좌를 시작합니다. 아직까지 xd의 기능들이 스케치에 비해 많이 약하다고 판단이 들어서 안 올리고 있었는데, 최근에 업데이트가 되며 기능들이 많이 좋아져서 강좌를 진행합니다. 스케치와 비교했을 때 장단점들이 있지만, XD의 장점이라고 생각되는 부분 위주로 배워보겠습니다.
- [일러스트레이터 강좌 오픈](https://designbase.co.kr/start-illustrator-course/) - 안녕하세요. 디자인베이스입니다. 포토샵 강좌에 이어 일러스트레이터 강좌를 시작했습니다. 포토샵 실전 강좌가 끝난 것은 아니지만, 실무에서는 포토샵 하나로만 작업하는 것보다 일러스트레이터와 같이 사용하는 경우가 많아서, 병렬로 진행하려고 합니다. 벡터 기반이라는 것만 인지하면 됩니다.
- [포토샵 강좌 오픈](https://designbase.co.kr/start-photoshop-course/) - 안녕하세요. Design Base에서 첫 강좌를 포토샵'으로 시작합니다. 첫 단추를 잘 끼워야 된다는 옛 속담처럼 첫 강좌를 어떻게 해야 좋을지 고민하다가 최대한 가볍게 시작하려고 합니다. 포토샵 강좌의 전체 계획은 아래처럼 4단계로 나눠 진행할 예정입니다. 본인의 포토샵 레벨에 맞춰 1,2 단계는 건너뛰셔도 됩니다. 그러나 초보이신 분들은 처음부터 차근차근하시는 걸 추천드립니다.
- [스케치 강좌 오픈](https://designbase.co.kr/start-sketch-course/) - 드디어 제 현재 직업에 가장 최적화된 스케치 강좌를 시작합니다!! 실무에서 UI 디자이너로 활동하고 있으며, 사용한 지는 4년 정도 됐네요. 스케치도 그동안 많이 업데이트됐고, 플러그인도 방대하고 막강해졌습니다. 차차 실전 예제를 통해 스케치를 배워보도록 하죠.

## 페이지

- [디자인베이스 홈페이지](https://designbase.co.kr/) - 디자인베이스는 일반인, 초보도 쉽게 디자인을 배울 수 있는 온라인 교육 채널입니다. 스케치, 피그마, XD, 프로토파이, 포토샵, 일러스트레이터 등 디자인 툴 강좌부터 웹디자인 입문, 웹 코딩 강좌, Lottie.js 등 실무 디자인을 하는데 도움되는 강좌들을 제공하고 있습니다.
- [디자이너 북마크](https://designbase.co.kr/designer-bookmark/) - 디자이너 북마크는 수 년간 디자이너로 활동하며 즐겨찾기로 모은 유용한 사이트 리스트입니다. UI 디자인, 로고 디자인, 컬러, 그라데이션 컬러, 무료 폰트, 무료 이미지, 무료 디자인 소스 등 다양한 사이트를 한 곳에 모았습니다. 즐겨찾기 이거 하나만 하세요.
- [툴 단축키 모음](https://designbase.co.kr/design-tool-shortcuts/) - Figma, Photoshop, Illustrator 등 자주 사용하는 디자인 툴의 단축키를 한눈에 확인할 수 있습니다. 작업 속도를 높이고 반복적인 디자인 과정을 더 효율적으로 관리해보세요.
- [로고 검색기](https://designbase.co.kr/logo-finder/) - Wikimedia Commons의 오리지널 고화질 벡터 파일을 찾아드립니다.배경 없는 깔끔한 SVG 로고가 필요할 때 사용하세요.
- [ASCII 아트](https://designbase.co.kr/ascii-art-generator/) - ASCII 아트 생성기는 입력한 이미지를 다양한 문자 기반 아트 스타일로 변환해주는 무료 도구입니다.
- [아이콘 라이브러리](https://designbase.co.kr/icons/) - 아이콘 라이브러리는 웹사이트, 앱, 상세페이지, 프레젠테이션 디자인에 활용하기 좋은 무료 아이콘 리소스입니다. SVG, PNG, Figma 작업에 어울리는 깔끔한 아이콘을 검색하고 디자인에 바로 활용해보세요.
- [추상 그라디언트 생성기](https://designbase.co.kr/abstract-gradient-generator/) - 추상 그라디언트 생성기는 디자인 작업에 활용할 수 있는 감성적인 그라디언트 배경을 손쉽게 제작하는 무료 디자인 도구입니다. 랜딩페이지, 썸네일, 배너, UI 배경 제작에 활용해보세요.
- [디자인 사이즈 가이드](https://designbase.co.kr/design-size-guide/)
- [로고 SVG 모음](https://designbase.co.kr/logo-svg-collector/) - 400개 이상의 유명 브랜드·서비스 로고를 한 곳에 모아 제공하는 로고 라이브러리입니다. 필요한 로고를 검색하고, SVG 포맷으로 바로 저장하거나 다운로드할 수 있어 디자인 업무 효율을 크게 높여줍니다. 상업·개인 프로젝트 어디에서나 활용 가능한 고품질 벡터 로고로, 배경 손실 없이 자유롭게 편집하고 적용해보세요.
- [반응형 웹 그리드 시스템 계산기](https://designbase.co.kr/grid-calculator/) - 반응형 웹디자인 시에 최적화된 그리드를 찾아보세요. Desktop, Tablet, Mobile 등의 컬럼수, 거터, 마진 등의 값을 통해 정수로 떨어지는 값을 찾는 것도 가능합니다. 미리보기를 통해 여러분이 작성한 값에 대한 반응형 그리드 시스템을 확인해보세요.
- [슈퍼노멀 FAQ 워드프레스 플러그인](https://designbase.co.kr/supernormal-faq/) - 더욱 심플하고 강력한 도구로 방문자에게 명확한 정보를 제공하고, 효과적인 커뮤니케이션을 경험하세요. 자주 묻는 질문에 대한 손쉬운 설정과 스타일 조정 기능으로 누구나 전문가처럼 FAQ를 생성하고 관리할 수 있습니다. 사이트 디자인에 완벽히 어울리는 세련된 스타일과 쇼트코드 삽입 기능으로, 사용자는 물론 관리자도 만족할 수 있는 최적의 솔루션을 제공합니다. 예시 Supernormal FAQ 주요 기능 1. 손쉬운 FAQ 생성 FAQ를
- [이용약관](https://designbase.co.kr/terms-of-service/) - 제1장. 총칙 제1조. 목적 본 약관은 디자인베이스(이하 ”회사”라 합니다) 제공하는 모든 서비스(이하 "서비스"라 합니다)의 이용과 관련하여 회사와 회원 간의 권리, 의무, 책임사항 및 기타 필요한 사항을 규정함을 목적으로 합니다. 제2조. 용어의 정의 본 약관에서 사용하는 용어의 정의는 다음과 같습니다. "서비스"라 함은 구현되는 PC, TV, 휴대형 단말기 등의 각종 유무선 기기와 상관없이 회사가 제공하는 모든 서비스를
- [이모지 찾기](https://designbase.co.kr/emoji/) - 빠르게 이모지를 한글로 검색하고 쉽게 복사 및 붙여넣기 할 수 있습니다.
- [팔레트 비주얼라이저](https://designbase.co.kr/palette-visualizer/) - 컬러 팔레트 비주얼라이저를 통해 다양한 컬러를 손쉽게 참고할 수 있습니다. 수많은 디자인 예시에 직접 컬러를 적용해보며, 빠르고 효율적으로 컬러의 느낌을 확인해보세요.
- [그라데이션 생성기](https://designbase.co.kr/gradient-generator/) - 웹으로 빠르게 그라데이션 컬러를 만들고 이미지로 출력하거나 CSS 코드로 복사 할 수 있습니다. 수 많은 예시 그라데이션 컬러를 확인해보세요.
- [디자인베이스 멤버십 소개합니다.](https://designbase.co.kr/about-membership/) - 멤버십 회원들만 볼 수 있는 고급 강좌 영상과 강좌에 사용된 원본 소스를 통해 빠르게 실력있는 디자이너가 될 수 있습니다
- [비밀번호 리셋](https://designbase.co.kr/password-reset/)
- [전체 강좌](https://designbase.co.kr/courses/)
- [한글더미텍스트](https://www.figma.com/community/plugin/1243208578746510514#new_tab) - 디자인 작업 중 번거로움을 해소하기 위해 디자이너가 직접 개발하여 만든 플러그인입니다. UI 디자인을 할 때 더 이상 한글을 직접 입력하지 마세요 :) 플러그인 바로가기 사용 방법 더미 텍스트를 적용할 한 개 혹은 여러 개의 텍스트 레이어를 선택합니다. 플러그인 창 내에 있는 목록을 클릭하여 한글 더미 텍스트를 적용합니다. 맘에 들지 않을 때는 한 번 더 눌러줍니다.
- [무료 폰트](https://designbase.co.kr/freefonts/) - 디자인 작업에 차별화를 더하고 싶으신가요? 디자인베이스가 엄선한 무료 폰트 컬렉션으로 창의력을 마음껏 발휘해보세요! 모든 폰트는 상업적 이용이 가능하며 저작권 걱정 없이 자유롭게 사용할 수 있습니다.
- [디자인베이스 소개](https://designbase.co.kr/about/) - 디자인베이스는 디자인 툴부터 기초 지식, 꿀팁 등 디자인에 관해 전반적으로 알려주는 온라인 강좌 채널입니다. 실무디자이너가 운영하는 온라인 디자인 교육 채널입니다. 여러분이 어떤 이유로 이 채널을 접하셨던지, 여러분에게 조금이라도 도움 됐으면 하는 바람으로 오늘도 좋은 교육 콘텐츠를 만들기 위해 고민합니다.
- [디자인 용어 사전](https://designbase.co.kr/dictionary/) - 기본적인 디자인 용어부터 실무에서 알아두면 좋은 용어까지 디자인 관련 사전을 확인해보세요. DP, SP의 차이를 모르겠다고요? UI 내 컴포넌트 용어가 기억이 안나신다면, 바로 바로 검색해보세요.
- [무료 소스](https://designbase.co.kr/freebies/) - 고품질의 디자인 무료 소스 파일을 수집한 페이지입니다. 포토샵 PSD 목업 자료들입니다.
- [생생 후기](https://designbase.co.kr/testimonials/) - 디자인베이스와 함께한 분들이 남겨주신 후기입니다.

## 무료 폰트

- [수박양체](https://designbase.co.kr/freefonts/subagyangce/)
- [마비옛체](https://designbase.co.kr/freefonts/mabiyesce/)
- [한겨레결체](https://designbase.co.kr/freefonts/hangyeoregyeolce/)
- [Orbit](https://designbase.co.kr/freefonts/orbit/)
- [만년설체](https://designbase.co.kr/freefonts/mannyeonseolce/)
- [수성돋움체](https://designbase.co.kr/freefonts/suseongdodumce/)
- [시원한 설레임체](https://designbase.co.kr/freefonts/siweonhanseolreimce/)
- [와일드](https://designbase.co.kr/freefonts/waildeu/)
- [조선가는고딕](https://designbase.co.kr/freefonts/joseonganeungodig/)
- [EBS주시경체](https://designbase.co.kr/freefonts/ebsjusigyeongce/)
- [KCC손기정체](https://designbase.co.kr/freefonts/kccsongijeongce/)
- [도스필기](https://designbase.co.kr/freefonts/doseupilgi/)
- [Interop](https://designbase.co.kr/freefonts/interop/)
- [소요단풍체](https://designbase.co.kr/freefonts/soyodanpungce/)
- [영암월출산체](https://designbase.co.kr/freefonts/yeongamweolculsance/)
- [마초체](https://designbase.co.kr/freefonts/macoce/)
- [신영복체](https://designbase.co.kr/freefonts/sinyeongbogce/)
- [MOVE Sans](https://designbase.co.kr/freefonts/movesans/)
- [MICE고딕](https://designbase.co.kr/freefonts/micegodig/)
- [Neo둥근고딕Pro](https://designbase.co.kr/freefonts/neodunggeungodigpro/)
- [낭만있구미체](https://designbase.co.kr/freefonts/nangmanissgumice/)
- [박물관문화재단클래식](https://designbase.co.kr/freefonts/bagmulgwanmunhwajaedankeulraesig/)
- [얇은둥근모](https://designbase.co.kr/freefonts/yalbeundunggeunmo/)
- [리디바탕](https://designbase.co.kr/freefonts/ridibatang/)
- [Neo둥근모](https://designbase.co.kr/freefonts/neodunggeunmo/)
- [느림보고딕](https://designbase.co.kr/freefonts/neurimbogodig/)
- [솔뫼 김대건체](https://designbase.co.kr/freefonts/solmoegimdaegeonce/)
- [대구동성로](https://designbase.co.kr/freefonts/daegudongseongro/)
- [D2Coding](https://designbase.co.kr/freefonts/d2coding/)
- [마포꽃섬](https://designbase.co.kr/freefonts/mapoggocseom/)
- [KCC간판체](https://designbase.co.kr/freefonts/kccganpance/)
- [Y최애체](https://designbase.co.kr/freefonts/ycoeaece/)
- [푸라닭 젠틀 고딕](https://designbase.co.kr/freefonts/puradalgjenteulgodig/)
- [코트라 볼드체](https://designbase.co.kr/freefonts/koteuraboldeuce/)
- [도스샘물](https://designbase.co.kr/freefonts/doseusaemmul/)
- [대구중구읍성](https://designbase.co.kr/freefonts/daegujunggueubseong/)
- [설립체 유건욱](https://designbase.co.kr/freefonts/seolribceyugeonug/)
- [세방고딕](https://designbase.co.kr/freefonts/sebanggodig/)
- [긱블 말랑이체](https://designbase.co.kr/freefonts/gigbeulmalrangice/)
- [만세체](https://designbase.co.kr/freefonts/mansece/)
- [OG 르네상스 비밀](https://designbase.co.kr/freefonts/ogreunesangseubimil/)
- [던파 비트비트체](https://designbase.co.kr/freefonts/deonpabiteubiteuce/)
- [세종자으미모으미체 볼드](https://designbase.co.kr/freefonts/sejongjaeumimoeumiceboldeu/)
- [문경감홍사과](https://designbase.co.kr/freefonts/mungyeonggamhongsagwa/)
- [한국기계연구원](https://designbase.co.kr/freefonts/hanguggigyeyeonguweon/)
- [예스 명조](https://designbase.co.kr/freefonts/yeseumyeongjo/)
- [어비 세현체](https://designbase.co.kr/freefonts/eobisehyeonce/)
- [순바탕](https://designbase.co.kr/freefonts/sunbatang/)
- [KBO 다이아고딕체](https://designbase.co.kr/freefonts/kbodaiagodigce/)
- [코트라 희망체](https://designbase.co.kr/freefonts/koteurahyimangce/)
- [즐거운이야기체](https://designbase.co.kr/freefonts/jeulgeouniyagice/)
- [와구리체](https://designbase.co.kr/freefonts/wagurice/)
- [샤우팅체](https://designbase.co.kr/freefonts/syautingce/)
- [KOHI배움](https://designbase.co.kr/freefonts/kohibaeum/)
- [아리따돋움](https://designbase.co.kr/freefonts/ariddadodum/)
- [고도체](https://designbase.co.kr/freefonts/godoce/)
- [MBC1961굴림](https://designbase.co.kr/freefonts/mbc1961gulrim/)
- [LINE Seed](https://designbase.co.kr/freefonts/lineseed/)
- [런드리고딕](https://designbase.co.kr/freefonts/reondeurigodig/)
- [한컴 말랑말랑](https://designbase.co.kr/freefonts/hankeommalrangmalrang/)
- [Y클로버체](https://designbase.co.kr/freefonts/ykeulrobeoce/)
- [던파 비트비트체 v2](https://designbase.co.kr/freefonts/deonpabiteubiteucev2/)
- [웨이브 파도체](https://designbase.co.kr/freefonts/weibeupadoce/)
- [가평 한석봉 큰붓](https://designbase.co.kr/freefonts/gapyeonghanseogbongkeunbus/)
- [조선100년체](https://designbase.co.kr/freefonts/joseon100nyeonce/)
- [엘리스 디지털코딩체](https://designbase.co.kr/freefonts/elriseudijiteolkodingce/)
- [엘리스디지털배움체](https://designbase.co.kr/freefonts/elriseudijiteolbaeumce/)
- [오이냉체](https://designbase.co.kr/freefonts/oinaengce/)
- [IM혜민체](https://designbase.co.kr/freefonts/imhyemince/)
- [신촌랩소디체](https://designbase.co.kr/freefonts/sinconraebsodice/)
- [조선굵은명조](https://designbase.co.kr/freefonts/joseongulgeunmyeongjo/)
- [함렛](https://designbase.co.kr/freefonts/hamres/)
- [자이언츠체](https://designbase.co.kr/freefonts/jaieonceuce/)
- [자이언츠체 Inline](https://designbase.co.kr/freefonts/jaieonceuceinline/)
- [영도체](https://designbase.co.kr/freefonts/yeongdoce/)
- [Gothic A1](https://designbase.co.kr/freefonts/gothica1/)
- [조선견고딕](https://designbase.co.kr/freefonts/joseongyeongodig/)
- [국민연금체](https://designbase.co.kr/freefonts/gugminyeongeumce/)
- [국립공원 꼬미](https://designbase.co.kr/freefonts/gugribgongweonggomi/)
- [도스고딕](https://designbase.co.kr/freefonts/doseugodig/)
- [IBM Plex Sans](https://designbase.co.kr/freefonts/ibmplexsans/)
- [수성혜정체](https://designbase.co.kr/freefonts/suseonghyejeongce/)
- [산돌국대떡볶이체](https://designbase.co.kr/freefonts/sandolgugdaeddeogboggice/)
- [충주김생체](https://designbase.co.kr/freefonts/cungjugimsaengce/)
- [행복고흥](https://designbase.co.kr/freefonts/haengboggoheung/)
- [KCC무럭무럭체](https://designbase.co.kr/freefonts/kccmureogmureogce/)
- [신비는일곱살](https://designbase.co.kr/freefonts/sinbineunilgobsal/)
- [마포금빛나루](https://designbase.co.kr/freefonts/mapogeumbicnaru/)
- [티웨이하늘체](https://designbase.co.kr/freefonts/tiweihaneulce/)
- [연성체](https://designbase.co.kr/freefonts/yeonseongce/)
- [사물놀이체](https://designbase.co.kr/freefonts/samulnolice/)
- [추사 사랑체](https://designbase.co.kr/freefonts/cusasarangce/)
- [산하엽](https://designbase.co.kr/freefonts/sanhayeob/)
- [고도마음체](https://designbase.co.kr/freefonts/godomaeumce/)
- [KBIZ한마음고딕체](https://designbase.co.kr/freefonts/kbizhanmaeumgodigce/)
- [꽃길](https://designbase.co.kr/freefonts/ggocgil/)
- [오아고딕](https://designbase.co.kr/freefonts/oagodig/)
- [Y유니버스체](https://designbase.co.kr/freefonts/yyunibeoseuce/)
- [다이어리체](https://designbase.co.kr/freefonts/daieorice/)
- [대한체](https://designbase.co.kr/freefonts/daehance/)
- [동글](https://designbase.co.kr/freefonts/donggeul/)
- [KCC 안창호체](https://designbase.co.kr/freefonts/kccancanghoce/)
- [KCC은영체](https://designbase.co.kr/freefonts/kcceunyeongce/)
- [KBIZ한마음명조체](https://designbase.co.kr/freefonts/kbizhanmaeummyeongjoce/)
- [그리운 고씨네](https://designbase.co.kr/freefonts/geuriungossine/)
- [사천항공체](https://designbase.co.kr/freefonts/saceonhanggongce/)
- [빛고을광주체](https://designbase.co.kr/freefonts/bicgoeulgwangjuce/)
- [노회찬체](https://designbase.co.kr/freefonts/nohoecance/)
- [PF스타더스트](https://designbase.co.kr/freefonts/pfseutadeoseuteu/)
- [다래손글씨체](https://designbase.co.kr/freefonts/daraesongeulssice/)
- [스스로넷 손글씨체](https://designbase.co.kr/freefonts/seuseuronessongeulssice/)
- [태백체](https://designbase.co.kr/freefonts/taebaegce/)
- [상주곶감체](https://designbase.co.kr/freefonts/sangjugojgamce/)
- [KCC임권택체](https://designbase.co.kr/freefonts/kccimgweontaegce/)
- [godo rounded](https://designbase.co.kr/freefonts/godorounded/)
- [굵은둥근모](https://designbase.co.kr/freefonts/gulgeundunggeunmo/)
- [이랜드 나이스체](https://designbase.co.kr/freefonts/iraendeunaiseuce/)
- [영양군 음식디미방체](https://designbase.co.kr/freefonts/yeongyangguneumsigdimibangce/)
- [MBC1961](https://designbase.co.kr/freefonts/mbc1961/)
- [Y이드스트릿체](https://designbase.co.kr/freefonts/yideuseuteurisce/)
- [던파 연단된 칼날](https://designbase.co.kr/freefonts/deonpayeondandoenkalnal/)
- [속초바다 돋움체](https://designbase.co.kr/freefonts/sogcobadadodumce/)
- [가석체](https://designbase.co.kr/freefonts/gaseogce/)
- [평택 안보체](https://designbase.co.kr/freefonts/pyeongtaeganboce/)
- [야놀자야체](https://designbase.co.kr/freefonts/yanoljayace/)
- [116수박화체](https://designbase.co.kr/freefonts/116subaghwace/)
- [고딕 아니고 고딩](https://designbase.co.kr/freefonts/godiganigogoding/)
- [송명](https://designbase.co.kr/freefonts/songmyeong/)
- [무적해병체](https://designbase.co.kr/freefonts/mujeoghaebyeongce/)
- [귀염발랄체](https://designbase.co.kr/freefonts/gwiyeombalralce/)
- [I AM A PLAYER](https://designbase.co.kr/freefonts/iamaplayer/)
- [코트라 손글씨체](https://designbase.co.kr/freefonts/koteurasongeulssice/)
- [코트라 도약체](https://designbase.co.kr/freefonts/koteuradoyagce/)
- [도스이야기](https://designbase.co.kr/freefonts/doseuiyagi/)
- [레베카체](https://designbase.co.kr/freefonts/rebekace/)
- [아스타산스](https://designbase.co.kr/freefonts/aseutasanseu/)
- [EBS훈민정음](https://designbase.co.kr/freefonts/ebshunminjeongeum/)
- [한컴 훈민정음](https://designbase.co.kr/freefonts/hankeomhunminjeongeum/)
- [EBS훈민정음새론체](https://designbase.co.kr/freefonts/ebshunminjeongeumsaeronce/)
- [마포다카포](https://designbase.co.kr/freefonts/mapodakapo/)
- [읏맨체](https://designbase.co.kr/freefonts/eusmaence/)
- [읏맨-궁서체](https://designbase.co.kr/freefonts/eusmaen_gungseoce/)
- [읏맨-엉뚱체](https://designbase.co.kr/freefonts/eusmaen_eongddungce/)
- [민산스](https://designbase.co.kr/freefonts/minsanseu/)
- [미생체](https://designbase.co.kr/freefonts/misaengce/)
- [플라이트 산스 Title](https://designbase.co.kr/freefonts/peulraiteusanseutitle/)
- [완도희망체](https://designbase.co.kr/freefonts/wandohyimangce/)
- [조선굵은고딕](https://designbase.co.kr/freefonts/joseongulgeungodig/)
- [심경하체](https://designbase.co.kr/freefonts/simgyeonghace/)
- [롯데마트드림체](https://designbase.co.kr/freefonts/rosdemateudeurimce/)
- [롯데마트행복체](https://designbase.co.kr/freefonts/rosdemateuhaengbogce/)
- [한나체 Air](https://designbase.co.kr/freefonts/hannaceair/)
- [한나체Pro](https://designbase.co.kr/freefonts/hannacepro/)
- [안성탕면체](https://designbase.co.kr/freefonts/anseongtangmyeonce/)
- [만화진흥원체](https://designbase.co.kr/freefonts/manhwajinheungweonce/)
- [해피니스 산스](https://designbase.co.kr/freefonts/haepiniseusanseu/)
- [구름 산스](https://designbase.co.kr/freefonts/gureumsanseu/)
- [울산중구전용서체](https://designbase.co.kr/freefonts/ulsanjunggujeonyongseoce/)
- [코레일 둥근고딕](https://designbase.co.kr/freefonts/koreildunggeungodig/)
- [상주경천섬체](https://designbase.co.kr/freefonts/sangjugyeongceonseomce/)
- [코레일체](https://designbase.co.kr/freefonts/koreilce/)
- [페이북 글꼴](https://designbase.co.kr/freefonts/peibuggeulggol/)
- [영주선비체](https://designbase.co.kr/freefonts/yeongjuseonbice/)
- [가평 물결](https://designbase.co.kr/freefonts/gapyeongmulgyeol/)
- [상주다정다감체](https://designbase.co.kr/freefonts/sangjudajeongdagamce/)
- [그리운 사막의 연우체](https://designbase.co.kr/freefonts/geuriunsamagyiyeonuce/)
- [밀양해맑은상상체](https://designbase.co.kr/freefonts/milyanghaemalgeunsangsangce/)
- [밀양영남루체](https://designbase.co.kr/freefonts/milyangyeongnamruce/)
- [밀양아리랑체](https://designbase.co.kr/freefonts/milyangarirangce/)
- [강한육군](https://designbase.co.kr/freefonts/ganghanyuggun/)
- [고령딸기체](https://designbase.co.kr/freefonts/goryeongddalgice/)
- [펀플로생존자](https://designbase.co.kr/freefonts/peonpeulrosaengjonja/)
- [스터닝 산스](https://designbase.co.kr/freefonts/seuteoningsanseu/)
- [포천막걸리체](https://designbase.co.kr/freefonts/poceonmaggeolrice/)
- [평창체](https://designbase.co.kr/freefonts/pyeongcangce/)
- [부산체](https://designbase.co.kr/freefonts/busance/)
- [덕온공주체](https://designbase.co.kr/freefonts/deogongongjuce/)
- [빙그레체](https://designbase.co.kr/freefonts/binggeurece/)
- [어비 찌바체](https://designbase.co.kr/freefonts/eobijjibace/)
- [빙그레 메로나체](https://designbase.co.kr/freefonts/binggeuremeronace/)
- [빙그레체II](https://designbase.co.kr/freefonts/binggeureceii/)
- [빙그레 싸만코체](https://designbase.co.kr/freefonts/binggeuressamankoce/)
- [어비 마이센체](https://designbase.co.kr/freefonts/eobimaisence/)
- [도스명조](https://designbase.co.kr/freefonts/doseumyeongjo/)
- [생거진천체](https://designbase.co.kr/freefonts/saenggeojinceonce/)
- [레페리포인트 Oblique](https://designbase.co.kr/freefonts/reperipointeuoblique/)
- [레페리포인트 Special Italic](https://designbase.co.kr/freefonts/reperipointeuspecialitalic/)
- [레페리포인트](https://designbase.co.kr/freefonts/reperipointeu/)
- [이순신돋움체](https://designbase.co.kr/freefonts/isunsindodumce/)
- [이순신체](https://designbase.co.kr/freefonts/isunsince/)
- [잘풀리는오늘체](https://designbase.co.kr/freefonts/jalpulrineunoneulce/)
- [가람연꽃](https://designbase.co.kr/freefonts/garamyeonggoc/)
- [KoddiUD 온고딕](https://designbase.co.kr/freefonts/koddiudongodig/)
- [전주공예명조체](https://designbase.co.kr/freefonts/jeonjugongyemyeongjoce/)
- [한컴 산스](https://designbase.co.kr/freefonts/hankeomsanseu/)
- [62570체](https://designbase.co.kr/freefonts/62570ce/)
- [한림고딕체](https://designbase.co.kr/freefonts/hanrimgodigce/)
- [도봉옛길체](https://designbase.co.kr/freefonts/dobongyesgilce/)
- [가비아 청연체](https://designbase.co.kr/freefonts/gabiaceongyeonce/)
- [가비아 마음결체](https://designbase.co.kr/freefonts/gabiamaeumgyeolce/)
- [가비아 던체](https://designbase.co.kr/freefonts/gabiadeonce/)
- [가비아 사이체](https://designbase.co.kr/freefonts/gabiasaice/)
- [산돌 삼립호빵체 Basic](https://designbase.co.kr/freefonts/sandolsamribhobbangcebasic/)
- [산돌 삼립호빵체 Outline](https://designbase.co.kr/freefonts/sandolsamribhobbangceoutline/)
- [삼립크리미 화이트체](https://designbase.co.kr/freefonts/samribkeurimihwaiteuce/)
- [전남교육바른체](https://designbase.co.kr/freefonts/jeonnamgyoyugbareunce/)
- [전남교육유나체](https://designbase.co.kr/freefonts/jeonnamgyoyugyunace/)
- [망고보드 또박체](https://designbase.co.kr/freefonts/manggobodeuddobagce/)
- [망고보드 별별체](https://designbase.co.kr/freefonts/manggobodeubyeolbyeolce/)
- [Y 너만을 비춤체](https://designbase.co.kr/freefonts/yneomaneulbicumce/)
- [하남다움체](https://designbase.co.kr/freefonts/hanamdaumce/)
- [정선아리랑뿌리체](https://designbase.co.kr/freefonts/jeongseonarirangbburice/)
- [정선아리랑체](https://designbase.co.kr/freefonts/jeongseonarirangce/)
- [정선아리랑혼체](https://designbase.co.kr/freefonts/jeongseonariranghonce/)
- [하늘내린 인제체](https://designbase.co.kr/freefonts/haneulnaerininjece/)
- [칠칠공 발사체](https://designbase.co.kr/freefonts/cilcilgongbalsace/)
- [신과장](https://designbase.co.kr/freefonts/singwajang/)
- [ylee 추억은 잠들지 않는다](https://designbase.co.kr/freefonts/yleecueogeunjamdeuljianhneunda/)
- [마포애민](https://designbase.co.kr/freefonts/mapoaemin/)
- [기랑해랑체](https://designbase.co.kr/freefonts/giranghaerangce/)
- [둘기마요고딕](https://designbase.co.kr/freefonts/dulgimayogodig/)
- [둘기마요](https://designbase.co.kr/freefonts/dulgimayo/)
- [LanaPixel](https://designbase.co.kr/freefonts/lanapixel/)
- [김좌진장군체](https://designbase.co.kr/freefonts/gimjwajinjanggunce/)
- [카카오 작은글씨](https://designbase.co.kr/freefonts/kakaojageungeulssi/)
- [아임크리수진체](https://designbase.co.kr/freefonts/aimkeurisujince/)
- [한림명조체](https://designbase.co.kr/freefonts/hanrimmyeongjoce/)
- [Cafe24 Behappy](https://designbase.co.kr/freefonts/cafe24behappy/)
- [Cafe24 Decoshadow](https://designbase.co.kr/freefonts/cafe24decoshadow/)
- [Cafe24 Decoschool](https://designbase.co.kr/freefonts/cafe24decoschool/)
- [Cafe24 Nyangi White](https://designbase.co.kr/freefonts/cafe24nyangiwhite/)
- [Cafe24 Decobox](https://designbase.co.kr/freefonts/cafe24decobox/)
- [Cafe24 Meongi Black](https://designbase.co.kr/freefonts/cafe24meongiblack/)
- [Cafe24 Meongi White](https://designbase.co.kr/freefonts/cafe24meongiwhite/)
- [Cafe24 Loving u](https://designbase.co.kr/freefonts/cafe24lovingu/)
- [Cafe24 PRO SLIM](https://designbase.co.kr/freefonts/cafe24proslim/)
- [쿨가이](https://designbase.co.kr/freefonts/kulgai/)
- [인천교육힘찬체](https://designbase.co.kr/freefonts/inceongyoyughimcance/)
- [인천교육자람체](https://designbase.co.kr/freefonts/inceongyoyugjaramce/)
- [갈무리11 Condensed](https://designbase.co.kr/freefonts/galmuri11condensed/)
- [갈무리14](https://designbase.co.kr/freefonts/galmuri14/)
- [갈무리11](https://designbase.co.kr/freefonts/galmuri11/)
- [땅스부대찌개체](https://designbase.co.kr/freefonts/ddangseubudaejjigaece/)
- [엄마까투리체](https://designbase.co.kr/freefonts/eommaggaturice/)
- [윤초록우산어린이 대한](https://designbase.co.kr/freefonts/yuncorogusaneorinidaehan/)
- [윤초록우산어린이 민국](https://designbase.co.kr/freefonts/yuncorogusaneorinimingug/)
- [윤초록우산어린이 만세](https://designbase.co.kr/freefonts/yuncorogusaneorinimanse/)
- [을지로10년후체](https://designbase.co.kr/freefonts/euljiro10nyeonhuce/)
- [을지로체](https://designbase.co.kr/freefonts/euljiroce/)
- [김정철고딕](https://designbase.co.kr/freefonts/gimjeongceolgodig/)
- [김정철명조](https://designbase.co.kr/freefonts/gimjeongceolmyeongjo/)
- [김정철손글씨](https://designbase.co.kr/freefonts/gimjeongceolsongeulssi/)
- [서울한강체](https://designbase.co.kr/freefonts/seoulhangangce/)
- [조선신명조](https://designbase.co.kr/freefonts/joseonsinmyeongjo/)
- [스위트](https://designbase.co.kr/freefonts/seuwiteu/)
- [나눔바른펜](https://designbase.co.kr/freefonts/nanumbareunpen/)
- [나눔휴먼](https://designbase.co.kr/freefonts/nanumhyumeon/)
- [TT투게더](https://designbase.co.kr/freefonts/tttugedeo/)
- [남양주고딕](https://designbase.co.kr/freefonts/namyangjugodig/)
- [남양주 운허체](https://designbase.co.kr/freefonts/namyangjuunheoce/)
- [남양주 다산체](https://designbase.co.kr/freefonts/namyangjudasance/)
- [창원단감아삭체](https://designbase.co.kr/freefonts/cangweondangamasagce/)
- [창원단감둥근체](https://designbase.co.kr/freefonts/cangweondangamdunggeunce/)
- [아리따부리](https://designbase.co.kr/freefonts/ariddaburi/)
- [독립체](https://designbase.co.kr/freefonts/dogribce/)
- [서울남산체](https://designbase.co.kr/freefonts/seoulnamsance/)
- [정묵바위체](https://designbase.co.kr/freefonts/jeongmugbawice/)
- [스포카 한 산스 네오](https://designbase.co.kr/freefonts/seupokahansanseuneo/)
- [태나다체](https://designbase.co.kr/freefonts/taenadace/)
- [함초롬체](https://designbase.co.kr/freefonts/hamcoromce/)
- [함초롬바탕체](https://designbase.co.kr/freefonts/hamcorombatangce/)
- [Rix열정도체](https://designbase.co.kr/freefonts/rixyeoljeongdoce/)
- [Rix이누아리두리네](https://designbase.co.kr/freefonts/rixinuaridurine/)
- [티머니 둥근바람](https://designbase.co.kr/freefonts/timeonidunggeunbaram/)
- [티몬체](https://designbase.co.kr/freefonts/timonce/)
- [가나초콜릿체](https://designbase.co.kr/freefonts/ganacokolrisce/)
- [펴진고딕](https://designbase.co.kr/freefonts/pyeojingodig/)
- [밑미 폰트](https://designbase.co.kr/freefonts/mitmiponteu/)
- [본명조 (Source Han Serif)](https://designbase.co.kr/freefonts/bonmyeongjosourcehanserif/)
- [경기천년바탕](https://designbase.co.kr/freefonts/gyeonggiceonnyeonbatang/)
- [경기천년제목](https://designbase.co.kr/freefonts/gyeonggiceonnyeonjemog/)
- [쿠키런](https://designbase.co.kr/freefonts/kukireon/)
- [여기어때 잘난체 고딕](https://designbase.co.kr/freefonts/yeogieoddaejalnancegodig/)
- [그리운 규원체](https://designbase.co.kr/freefonts/geuriungyuweonce/)
- [교보손글씨 2024 박서우](https://designbase.co.kr/freefonts/gyobosongeulssi2024bagseou/)
- [교보손글씨 2020 박도연](https://designbase.co.kr/freefonts/gyobosongeulssi2020bagdoyeon/)
- [교보손글씨 2019](https://designbase.co.kr/freefonts/gyobosongeulssi2019/)
- [기후위기-한글](https://designbase.co.kr/freefonts/gihuwigi_hangeul/)
- [눈누 기초고딕](https://designbase.co.kr/freefonts/nunnugicogodig/)
- [고운바탕](https://designbase.co.kr/freefonts/gounbatang/)
- [넥슨 카트 고딕](https://designbase.co.kr/freefonts/negseunkateugodig/)
- [넥슨 풋볼고딕](https://designbase.co.kr/freefonts/negseunpusbolgodig/)
- [넥슨 워헤이븐](https://designbase.co.kr/freefonts/negseunweoheibeun/)
- [넥슨 배찌체](https://designbase.co.kr/freefonts/negseunbaejjice/)
- [넥슨 Lv.2 고딕](https://designbase.co.kr/freefonts/negseunlv2godig/)
- [넥슨 Lv.1 고딕](https://designbase.co.kr/freefonts/negseunlv1godig/)
- [넥슨 메이플스토리](https://designbase.co.kr/freefonts/negseunmeipeulseutori/)
- [더잠실체](https://designbase.co.kr/freefonts/deojamsilce/)
- [도현체](https://designbase.co.kr/freefonts/dohyeonce/)
- [오뮤 다예쁨체](https://designbase.co.kr/freefonts/omyudayebbeumce/)
- [강원교육현옥샘체](https://designbase.co.kr/freefonts/gangweongyoyughyeonogsaemce/)
- [강원교육새음체](https://designbase.co.kr/freefonts/gangweongyoyugsaeeumce/)
- [강원교육튼튼체](https://designbase.co.kr/freefonts/gangweongyoyugteunteunce/)
- [강원교육모두체](https://designbase.co.kr/freefonts/gangweongyoyugmoduce/)
- [롯데리아 딱붙어체](https://designbase.co.kr/freefonts/rosderiaddagbuteoce/)
- [롯데리아 촵땡겨체](https://designbase.co.kr/freefonts/rosderiacwabddaenggyeoce/)
- [KNPS오대산체](https://designbase.co.kr/freefonts/knpsodaesance/)
- [잉크립퀴드체](https://designbase.co.kr/freefonts/ingkeuribkwideuce/)
- [꾸불림체](https://designbase.co.kr/freefonts/ggubulrimce/)
- [제주돌담체](https://designbase.co.kr/freefonts/jejudoldamce/)
- [마루 부리](https://designbase.co.kr/freefonts/maruburi/)
- [원스토어 모바일고딕 본문체](https://designbase.co.kr/freefonts/weonseutoeomobailgodigbonmunce/)
- [원스토어 모바일고딕 제목체](https://designbase.co.kr/freefonts/weonseutoeomobailgodigjemogce/)
- [원스토어 모바일POP체](https://designbase.co.kr/freefonts/weonseutoeomobailpopce/)
- [주아체](https://designbase.co.kr/freefonts/juace/)
- [신라문화체](https://designbase.co.kr/freefonts/sinramunhwace/)
- [평창평화체](https://designbase.co.kr/freefonts/pyeongcangpyeonghwace/)
- [조선일보명조체](https://designbase.co.kr/freefonts/joseonilbomyeongjoce/)
- [클립아트코리아](https://designbase.co.kr/freefonts/keulribateukoria/)
- [단조](https://designbase.co.kr/freefonts/danjo/)
- [둥근모꼴+ Fixedsys](https://designbase.co.kr/freefonts/dunggeunmoggolfixedsys/)
- [서울알림체](https://designbase.co.kr/freefonts/seoulalrimce/)
- [베이글팻](https://designbase.co.kr/freefonts/beigeulpaes/)
- [영월체](https://designbase.co.kr/freefonts/yeongweolce/)
- [SF함박눈](https://designbase.co.kr/freefonts/sfhambagnun/)
- [이사만루](https://designbase.co.kr/freefonts/isamanru/)
- [조선굴림체](https://designbase.co.kr/freefonts/joseongulrimce/)
- [리아체](https://designbase.co.kr/freefonts/riace/)
- [학교안심 분필](https://designbase.co.kr/freefonts/haggyoansimbunpil/)
- [학교안심 떡볶이](https://designbase.co.kr/freefonts/haggyoansimddeogboggi/)
- [학교안심 지우개](https://designbase.co.kr/freefonts/haggyoansimjiugae/)
- [학교안심 오카리나](https://designbase.co.kr/freefonts/haggyoansimokarina/)
- [학교안심 받아쓰기](https://designbase.co.kr/freefonts/haggyoansimbadasseugi/)
- [학교안심 나들이](https://designbase.co.kr/freefonts/haggyoansimnadeuli/)
- [학교안심 물결](https://designbase.co.kr/freefonts/haggyoansimmulgyeol/)
- [학교안심 칠판지우개](https://designbase.co.kr/freefonts/haggyoansimcilpanjiugae/)
- [학교안심 그림일기](https://designbase.co.kr/freefonts/haggyoansimgeurimilgi/)
- [학교안심 색연필](https://designbase.co.kr/freefonts/haggyoansimsaegyeonpil/)
- [학교안심 별빛하늘](https://designbase.co.kr/freefonts/haggyoansimbyeolbichaneul/)
- [학교안심 우주](https://designbase.co.kr/freefonts/haggyoansimuju/)
- [학교안심 보드마카](https://designbase.co.kr/freefonts/haggyoansimbodeumaka/)
- [학교안심 날개](https://designbase.co.kr/freefonts/haggyoansimnalgae/)
- [학교안심 알림장](https://designbase.co.kr/freefonts/haggyoansimalrimjang/)
- [학교안심 포스터](https://designbase.co.kr/freefonts/haggyoansimposeuteo/)
- [학교안심 몽글몽글](https://designbase.co.kr/freefonts/haggyoansimmonggeulmonggeul/)
- [학교안심 바른돋움](https://designbase.co.kr/freefonts/haggyoansimbareundodum/)
- [학교안심 모험가](https://designbase.co.kr/freefonts/haggyoansimmoheomga/)
- [학교안심 구름](https://designbase.co.kr/freefonts/haggyoansimgureum/)
- [학교안심 공룡알](https://designbase.co.kr/freefonts/haggyoansimgongryongal/)
- [학교안심 꼬꼬마](https://designbase.co.kr/freefonts/haggyoansimggoggoma/)
- [학교안심 바른바탕](https://designbase.co.kr/freefonts/haggyoansimbareunbatang/)
- [학교안심 상장](https://designbase.co.kr/freefonts/haggyoansimsangjang/)
- [학교안심 어항꾸미기](https://designbase.co.kr/freefonts/haggyoansimeohangggumigi/)
- [학교안심 몽당분필](https://designbase.co.kr/freefonts/haggyoansimmongdangbunpil/)
- [학교안심 리코더](https://designbase.co.kr/freefonts/haggyoansimrikodeo/)
- [학교안심 사물함](https://designbase.co.kr/freefonts/haggyoansimsamulham/)
- [학교안심 키다리풍선](https://designbase.co.kr/freefonts/haggyoansimkidaripungseon/)
- [학교안심 퍼즐 블랙](https://designbase.co.kr/freefonts/haggyoansimpeojeulbeulraeg/)
- [학교안심 퍼즐 아웃라인](https://designbase.co.kr/freefonts/haggyoansimpeojeulausrain/)
- [학교안심 가을소풍](https://designbase.co.kr/freefonts/haggyoansimgaeulsopung/)
- [학교안심 둥근미소](https://designbase.co.kr/freefonts/haggyoansimdunggeunmiso/)
- [HS집토끼체 라운드](https://designbase.co.kr/freefonts/hsjibtoggiceraundeu/)
- [HS여름물빛체](https://designbase.co.kr/freefonts/hsyeoreummulbicce/)
- [HS겨울눈꽃체](https://designbase.co.kr/freefonts/hsgyeoulnunggocce/)
- [HS유지체](https://designbase.co.kr/freefonts/hsyujice/)
- [HS새마을체](https://designbase.co.kr/freefonts/hssaemaeulce/)
- [HS굴토끼체](https://designbase.co.kr/freefonts/hsgultoggice/)
- [HS산토끼체](https://designbase.co.kr/freefonts/hssantoggice/)
- [HS산토끼체2.0](https://designbase.co.kr/freefonts/hssantoggice20/)
- [HS봄바람체 2.1](https://designbase.co.kr/freefonts/hsbombaramce21/)
- [HS봄바람체 2.0](https://designbase.co.kr/freefonts/hsbombaramce20/)
- [HS봄바람체 3.0](https://designbase.co.kr/freefonts/hsbombaramce30/)
- [HS잔다리체](https://designbase.co.kr/freefonts/hsjandarice/)
- [이서윤체](https://designbase.co.kr/freefonts/iseoyunce/)
- [카페24 모야모야](https://designbase.co.kr/freefonts/kape24moyamoya/)
- [카페24 숑숑](https://designbase.co.kr/freefonts/kape24syongsyong/)
- [카페24 동동](https://designbase.co.kr/freefonts/kape24dongdong/)
- [카페24슈퍼매직](https://designbase.co.kr/freefonts/kape24syupeomaejig/)
- [카페24 고운밤](https://designbase.co.kr/freefonts/kape24gounbam/)
- [카페24 PRO UP](https://designbase.co.kr/freefonts/kape24proup/)
- [카페24 심플해](https://designbase.co.kr/freefonts/kape24simpeulhae/)
- [카페24 당당해](https://designbase.co.kr/freefonts/kape24dangdanghae/)
- [카페24 단정해](https://designbase.co.kr/freefonts/kape24danjeonghae/)
- [카페24 빛나는별](https://designbase.co.kr/freefonts/kape24bicnaneunbyeol/)
- [카페24 클래식타입](https://designbase.co.kr/freefonts/kape24keulraesigtaib/)
- [카페24 아네모네 에어](https://designbase.co.kr/freefonts/kape24anemoneeeo/)
- [카페24 아네모네](https://designbase.co.kr/freefonts/kape24anemone/)
- [카페24 써라운드에어](https://designbase.co.kr/freefonts/kape24sseoraundeueeo/)
- [카페24 써라운드](https://designbase.co.kr/freefonts/kape24sseoraundeu/)
- [부크크 고딕](https://designbase.co.kr/freefonts/bukeukeugodig/)
- [부크크 명조](https://designbase.co.kr/freefonts/bukeukeumyeongjo/)
- [양진체](https://designbase.co.kr/freefonts/yangjince/)
- [고운돋움](https://designbase.co.kr/freefonts/goundodum/)
- [조선궁서체](https://designbase.co.kr/freefonts/joseongungseoce/)
- [수트](https://designbase.co.kr/freefonts/suteu/)
- [프리젠테이션](https://designbase.co.kr/freefonts/peurijenteisyeon/)
- [온글잎 누카](https://designbase.co.kr/freefonts/ongeulipnuka/)
- [온글잎 영롱](https://designbase.co.kr/freefonts/ongeulipyeongrong/)
- [온글잎 언즈체](https://designbase.co.kr/freefonts/ongeulipeonjeuce/)
- [온글잎 대롱체](https://designbase.co.kr/freefonts/ongeulipdaerongce/)
- [온글잎 재건사](https://designbase.co.kr/freefonts/ongeulipjaegeonsa/)
- [콜디웹툰메이커 온글잎 폰트](https://designbase.co.kr/freefonts/koldiwebtunmeikeoongeulipponteu/)
- [온글잎 류뚱체](https://designbase.co.kr/freefonts/ongeulipryuddungce/)
- [온글잎 김콩해](https://designbase.co.kr/freefonts/ongeulipgimkonghae/)
- [온글잎 데이지](https://designbase.co.kr/freefonts/ongeulipdeiji/)
- [온글잎 위씨리스트](https://designbase.co.kr/freefonts/ongeulipwissiriseuteu/)
- [온글잎 공부잘하자나](https://designbase.co.kr/freefonts/ongeulipgongbujalhajana/)
- [온글잎 류류체](https://designbase.co.kr/freefonts/ongeulipryuryuce/)
- [온글잎 의연체](https://designbase.co.kr/freefonts/ongeulipyiyeonce/)
- [온글잎 바닷바람](https://designbase.co.kr/freefonts/ongeulipbadasbaram/)
- [온글잎 콘콘체](https://designbase.co.kr/freefonts/ongeulipkonkonce/)
- [온글잎 박다현체](https://designbase.co.kr/freefonts/ongeulipbagdahyeonce/)
- [어그로체](https://designbase.co.kr/freefonts/eogeuroce/)
- [파셜산스](https://designbase.co.kr/freefonts/pasyeolsanseu/)
- [나눔스퀘어라운드](https://designbase.co.kr/freefonts/nanumseukweeoraundeu/)
- [나눔스퀘어 네오](https://designbase.co.kr/freefonts/nanumseukweeoneo/)
- [여기어때 잘난체](https://designbase.co.kr/freefonts/yeogieoddaejalnance/)
- [에스코어드림](https://designbase.co.kr/freefonts/eseukoeodeurim/)
- [G마켓 산스](https://designbase.co.kr/freefonts/gmakessanseu/)
- [페이퍼로지](https://designbase.co.kr/freefonts/peipeoroji/)
- [프리텐다드](https://designbase.co.kr/freefonts/peuritendadeu/)

## 인터랙션 코드

- [가로 스크롤 핀](https://designbase.co.kr/interaction-code/horizontal-scroll-pin/)
- [무한 마퀴](https://designbase.co.kr/interaction-code/infinite-marquee/)
- [마그네틱 버튼](https://designbase.co.kr/interaction-code/magnetic-button/)
- [패럴랙스 이미지](https://designbase.co.kr/interaction-code/parallax-image/)
- [텍스트 스태거 리빌](https://designbase.co.kr/interaction-code/text-stagger-reveal/)
- [스크롤 페이드 업](https://designbase.co.kr/interaction-code/scroll-fade-up/)

## 메가 메뉴

- [플러그인 & 도구](https://designbase.co.kr/?post_type=db_mega_menu&p=78849)
- [템플릿](https://designbase.co.kr/?post_type=db_mega_menu&p=78846)
- [콘텐츠](https://designbase.co.kr/?post_type=db_mega_menu&p=78848)
- [강좌](https://designbase.co.kr/?post_type=db_mega_menu&p=78852)

## 무료소스

- [정사각형 트라이폴드 전단지 목업](https://designbase.co.kr/freebies/square-format-trifold-flyer-mockup/) - 정사각형 형태의 접이식 전단지(트라이폴더) 목업 파일입니다. 5개의 PSD 파일을 제공하여 다양한 레이아웃 테스트가 가능합니다.
- [캔버스 소재 의자 위 토트백 목업](https://designbase.co.kr/freebies/canvas-tote-bag-on-chair-mockup/) - 의자에 배치된 캔버스 토트백 모형(Mockup) 세트입니다. 브랜딩이나 로고 인쇄 디자인을 테스트하는 데 유용합니다.
- [펼쳐진 책 표지 및 내부 레이아웃 목업](https://designbase.co.kr/freebies/free-open-title-landscape-book-mockup-psd/) - 책의 표지, 타이틀 페이지 등 여러 장을 한 번에 보여줄 수 있는 고급스러운 목업입니다. 출판물 디자인 시안 제작이나 포트폴리오용으로 유용하게 활용해 보세요.
- [와인병 및 유리 용기 목업](https://designbase.co.kr/freebies/free-wine-bottle-glass-mockup/) - 와인병과 다양한 유리 제품에 사용할 수 있는 목업입니다. 라벨 디자인을 적용하여 실제 결과물을 쉽게 확인할 수 있습니다.
- [손으로 잡은 iPhone 17 Pro 목업](https://designbase.co.kr/freebies/free-hand-holding-iphone-17-pro-mockup-psd/) - 손에 들고 있는 iPhone 17 Pro의 고해상도 목업 파일입니다. 새로운 디스플레이 디자인이나 마케팅 콘텐츠를 시연하는 데 활용할 수 있습니다.
- [iPad Pro & 가죽 소파 연출 목업 3종](https://designbase.co.kr/freebies/3-free-ipad-pro-on-leather-sofa-mockup-psd-set-files/) - 가죽 소파 위에 놓인 iPad Pro를 활용할 수 있는 고화질 목업 세트입니다. 제품 홍보나 광고 디자인에 고급스러운 분위기를 더해보세요.
- [지하철 내부 포스터 목업](https://designbase.co.kr/freebies/outdoor-fabric-fence-banner-mockup/) - 지하철 내부 공간에 홍보물이나 광고를 전시할 수 있는 고해상도 목업입니다. 디자인 시안을 자연스럽게 연출하는 데 활용해보세요.
- [지하철 내부 포스터 목업](https://designbase.co.kr/freebies/outdoor-fabric-fence-banner-mockup/) - 지하철 내부 공간에 홍보물이나 광고를 전시할 수 있는 고해상도 목업입니다. 디자인 시안을 자연스럽게 연출하는 데 활용해보세요.
- [타일 표면 비즈니스 카드 목업](https://designbase.co.kr/freebies/free-macbook-pro-on-the-dresser-mockup/) - 타일 배경 위에 놓인 명함 디자인을 구현할 수 있는 템플릿입니다. 다양한 각도에서 활용 가능한 5개의 PSD 파일을 다운로드하세요.
- [타일 표면 비즈니스 카드 목업](https://designbase.co.kr/freebies/free-macbook-pro-on-the-dresser-mockup/) - 타일 배경 위에 놓인 명함 디자인을 구현할 수 있는 템플릿입니다. 다양한 각도에서 활용 가능한 5개의 PSD 파일을 다운로드하세요.
- [인터 마이애미 저지 목업](https://designbase.co.kr/freebies/gritty-suburban-billboard-banner-mockup/) - 인터 마이애미 유니폼을 활용한 고화질 의류 목업입니다. 다양한 디자인 시안 제작 및 상품 개발 목적으로 활용해 보세요.
- [슬라이딩 럭셔리 선물 상자 목업 세트](https://designbase.co.kr/freebies/4-free-beautiful-premium-post-card-mockup-psd-files/) - 고급 제품이나 명품을 포장할 때 활용하기 좋은 슬라이딩 박스 목업입니다. 주얼리, 시계 등 다양한 럭셔리 아이템 패키지 디자인에 적용해 보세요.
- [Mupi 광고판 포스터 목업 3종 세트](https://designbase.co.kr/freebies/free-acid-mineral-wash-t-shirt-mockup-psd/) - Mupi 스탠드에 적합한 야외 포스터 목업 3종 세트를 제공합니다. 현실적인 환경에서 디자인을 효과적으로 보여줄 수 있습니다.
- [Mupi 광고판 포스터 목업 3종 세트](https://designbase.co.kr/freebies/free-acid-mineral-wash-t-shirt-mockup-psd/) - Mupi 스탠드에 적합한 야외 포스터 목업 3종 세트를 제공합니다. 현실적인 환경에서 디자인을 효과적으로 보여줄 수 있습니다.
- [깔끔한 비즈니스 카드 목업](https://designbase.co.kr/freebies/free-round-shop-sign-logo-mockup-psd/) - 전문적인 느낌의 비즈니스 카드 디자인을 완성할 수 있는 PSD 목업입니다. 웹 주소나 QR 코드 등을 추가하여 실질적으로 활용하기 좋습니다.
- [휴대용 쇼트 페이퍼 튜브 목업](https://designbase.co.kr/freebies/7-free-hardcover-title-open-book-mockup-psd-files/) - 제품을 담는 짧은 종이 튜브 목업입니다. 브랜딩 디자인이나 패키지 작업에 활용하기 좋습니다.
- [벽면 스티커 훼손(Ripped) 목업](https://designbase.co.kr/freebies/벽면-스티커-훼손ripped-목업/) - 벽이나 표면에 붙인 스티커가 찢어지거나 떨어지는 모습을 연출할 수 있는 목업입니다. 디자인에 현실적이고 생동감 넘치는 디테일을 더해보세요.
- [라운드 코너 비즈니스 카드 목업 5종 세트](https://designbase.co.kr/freebies/weathered-roadside-billboard-mockup/) - 모서리가 부드럽게 처리된 전문적인 비즈니스 카드 목업 파일입니다. 다양한 브랜드 디자인에 활용할 수 있는 고품질 PSD 템플릿 세트입니다.
- [라운드 코너 비즈니스 카드 목업 5종 세트](https://designbase.co.kr/freebies/weathered-roadside-billboard-mockup/) - 모서리가 부드럽게 처리된 전문적인 비즈니스 카드 목업 파일입니다. 다양한 브랜드 디자인에 활용할 수 있는 고품질 PSD 템플릿 세트입니다.
- [크루넥 티셔츠 전면 클로즈업 목업](https://designbase.co.kr/freebies/크루넥-티셔츠-전면-클로즈업-목업/) - 티셔츠 디자인 시안을 전면에서 입체적으로 확인할 수 있는 크루넥 목업입니다. 의류 브랜드나 개인 포트폴리오 작업에 활용하기 좋습니다.
- [우드 스툴 포스터 디스플레이 목업](https://designbase.co.kr/freebies/우드-스툴-포스터-디스플레이-목업/) - 우드 스툴 위에 액자나 포스터를 배치하는 인테리어 목업입니다. 브랜드 디자인을 실제 공간에 적용해보고 싶을 때 유용합니다.
- [LED 큐브 라이트박스 간판 목업 PSD](https://designbase.co.kr/freebies/free-led-cube-lightbox-sign-mockup-psd/) - 상점 외벽에 설치하는 LED 큐브 라이트박스 간판 전면 목업입니다. 다각적인 광고 효과와 뛰어난 시인성을 제공하여 매장 홍보에 적합합니다.
- [버스 정류장 포스터 광고 목업](https://designbase.co.kr/freebies/free-bus-stop-poster-ad-mupi-mockup-psd/) - 광고 디자인에 활용할 수 있는 버스 정류장 포스터 목업 템플릿입니다. 실제 환경에 작업물을 배치하여 생동감 있게 연출해 보세요.
- [뚜껑 없는 종이 커피 컵 목업 세트](https://designbase.co.kr/freebies/free-lidless-paper-coffee-cup-mockup-psd-set/) - 커피 컵 디자인을 위한 목업 세트입니다. 다양한 각도와 구성을 활용하여 제품 시안을 멋지게 구현할 수 있습니다.
- [크래프팅 박스 PSD 목업](https://designbase.co.kr/freebies/free-craft-box-psd-mockup/) - 수공예품이나 제품 라벨 디자인을 적용할 수 있는 빈티지 크래프트 상자 목업입니다. 다양한 브랜드 포장 디자인 작업에 활용해 보세요.
- [입체 상자 목업 PSD 세트](https://designbase.co.kr/freebies/free-on-edge-cuboid-box-mockup-psd-set/) - 제품 디자인에 활용할 수 있는 입체적인 커브형 박스 목업입니다. 다양한 각도에서 상품 패키징을 연출해 보세요.
- [지하철 광고 포스터 목업 파일](https://designbase.co.kr/freebies/3-free-premium-subway-poster-mockup-psd-files/) - 대중교통 환경에 최적화된 지하철 내부 광고판 목업입니다. 다양한 홍보 콘텐츠를 적용하여 효과적인 시각 자료를 제작할 수 있습니다.
- [커피 슬리브 목업](https://designbase.co.kr/freebies/free-coffee-sleeve-mockup-psd/) - 곡선 형태의 커피 슬리브 디자인을 위한 목업 파일입니다. 실제 인쇄물에 적용하여 브랜드 이미지를 확인해 보세요.
- [오피스 빌딩용 원형 간판 목업](https://designbase.co.kr/freebies/free-office-building-round-sign-mockup-psd/) - 사무실이나 상업 공간에 사용되는 원형 간판(Round Sign) 목업입니다. 다양한 비즈니스 환경에 적용할 수 있는 고품질 PSD 파일로 제작되었습니다.
- [iPhone 17 Pro Max 메탈 배경 디스…](https://designbase.co.kr/freebies/free-metal-scene-iphone-17-pro-max-mockup-psd-fig-files/) - 최신 기기인 iPhone 17 Pro Max를 세련된 메탈 질감 배경에 담아낸 고품질 목업입니다. 기기 디자인을 위한 전문적인 연출이 가능합니다.
- [손에 들린 명함/카드 PSD 목업](https://designbase.co.kr/freebies/free-card-in-hand-psd-mockup/) - 실제 손에 들고 있는 듯한 자연스러운 카드 목업입니다. 명함, 신용카드 등 평면 디자인 테스트에 활용해 보세요.
- [소셜 미디어 포스팅 목업 세트](https://designbase.co.kr/freebies/social-media-post-mockup-set/) - 다양한 소셜 미디어 플랫폼에 최적화된 게시물 디자인을 테스트할 수 있는 목업 세트입니다. 인스타그램, 페이스북 등 여러 채널에 바로 적용 가능한 템플릿이 포함되어 있습니다.
- [손에 든 iPad Pro 기기 목업 전개](https://designbase.co.kr/freebies/ipad-pro-in-hand-mockup/) - 실제 손에 들고 사용하는 듯한 자연스러운 연출이 가능한 고화질 아이패드 프로 목업입니다. 제품의 사용 시나리오를 보여주는 디자인 작업에 활용해 보세요.
- [제품 박스 및 비닐백 목업](https://designbase.co.kr/freebies/product-box-in-plastic-bag-mockup/) - 제품 박스와 비닐백에 디자인을 입힐 수 있는 고품질 목업입니다. 다양한 패키징 기획 작업에 활용해 보세요.
- [손에 들린 명함 목업 디자인](https://designbase.co.kr/freebies/business-card-in-hand-mockup/) - 실제 손에 자연스럽게 들고 있는 듯한 느낌의 비즈니스 카드 목업입니다. 제품 시안을 현실감 있게 보여주고 싶을 때 활용해 보세요.
- [스마트폰 플로팅 목업](https://designbase.co.kr/freebies/floating-smartphone-mockup/) - 스마트폰을 공중에 떠 있는 것처럼 연출할 수 있는 플로팅 디자인 목업입니다. 제품 홍보나 포트폴리오 작업에 활용하기 좋습니다.
- [회의실 LED 스크린 목업](https://designbase.co.kr/freebies/conference-hall-led-screen-mockup/) - 컨퍼런스나 대형 이벤트 공간에서 사용되는 LED 화면을 연출할 수 있는 고화질 목업입니다. 프레젠테이션이나 광고 디자인에 활용하여 완성도 높은 결과물을 만들어 보세요.
- [노트북 및 스마트폰 디바이스 목업](https://designbase.co.kr/freebies/laptop-and-smartphone-mockup/) - 노트북과 스마트폰을 동시에 활용할 수 있는 고품질 기기 목업입니다. 다양한 디자인 시안이나 UI/UX 결과물을 전문적으로 보여주는 데 유용합니다.
- [조명 큐브 간판 목업](https://designbase.co.kr/freebies/free-illuminated-cube-sign-mockup/) - 빛나는 큐브 형태의 간판 디자인을 연출할 수 있는 고품질 목업 파일입니다. 브랜드 로고나 메시지를 적용하여 시각적인 간판 작업을 완성해 보세요.
- [하드커버 펼친 책 표지 목업](https://designbase.co.kr/freebies/hardcover-open-book-mockup/) - A5 및 A4 사이즈를 지원하는 하드커버 책 표지 목업 파일입니다. 총 7가지의 다양한 각도에서 활용할 수 있습니다.
- [뚜껑 없는 종이 커피 컵 목업](https://designbase.co.kr/freebies/lidless-paper-coffee-cup-mockup/) - 뚜껑이 없는 종이 커피 컵 디자인을 위한 목업 파일입니다. 다양한 브랜드 로고나 패턴을 적용해 보세요.
- [사각 골판지 박스 Mockup 세트](https://designbase.co.kr/freebies/square-cardboard-box-mockup/) - 다양한 각도의 사각형 골판지 상자 목업 3종이 포함된 PSD 파일입니다. 제품 패키징 디자인 시 전면 배치에 활용하기 좋습니다.
- [주차된 밴 차량 광고 시안 목업](https://designbase.co.kr/freebies/free-parked-van-mockup/) - 차량 외벽에 부착할 광고나 브랜딩 디자인을 테스트해 볼 수 있는 무료 목업 파일입니다. 전문적인 야외 간판 제작 및 홍보물 기획에 유용합니다.
- [MacBook Pro 콘크리트 배경 목업](https://designbase.co.kr/freebies/free-macbook-pro-laying-on-concrete-mockup/) - 콘크리트 질감이 느껴지는 표면에 놓인 MacBook Pro 목업입니다. 제품 디자인을 세련되게 보여주고 싶을 때 유용하게 사용해 보세요.
- [건물 외벽 가로형 간판 목업](https://designbase.co.kr/freebies/free-horizontal-sign-on-a-building-mockup/) - 매장이나 건물의 외벽에 부착할 수 있는 가로형 간판 디자인 목업입니다. 다양한 브랜드 아이덴티티 작업을 위한 전문적인 환경을 제공합니다.
- [우드 의자 맥북 목업](https://designbase.co.kr/freebies/wooden-chair-macbook-mockup/) - 우드 의자를 배경으로 맥북을 연출할 수 있는 목업 파일 세트입니다. 총 3개의 PSD 파일을 제공합니다.
- [비대칭 트라이폴드 전단지 목업](https://designbase.co.kr/freebies/asymmetric-dl-trifold-flyer-mockup/) - 비대칭 레이아웃을 적용한 DL 사이즈 삼단 접지 광고 전단지 목업입니다. 전문적인 홍보물 디자인에 활용하기 좋습니다.
- [벽 부착형 빌보드 목업](https://designbase.co.kr/freebies/wall-mounted-billboard-mockup/) - 벽에 부착하는 대형 광고판(빌보드)을 위한 목업 템플릿입니다. 실제 환경과 같은 결과물을 미리 확인하며 디자인할 수 있습니다.
- [도심 배경 남성 후드티 스타일링 목업](https://designbase.co.kr/freebies/free-men-wearing-hoodie-against-the-city-mockup/) - 도시적인 분위기를 강조한 전신 모델 목업 템플릿입니다. 의류 디자인 및 패션 콘셉트 작업을 할 때 활용하기 좋습니다.
- [침대 시트 배경 아이폰 프로 목업](https://designbase.co.kr/freebies/free-lying-in-the-bedding-iphone-pro-mockup/) - 침대 시트에 자연스럽게 배치한 iPhone Pro 목업 파일입니다. 제품 디자인 연출에 활용하기 좋은 고품질 템플릿을 제공합니다.
- [유리 쇼윈도 매장 전면 목업](https://designbase.co.kr/freebies/free-glass-storefront-mockup/) - 실제와 같은 투명한 유리창을 활용할 수 있는 쇼윈도 디스플레이 목업입니다. 브랜드 홍보물이나 포스터를 전시하는 디자인에 사용하기 좋습니다.
- [정사각형 보드 아동 도서 목업](https://designbase.co.kr/freebies/square-board-childrens-book-mockup/) - 정사각형 형태의 아동 도서 제작 시안 목업입니다. 다양한 디자인 컨셉을 실제 책처럼 생생하게 시각화하는 데 활용해보세요.
- [도시 야경 포스터 Mockup](https://designbase.co.kr/freebies/street-citylight-poster-mockup/) - 도심의 밤거리 분위기를 담은 포스터 목업 파일입니다. 다양한 디자인 작업물에 멋진 배경을 연출해 보세요.
- [트리플 플래그 야외 광고 목업](https://designbase.co.kr/freebies/outdoor-triple-flag-mockup/) - 다양한 광고 디자인에 활용할 수 있는 야외 삼각 플래그 목업입니다. Photoshop(PSD) 파일로 제공되어 사용하기 편리합니다.
- [빈티지 벽 간판 목업](https://designbase.co.kr/freebies/vintage-wall-signboard-mockup/) - 빈티지한 분위기의 벽 간판 디자인을 연출할 수 있는 목업 파일입니다. 다양한 요소를 활용해 아늑하고 레트로한 느낌을 강조하세요.
- [도시 대중교통 정류장 포스터 목업](https://designbase.co.kr/freebies/urban-transit-shelter-poster-mockup/) - 도심의 대중교통 정류장을 배경으로 활용할 수 있는 포스터 디자인 목업입니다. 다양한 광고 시안 테스트가 가능한 PSD 파일로 제공됩니다.
- [우아한 철제 걸이형 간판 목업](https://designbase.co.kr/freebies/ornate-hanging-wrought-iron-signboard-mockup/) - 빈티지하면서도 우아한 느낌의 단철(wrought iron) 스타일 간판 목업입니다. 다양한 가게 디자인에 활용할 수 있는 PSD 파일입니다.
- [돌 위에 놓인 화장품 튜브 목업](https://designbase.co.kr/freebies/free-lying-on-rock-cosmetic-tube-mockup/) - 화장품 브랜드 디자인에 활용할 수 있는 튜브형 제품 목업입니다. 자연스러운 돌 배경과 함께 제품을 연출하여 트렌디한 느낌을 줄 수 있습니다.
- [원형 라벨 시트 목업](https://designbase.co.kr/freebies/round-label-sheet-mockup/) - 제품에 활용할 수 있는 원형 라벨 시트 목업입니다. 다양한 브랜딩 작업이나 패키지 디자인에 바로 적용해 보세요.
- [클래식 후드티 의류 목업](https://designbase.co.kr/freebies/classic-hoodie-mockup/) - 의류 브랜드 로고나 그래픽을 적용할 수 있는 고품질 후드티 목업입니다. 다양한 포즈와 구도로 활용하여 제품 홍보에 사용해 보세요.
- [명함 및 머그컵 조합 목업](https://designbase.co.kr/freebies/business-card-with-mug-mockup/) - 비즈니스 카드와 머그컵을 함께 배치하여 제품 홍보 효과를 극대화할 수 있는 종합 목업 템플릿입니다. 다양한 디자인 시안에 활용해 보세요.
- [비즈니스 카드 롤링 매트 목업](https://designbase.co.kr/freebies/business-card-on-rolling-mat-mockup/) - 명함이 롤링 매트 위에 연출된 목업입니다. 브랜드 홍보물이나 포트폴리오에 활용하기 좋습니다.
- [Climate Crisis 변형 타이포그래피 폰…](https://designbase.co.kr/freebies/climate-crisis-free-variable-font-in-8-styles/) - 한신문(Helsingin Sanomat)에서 제작한 타이포그래피 전용 무료 서체입니다. 북극 해빙 감소에 따라 무게가 변화하는 독특하고 시의성 있는 디자인이 특징입니다.
- [반응형 웹사이트 목업](https://designbase.co.kr/freebies/responsive-website-mockup/) - 다양한 기기에 최적화된 반응형 웹 디자인 목업입니다. 웹사이트의 전반적인 UI/UX를 테스트하고 시안을 제작하는 데 유용합니다.
- [스냅백 모자 로고 디자인 목업](https://designbase.co.kr/freebies/snapback-hat-mockup/) - 엠보싱 로고가 적용된 검정색 스냅백 모자 목업입니다. 의류 브랜딩이나 상품 기획 시 활용하기 좋은 고품질 리소스입니다.
- [이커머스 웹사이트 템플릿 – Figma](https://designbase.co.kr/freebies/free-e-commerce-website-template-figma/) - 의류 판매 이커머스 사이트에 활용 가능한 무료 Figma 웹사이트 템플릿입니다. 홈페이지와 아카이브 페이지 등 데스크톱 및 모바일 버전을 모두 제공합니다.
- [미니멀리한 향수병 목업](https://designbase.co.kr/freebies/perfume-bottle-mockup/) - 투명 유리와 검은 캡이 특징인 미니멀하고 감각적인 향수병 PSD 목업입니다. 고급 브랜드 디자인부터 개인 프로젝트까지 다양하게 활용해 보세요.
- [콘서트 티켓 PSD 목업](https://designbase.co.kr/freebies/concert-ticket-psd-mockup/) - 흐릿한 무대 배경을 뒤로하고 손에 잡힌 재즈 콘서트 티켓 목업입니다. 다양한 이벤트 홍보물 제작에 활용해 보세요.
- [고급 잡지/브로슈어 오픈 목업](https://designbase.co.kr/freebies/open-magazine-with-rolled-page-mockup/) - 펼쳐진 페이지와 말린 듯한 효과를 준 고급 잡지 목업입니다. 라이트 및 다크 모드 모두에 최적화되어 다양한 디자인 작업물에 활용할 수 있습니다.
- [완벽 제본 오픈 매거진 목업](https://designbase.co.kr/freebies/perfect-binding-open-magazine-mockup/) - 제본 처리된 형태의 잡지(매거진)를 펼쳐놓은 목업입니다. 다양한 인쇄물 디자인 시안을 입체적으로 연출할 때 활용해 보세요.
- [음악 앨범/CD 패키지 목업](https://designbase.co.kr/freebies/cd-cover-mockup/) - 디자인한 CD 커버를 실제 제품에 적용하여 보여주는 목업입니다. 음악 관련 포트폴리오 작업 시 유용하게 활용할 수 있습니다.
- [사각 스테이플 스티치 브로슈어 목업](https://designbase.co.kr/freebies/square-saddle-stitch-brochure-mockup/) - 스테이플 스티치가 적용된 사각형 형태의 브로슈어 디자인을 연출할 수 있는 전문 목업입니다. 인쇄물 레이아웃 작업 시 실제 결과물을 미리 확인해보세요.
- [직사각형 입체 박스 목업](https://designbase.co.kr/freebies/rectangle-perspective-box-mockup/) - 다양한 제품을 담는 직사각형 박스 목업입니다. 디자인 시안을 입체적으로 연출할 때 유용합니다.
- [사각 잡지 커버 목업](https://designbase.co.kr/freebies/square-magazine-cover-mockup/) - 스퀘어 형태의 잡지 표지를 전문적으로 연출할 수 있는 디자인 목업입니다. 다양한 출판물 및 브랜딩 작업에 활용해 보세요.
- [Z형 접지 사각 브로셔 목업](https://designbase.co.kr/freebies/z-fold-square-brochure-mockup/) - Z자 형태로 접히는 정사각형 브로슈어 디자인에 활용하기 좋은 목업 파일입니다. 다양한 인쇄물 레이아웃을 테스트해 보세요.
- [자전거 샵 모바일 앱 UI 키트 (Figma)](https://designbase.co.kr/freebies/bike-shop-mobile-app-figma/) - 자전거 매장을 위한 전용 모바일 앱 화면 디자인입니다. 커스터마이징부터 결제 과정까지 활용 가능한 15개의 준비된 스크린을 제공합니다.
- [포스터 A3 사이즈 목업 3종 세트](https://designbase.co.kr/freebies/collection-of-a3-poster-mockups/) - 스위스 바젤의 아름다운 배경을 활용한 실사 같은 A3 포스터 목업 세트입니다. 다양한 환경에서 디자인 테스트가 가능합니다.
- [향수병 목업 6종 세트](https://designbase.co.kr/freebies/6-free-perfume-bottle-mockups/) - 고화질로 제작된 향수병 목업 6종입니다. PSD 파일로 제공되어 브랜드 제품 디자인 시 커스터마이징하기 편리합니다.
- [캐주얼 스웨트팬츠 의류 목업](https://designbase.co.kr/freebies/sweat-pants-psd-mockups/) - 색상과 라벨 수정이 가능한 전신 스웨트 팬츠 의류 목업 파일입니다. 앞면과 뒷면을 모두 제공하여 캐주얼 의류 디자인에 활용하기 좋습니다.
- [Familjen Grotesk 산세리프 서체 팩](https://designbase.co.kr/freebies/familjen-grotesk-free-sans-font-in-8-styles/) - 스톡홀름에서 제작된 무료 산세리프 계열의 서체입니다. 총 8가지 스타일을 제공하여 다양한 디자인 프로젝트에 유연하게 활용할 수 있습니다.
- [아이패드 프로 아이폰 목업](https://designbase.co.kr/freebies/아이패드-프로-아이폰-목업/) - 최신 iPad Pro와 iPhone 기기 이미지를 활용하여 개발한 앱이나 디자인을 생동감 있게 보여줄 수 있는 목업입니다. 다양한 화면 구성을 제공합니다.
- [iPhone 13 Pro & iPhone Pro Hands 목업](https://designbase.co.kr/freebies/iphone-13-pro-iphone-pro-hands-목업/) - iPhone 13 Pro와 프로 핸드 기기에 적용할 수 있는 사실적인 디바이스 목업입니다. 다양한 디자인의 스크린 연출에 유용합니다.
- [스티커 패키지 목업](https://designbase.co.kr/freebies/stickers-packaging-psd-mockup/) - 제품에 사용될 스티커가 담긴 패키지 목업입니다. 다양한 각도에서 실사 느낌으로 디자인을 미리 확인해 보세요.
- [스프링 노트 목업](https://designbase.co.kr/freebies/notebook-free-mockup/) - 디자인 작업물을 실제 스프링 노트에 자연스럽게 적용해 볼 수 있는 고품질 목업입니다. 문서나 플래닝 콘텐츠 연출 시 활용해보세요.
- [아이패드 미니 목업](https://designbase.co.kr/freebies/ipad-mini-mockup/) - 다양한 디자인을 아이패드 미니 기기에 적용해 볼 수 있는 고화질 목업 템플릿입니다. 제품 시안 제작에 활용해보세요.
- [사용자 아바타 아이콘 세트](https://designbase.co.kr/freebies/userpics/) - 다양한 개성과 컨셉을 가진 사용자 프로필용 아바타 아이콘 세트입니다. UI 디자인에 재미있는 요소를 추가할 수 있습니다.
- [Deca UI Kit](https://designbase.co.kr/freebies/deca-ui-kit/) - 전문적인 웹 및 앱 디자인에 바로 사용할 수 있는 종합 UI 키트입니다. 다양한 컴포넌트를 활용하여 높은 완성도의 사용자 경험을 구현해 보세요.
- [롤업 스탠딩 배너 목업](https://designbase.co.kr/freebies/롤업-스탠딩-배너-목업/) - 전시회나 매장에서 활용할 수 있는 롤업 배너 디자인 목업입니다. 실제 환경에서 결과물을 미리 확인하고 작업해 보세요.
- [New 맥북 16인치 목업](https://designbase.co.kr/freebies/new-맥북-16인치-목업/) - 최신 맥북 16인치 디자인을 적용할 수 있는 고화질 목업 파일입니다. 다양한 디바이스에 활용하여 전문적인 결과물을 만들어 보세요.
- [3d 카툰 핸즈 아이폰 목업](https://designbase.co.kr/freebies/3d-카툰-핸즈-아이폰-목업/) - 카툰 스타일의 손 모델이 스마트폰을 들고 있는 3D 목업 리소스입니다. 다양한 화면 디자인 적용을 통해 홍보 자료 제작에 활용해 보세요.
- [clay 재질의 아이폰 목업](https://designbase.co.kr/freebies/clay-재질의-아이폰-목업/) - 클레이 재질 느낌의 아이폰 목업입니다. 제품 디자인이나 UI/UX 시안을 연출할 때 사용하기 좋습니다.
- [피그마 UI 전용 무료 아이콘](https://designbase.co.kr/freebies/피그마-ui-아이콘팩/) - 다양한 기기 및 인터페이스에 활용할 수 있는 전문적인 아이콘 세트입니다. 피그마 환경에서 바로 사용 가능하도록 제작되었습니다.
- [스티커 그래픽](https://designbase.co.kr/freebies/open-stickers/) - 다양한 컨셉의 스티커 그래픽 파일 모음입니다. 다이어리 꾸미기나 포장재 등에 활용해 보세요.
- [투명 비닐 포장 목업](https://designbase.co.kr/freebies/plastic-bag-textures/) - 제품 라벨이나 브랜딩을 적용해 볼 수 있는 투명 봉지 패키징 목업입니다. 다양한 상품의 홍보 및 디자인 테스트에 활용하기 좋습니다.
- [Mac Studio & Studio Display 목업](https://designbase.co.kr/freebies/free-mac-studio-studio-display-mockup/) - Mac Studio와 Studio Display를 활용한 고화질 제품 목업입니다. 전문적인 디자인 결과물을 실제 디바이스에 적용하여 보여주세요.
- [대시보드 UI 콘셉트 디자인](https://designbase.co.kr/freebies/dashboard-ui-concept/) - 다양한 데이터를 시각적으로 분석할 수 있는 대시보드 UI 콘셉트입니다. 서비스 관리 페이지나 웹사이트의 핵심 화면 디자인에 활용해 보세요.
- [신용카드 UI 키트](https://designbase.co.kr/freebies/credit-card-ui-kit/) - 결제 및 카드 관련 인터페이스 디자인을 위한 컴포넌트 모음입니다. 웹 또는 앱에 바로 적용할 수 있는 요소들로 구성되어 있습니다.
- [날씨 아이콘셋 Frosted Glass](https://designbase.co.kr/freebies/날씨-아이콘셋-frosted-glass/) - 안개 같은 프로스티드 글라스 질감이 적용된 날씨 아이콘 세트입니다. 다양한 UI 프로젝트에 활용하여 감각적인 디자인을 완성해 보세요.
- [투명 카드 초대장 목업](https://designbase.co.kr/freebies/transparent-invitation-card-mockup/) - 투명한 소재의 카드 디자인을 연출할 수 있는 초대장 목업입니다. 특별하고 세련된 느낌의 인쇄물 제작에 활용해 보세요.
- [브랜딩 서식류 목업](https://designbase.co.kr/freebies/folder-stationery-branding-mockup/) - 브랜딩 프로젝트에 바로 활용할 수 있는 다양한 형태의 서류 및 템플릿 모음입니다. 기업 문서나 홍보 자료 제작 시 유용하게 사용하세요.
- [4가지 서식류 목업](https://designbase.co.kr/freebies/stationery-mockup-psd/) - 다양한 종류의 인쇄물 및 문서 서식을 한 번에 확인할 수 있는 목업 세트입니다. 프레젠테이션부터 브로슈어까지 활용해 보세요.
- [전시 부스 목업](https://designbase.co.kr/freebies/exhibition-booth-mockup-psd/) - 다양한 구조의 전문적인 전시 부스 레이아웃을 확인할 수 있는 고퀄리티 목업입니다. 브랜드 홍보 및 시안 제작에 활용해 보세요.
- [앱 개발 관련 일러스트 ai 파일](https://designbase.co.kr/freebies/apps-development-illustration/) - 앱 서비스 기획 및 디자인에 활용할 수 있는 다양한 주제의 일러스트 파일입니다. 전문적이고 트렌디한 느낌을 주는 캐릭터와 오브젝트가 포함되어 있습니다.
- [명함 목업](https://designbase.co.kr/freebies/business-card-mockups/) - 전문적인 비즈니스 카드 제작 시 활용할 수 있는 고품질 목업입니다. 다양한 각도와 연출을 통해 실제 인쇄물처럼 보이게 할 수 있습니다.
- [맥북 프로 목업](https://designbase.co.kr/freebies/macbook-pro-mockup/) - 맥북 프로 화면에 디자인을 적용할 수 있는 고화질 Mockup입니다. 다양한 기기 배치와 함께 활용하여 홍보 자료를 제작해 보세요.
- [로고 스템프 목업](https://designbase.co.kr/freebies/modern-stamped-logo-mockup/) - 브랜드 로고나 워터마크를 도장(스탬프) 형태로 디자인해보세요. 다양한 크기와 스타일의 스탬프 효과를 적용해 볼 수 있는 유용한 목업 리소스입니다.
- [풍부한 색감의 친근한 일러스트](https://designbase.co.kr/freebies/free-draw-illustrations/) - 다양한 컨셉과 풍부한 색감을 자랑하는 친근한 스타일의 캐릭터 및 배경 일러스트입니다. 웹사이트 디자인이나 인쇄물에 활용하기 좋습니다.
- [시네마 4D로 제작된 아기자기한 그래픽](https://designbase.co.kr/freebies/시네마-4d로-제작된-아기자기한-그래픽/) - Cinema 4D 프로그램으로 제작된 아기자기하고 다채로운 그래픽 요소 모음입니다. 다양한 디자인 작업의 포인트로 활용해 보세요.
- [감성충만 빛 그림자 서식류 목업](https://designbase.co.kr/freebies/lively-shadows-stationery-mockup/) - 따뜻한 분위기의 빛과 그림자가 연출된 문서 및 전지 목업 템플릿입니다. 포트폴리오나 브랜딩 작업에 활용하기 좋은 고품질 리소스를 제공합니다.
- [맥북 뒷면 스티커 목업](https://designbase.co.kr/freebies/macbook-lid-stickers-mockup/) - 맥북 뒷면에 커스텀 스티커를 적용해 볼 수 있는 고품질 목업 파일입니다. 다양한 디자인 시안을 실제 제품 위에 쉽게 배치하여 활용해보세요.
- [햄버거 패키지 목업](https://designbase.co.kr/freebies/burger-box-mockup/) - 다양한 브랜드를 위한 버거 및 샌드위치 포장 디자인 목업입니다. 인쇄물 제작 시 참고하여 활용해 보세요.
- [와인병 목업](https://designbase.co.kr/freebies/wine-bottle-mockup/) - 와인병을 활용한 감각적인 제품 홍보 목업입니다. 브랜딩 및 패키징 디자인 작업에 유용하게 사용하세요.
- [아이폰 손으로 잡고 있는 목업](https://designbase.co.kr/freebies/iphone-in-hand-mockup/) - 실제 손에 들고 촬영한 듯한 느낌의 스마트폰 목업 템플릿입니다. 앱 화면이나 UI 디자인을 자연스럽게 전시할 때 유용하게 사용할 수 있습니다.
- [벽 포스터 목업](https://designbase.co.kr/freebies/brick-wall-posters-mockup/) - 디자인한 포스터가 실제 벽에 걸려있는 모습을 연출할 수 있는 목업입니다. 다양한 인테리어 분위기에 맞춰 사용해 보세요.
- [라이프스타일 일러스트](https://designbase.co.kr/freebies/라이프스타일-일러스트/) - 일상생활의 따뜻하고 감성적인 분위기를 담은 라이프스타일 일러스트입니다. 웹사이트나 블로그 콘텐츠 제작에 자유롭게 활용할 수 있습니다.
- [명상 앱 UI Kit](https://designbase.co.kr/freebies/meditation-app-freebie/) - 명상 및 웰빙 콘텐츠를 디자인할 수 있도록 구성된 전문적인 UI 키트입니다. 다양한 화면 구성을 통해 사용자 친화적이고 몰입도 높은 인터페이스를 구현해 보세요.
- [Macbook Pro 16 목업](https://designbase.co.kr/freebies/macbook-pro-16-목업/) - MacBook Pro 16인치 노트북 화면에 작업물 디자인을 적용할 수 있는 고화질 목업 파일입니다. 포트폴리오나 웹 디자인 결과물을 생동감 있게 보여주고 싶을 때 유용합니다.
- [명함, 레더 명함 홀더 목업](https://designbase.co.kr/freebies/명함-레더-명함-홀더-psd-무료목업/) - 명함과 가죽 카드 홀더를 보여주는 고품질 목업입니다. 실제 제품에 디자인을 입혀 포트폴리오나 홍보물 제작에 활용해 보세요.
- [iPhone 13 Pro Max 목업](https://designbase.co.kr/freebies/iphone-13-pro-max-mockup/) - 최신 iPhone 13 Pro Max 기기를 활용한 화면 목업 리소스입니다. 앱 디자인이나 사용자 인터페이스 테스트에 유용하게 사용하세요.
- [북 커버 목업](https://designbase.co.kr/freebies/https-mrmockup-com-small-book-cover-mockup/) - 책 표지 디자인을 작업할 때 사용할 수 있는 목업 파일입니다. 다양한 각도와 재질로 멋진 결과물을 연출해 보세요.
- [도어 행거 목업](https://designbase.co.kr/freebies/door-hanger-mockup/) - 문에 걸어 사용하는 홍보물 또는 안내문 디자인을 위한 전문적인 목업입니다. 이벤트나 정보를 간결하고 세련되게 보여줄 때 활용해 보세요.
- [아이패드 프로 목업](https://designbase.co.kr/freebies/hand-holding-tablet-ipad-psd-mockup/) - 다양한 디자인을 적용할 수 있는 iPad Pro 목업 파일입니다. 실제 장치에 작업물을 생생하게 표현해 보세요.
- [갤럭시 S21 목업](https://designbase.co.kr/freebies/갤럭시-s21-목업/) - 갤럭시 S21 기기를 활용하여 디자인 시안을 연출할 수 있는 고품질 모형입니다. 전자기기 화면에 작업을 적용해 보거나 테스트하는 데 유용합니다.
- [브랜딩 서식류 목업 세트](https://designbase.co.kr/freebies/product-psd-stationery-mockup-set/) - 다양한 브랜딩 서식과 용지를 연출할 수 있는 목업입니다. 명함, 레터헤드 등 전문적인 브랜드 이미지를 완성해 보세요.
- [레코드 목업](https://designbase.co.kr/freebies/vinyl-record-mockup/) - 아티스트의 바이닐 레코드 커버 디자인을 입힐 수 있는 고품질 목업입니다. 다양한 크기와 각도로 활용하여 실제 작업물처럼 전문적으로 연출할 수 있습니다.
- [사각 비닐 패키지 목업](https://designbase.co.kr/freebies/sachet-on-sandstone-rectangle/) - 다양한 제품 디자인을 적용할 수 있는 사각형 형태의 비닐 포장지 목업입니다. 브랜드나 제품 홍보물 제작에 활용해 보세요.
- [액자 목업](https://designbase.co.kr/freebies/picture-frame-mockup/) - 다양한 포스터나 액자 디자인을 보여줄 수 있는 고품질 목업 템플릿입니다. 작업물에 실제와 같은 현실적인 느낌을 더해보세요.
- [매거진 목업](https://designbase.co.kr/freebies/magazine-mockup/) - 잡지나 매거진의 표지와 내부 레이아웃을 효과적으로 보여줄 수 있는 고품질 목업 파일입니다. 다양한 인쇄물 디자인 컨셉 테스트에 활용해 보세요.
- [맥북 프로 16인치 목업](https://designbase.co.kr/freebies/macbook-pro-16-mockup/) - 16인치 MacBook Pro 디스플레이 목업 파일입니다. 디자인 시안이나 UI를 실제 기기에 적용하여 보여줄 때 유용합니다.
- [몬스테라 식물 이미지](https://designbase.co.kr/freebies/monstera-deliciosa-item/) - 디자인 배경이나 포스터 제작에 활용할 수 있는 몬스테라 식물 일러스트입니다. 싱그러운 느낌으로 다양한 프로젝트에 사용해보세요.
- [유리 로고 목업](https://designbase.co.kr/freebies/window-psd-mockup/) - 유리 제품에 로고를 적용해 볼 수 있는 목업입니다. 세련된 분위기로 다양한 브랜드 홍보나 전시회 디자인에 활용하기 좋습니다.
- [건물 사인물 목업](https://designbase.co.kr/freebies/sign-on-building-mockup/) - 건물 외벽에 적용할 수 있는 다양한 간판 및 사인물 디자인을 테스트해 보세요. 브랜드 아이디어를 현실적인 환경에서 구현하기 좋습니다.
- [빌딩 사인물 목업](https://designbase.co.kr/freebies/building-sign-mockup/) - 건물 외벽에 설치하는 다양한 크기와 형태의 간판 및 사인물을 연출할 수 있는 고품질 목업 파일입니다. 디자인 결과물의 최종 적용 모습을 바로 확인해보세요.
- [서피스 프로 isometric 뷰 목업](https://designbase.co.kr/freebies/perspective-psd-surface-pro-mockup/) - 서피스 프로 기기에 들어갈 디자인을 입체적인 아이소메트릭 각도에서 보여주는 목업입니다. 다양한 화면 구성을 테스트하는 데 유용합니다.
- [아이폰 11 Pro 폰케이스 목업](https://designbase.co.kr/freebies/free-iphone-11-pro-case-mokcup/) - 아이폰 11 Pro 모델에 적용할 수 있는 다양한 스마트폰 케이스 디자인 목업입니다. 제품 홍보나 UI/UX 기획 시 활용하기 좋습니다.
- [Definition, Types of Mockups, Why Do You Need One](https://designbase.co.kr/freebies/definition-types-of-mockups-why-do-you-need-one/) - In the dynamic landscape of design, where imagination converges with innovation, the term ‘mockup’ stands as a cornerstone, defining the visual representation of creative concepts. ...
- [iPhone X in Hand – One More Free PSD Mockup](https://designbase.co.kr/freebies/iphone-x-in-hand-one-more-free-psd-mockup/) - Hi, everyone. One more free mockup from us. Showcase your design of mobile app with this iPhone X free PSD mockup. Smart Object added for ...
- [iPhone X – Free PSD Mockup](https://designbase.co.kr/freebies/iphone-x-free-psd-mockup/) - Hi, we are glad to present you our second free mockup. Showcase your design of app with this great iPhone X Free Mockup. Smart Object ...
- [All Free Mockup Categories](https://designbase.co.kr/freebies/all-free-mockup-categories/) - If you’re looking for high-quality mockups to present your design work or branding ideas, Free-Mockup.com has you covered. With dozens of specialized categories, you can ...
- [Tiled surface business card mockup](https://designbase.co.kr/freebies/tiled-surface-business-card-mockup/) - 5 PSD files 85x55 mm
- [Free HQ Inter Miami Jersey Mockup PSD](https://designbase.co.kr/freebies/free-hq-inter-miami-jersey-mockup-psd/) - The football World Cup is starting on 11th June 2026, and I am writing this on 8th. Everyone is excited about it, but on the other part of the world, after 100 days of war in Iran, the missiles have been fired again from Israel to Iran, and in retaliation, Iran has also fired. There
- [Free Sliding Luxury Gift Box Mockup PSD Set](https://designbase.co.kr/freebies/free-sliding-luxury-gift-box-mockup-psd-set/) - Sliding boxes are one of the most sturdy and elegant in appearance when it comes to packing luxury or expensive items. Sliding boxes should be the first choice for luxury perfumes, wrist watches, necklaces, gold/silver bangles, and other types of jewelry. Some electronic companies also prefer sliding boxes. You will get to see top-of-the-line mobile
- [3 Free Near Theater 2:3 Mupi Poster Mockup PSD Files Set](https://designbase.co.kr/freebies/3-free-near-theater-23-mupi-poster-mockup-psd-files-set/) - As we have been presenting new mockups every day, we are providing you with yet another good mockup, this time designed in Blender and rendered with Cycles. This is called Mupi and has other names, such as citylight, display poster stand, and stand-alone poster structure. It is usually seen near the pedestrian lane and is
- [Free Clean Busienss Card Mockup PSD](https://designbase.co.kr/freebies/free-clean-busienss-card-mockup-psd/) - This time, when you create a new business card design, make sure you are adding a QR code to it. There is no need to add a lot of information; just your web URL, where the all-products landing page is, would be a good choice. If you have a digital brochure, then you should consider

## 매거진

- [AI가 웹사이트를 직접 사용하는 시대, ‘Agent-Ready Website’가 뜨는 이유](https://designbase.co.kr/magazine/agent-ready-website-agent-ux/) - 같은 쇼핑몰, 같은 상품, 같은 가격이었습니다. 그런데 AI에게 상품을 찾고 비교하고 조건에 맞는 제품을 선택하게 하자 작업 성공률이 49.3%에서 89.3%로 뛰었습니다. 더 좋은 AI 모델로 바꾼 것도 아닙니다. 바뀐 것은 웹사이트였습니다. 2026년 7월 공개된 「Designing Agent-Ready Websites for AI Web Agents」 연구에서는 동일한 쇼핑몰을 일반적인 사람 중심 웹사이트와 AI가 이해하고 행동하기 쉽게 만든 웹사이트로 나누어
- [디자이너 몸값 상승 필수 코스: UX/UI, 블렌더, AI, 3D 웹까지 (이벤트 종료)](https://designbase.co.kr/magazine/essential-courses-for-increasing-your-designers-value-from-ux-ui-to-blender-ai-and-3d-web/) - [쿠폰 사용 기간 종료되었습니다.] 디베 회원 여러분, 디자이너라면 놓칠 수 없는 강의를 추천드립니다.마침, 콜로소에서 디베 구독자분들 선착순 100분에게만 적용되는 ‘35% 할인가 쿠폰’을 오픈해 주셨습니다.. 독학하기 좋은 기회가 온 것 같습니다 여러분..!! (단, 9월 8일까지 2주간만 진행합니다!) 구글 디자이너에게 배우는 UXUI 디자인 핵심 스킬 60강사전 구글 UX/UI 디자이너 한승헌 님의 강의로, 실무에서 바로 적용할 수 있는
- [무언가에 깊게 몰두하면, 결국 이루어 진다](https://designbase.co.kr/magazine/if-you-immerse-yourself-deeply-in-something-it-will-eventually-come-true/) - Q. 본인에 대한 짧은 소개 부탁드립니다. 현지 님 : 안녕하세요. 저는 현재 유니버설 스튜디오 헐리우드에서 컨셉 아티스트로 일하고 있는 류현지라고 합니다. 작년에 UCLA에서 영화미술 석사를 마친 후 연말까지 디즈니랜드의 디자인 및 설계를 맡고 있는 월트 디즈니 이매지니어링에서 일했습니다. Q. 현재 본인의 직업인 ‘컨셉 아티스트’에 대한 설명 부탁드립니다. 현지 님 : 컨셉 아티스트라는 직종이 생소하실 수도
- [서체에 진심인 윤디자인 그룹, 다시 없을 만렙 폰트 캠페인까지](https://designbase.co.kr/magazine/max-level-font-campaign-by-yoon-design-group/) - 안녕하세요! 오늘은 폰트 디자인 분야에서 선도적인 위치를 차지하고 있는 윤디자인 그룹을 소개해드립니다. 이 회사는 여러분이 일상에서 마주하는 폰트 중 상당수를 제작하고 있는 기업인데, 이번에 역사적으로 처음이자 마지막, 다시는 없을 ‘만렙 폰트 캠페인’을 진행한다고 해서 같이 소개해 드릴게요. 기간 내 구매하신 분들은 윤고딕, 운명조 포함 총 239개 패밀리, 645종의 폰트를 모두 만원에 사용할 수 있습니다. 자세한
- [느슨해진 예술씬에 긴장감을 주는 인공지능 등장 - Stable Diffusion](https://designbase.co.kr/magazine/stable-diffusion/) - 안녕하세요. 오늘은 최근에 화두가 됐던 '그림을 아주 잘 그려주는 인공지능 Stable Diffusion'을 주제로 가져왔습니다. 뭐길래 이렇게 야단인지.. 그 기술을 직접 써보면서 느낀점과 인공지능에게 잘못하다간 밥그릇을 뺏길 수 있겠다는 생각이 문득 들지만 우리가 어떻게 대응해야 할지 생각해봤습니다. 인공지능 기술은 1959년에 등장했지만, 그 당시 컴퓨터 성능에 의해 크게 각광받진 못했지만, 알파고의 등장 이후로 핫해진 건 사실이죠. 인공지능
- [더 넓게, 더 깊이 있게 바라보는 습관](https://designbase.co.kr/magazine/the-habit-of-looking-wider-and-deeper/) - Q. 본인에 대한 짧은 소개 부탁드립니다. 진희 님 : 안녕하세요. 현재 오늘의집에서 프로덕트 오너(PO)로 업무 중인 한진희입니다. 저는 16년도부터 IT업계에서 일을 시작했어요. 아만다 회사에서 UI 디자이너로 시작해서 요기요 회사에서 PO로 직무 변경 후 지금까지 PO로 일하고 있어요. 프로덕트를 왜 만드는지 본질을 가장 중요하게 생각하고 잘 아는 PO라고 소개하고 싶어요. Q. 현재 본인의 직업인 ‘프로덕트 오너(PO)’에
- [UXUI 디자인 참고하기 좋은 웹사이트 모음](https://designbase.co.kr/magazine/uxui-design-reference-website/) - 오늘은 모바일 앱 UXUI 디자인을 참고하기 좋은 사이트를 소개해 드릴게요. Collect ui Collect ui는 카테고리별로 상세하게 분류되어 있어 참고하려는 페이지와 비슷한 디자인을 찾기 편합니다.http://collectui.com/ UI Garage UI Garage도 Collect UI와 비슷한 사이트입니다. 플랫폼과 카테고리, 날짜 등의 필터 기능을 제공해서 원하는 페이지의 UI를 쉽게 찾을 수 있습니다.https://uigarage.net/
- [웹디자인 참고하기 좋은 웹사이트 모음](https://designbase.co.kr/magazine/a-collection-of-web-design-friendly-websites/) - 웹디자인을 하기 전에 꼭 참고해야 할 사이트를 소개해 드릴게요. 웹 디자인을 처음 공부하면 기초를 다지는 것도 중요하지만, 좋은 디자인을 많이 보는 것도 중요합니다. 비핸스, 드리블, 핀터레스트에서 이미지로 된 디자인을 보는 것도 좋지만, 아래 있는 5개의 웹사이트를 통해 실제 동작하는 좋은 디자인을 자주 보시는 것을 추천드립니다. Awwwards awwwards 웹사이트에서는 실제로 개발된 멋진 웹사이트들을 볼 수 있습니다.
- [함께 성장하는 디자이너](https://designbase.co.kr/magazine/designers-growing-together/) - 앞에 듀오톤의 정다영 대표님과의 인터뷰가 있었는데, 리더와 팀원의 이야기도 따로 들어봤어요. 디자이너로서 겪는 시행착오와 중요하게 생각하는 부분, 공부 노하우 등을 알아봤어요. (듀오톤 디자이너 인터뷰 1편. 오너의 마음으로 프로젝트의 A부터 Z까지, 정다영 Creative Director 보러가기) Q. 본인에 대한 짧은 소개 부탁드립니다. 승윤 님 : 듀오톤 IX팀 리더 이승윤 책임 입니다. 듀오톤에 오기전에는 광고, AR, 뉴미디어 아트 등의
- [오너의 마음으로 프로젝트의 A부터 Z까지](https://designbase.co.kr/magazine/the-attitude-of-doing-the-project-from-a-to-z-with-a-sense-of-ownership/) - 저 포함 많은 디자이너 분들이 디자이너로서 성장할 때 같이 함께할 회사를 고민하거나 좋은 동료를 찾고자 노력하죠. 디자인을 이제 막 공부하거나 성장하고자 하는 분들에게도 도움 될 것 같아 평소 궁금했던 회사나 특정 분야에서 두각을 나타내는 디자이너분들께 인터뷰를 요청해서 직접 만나서 들어보고 정리했습니다.처음으로 요즘 핫한 듀오톤 에이전시를 방문해서 정다영 대표님과 이승윤 책임님, 박정진 선임님의 인터뷰를 진행했어요. 업무하느라
- [클릭 한 번으로 웹사이트 화면 캡쳐뜨는 방법(크롬 확장 프로그램)](https://designbase.co.kr/magazine/웹사이트-화면-캡쳐뜨는-방법/) - 안녕하세요. 오늘은 웹 사이트 전체 화면을 클릭 한 번으로 캡처하는 방법을 알려드릴게요! 웹 디자인을 하다 보면 레퍼런스를 찾고 자료 정리를 위해서 캡처한 이미지를 수집해야 할 때가 있죠.아니면 웹사이트 리뉴얼 작업할 때 개선 전 모습을 기록하기 위해 캡처가 필요할 수도 있고, 웹 프런트 앤드 개발 작업 이후에 QA를 진행할 때 우리가 한 디자인과 비교할 때도 필요할
- [쉽게 사람 일러스트레이션 믹스 매치 하기 'humaaans'](https://designbase.co.kr/magazine/사람-일러스트레이션-믹스매치-humaaans/) - 안녕하세요. 휴먼스라고 들어보셨나요? 손쉽게 사람 일러스트레이션을 믹스 & 매치를 할 수 있게 도와주는 디자인 라이브러리입니다. 저작권도 완전 무료인 COO입니다. 일러스트를 쉽게 믹스 & 매치 할 수 있게 도와주는 소프트웨어인 'blush'라는 툴이 있는데, 거기에서도 무료로 사용이 가능합니다. blush라는 툴은 나중에 한번 알아볼게요 :) 휴먼스 사이트 바로가기 전문 일러스트레이터가 아닌 이상 매번 상황에 맞는 사람 일러스트 만들기
- [웹 주소 URL 짧게 만들어 주는 웹사이트](https://designbase.co.kr/magazine/url-shortener/) - 웹 주소 Url을 짧게 만들어주는 웹사이트를 소개해드릴게요. Url 길이를 짧게 만들어야 하는 이유는 여러 가지가 있습니다.이유는 업체마다 다른데, 한글 url을 사용하는 경우가 있죠. 이 페이지 주소 공유하기위해 그대로 복사 붙여넣기 하면 한글 url 특성상 엄청 길어지게 됩니다. http://designbase.co.kr/magazine/%eb%94%94%ec%9e%90%ec%9d%b4%eb%84%88%ea%b0%80-%eb%ac%b4%ec%a1%b0%ea%b1%b4-%ed%94%bc%ed%95%b4%ec%95%bc-%ed%95%a0-%ed%9a%8c%ec%82%ac-%ec%9c%a0%ed%98%95/ 운영하는 SNS나 블로그, 웹사이트 등 어딘가에 url로 기재하기에 너무 길죠. 그럴때 URL 짧게 줄여주는 기능을 활용하면 유용하겠죠?!
- [디자이너가 무조건 피해야 할 회사 유형](https://designbase.co.kr/magazine/디자이너가-무조건-피해야-할-회사-유형/) - 안녕하세요! 이번 디자인 스낵 콘텐츠 역시 짠맛입니다..! 질문 : 디자이너가 무조건 피해야 할 회사 유형은?🤬 이번에도 518명이나 되는 많은 분들이 투포에 참여해주셨습니다.👀 질문 이것도 가능하지? – 분명 웹디자이너로 취업했는데 마케팅 업무부터 CS까지 다 맡기는 회사 + 야근은 당연히 기본바통터치 – 입사했더니 디자이너가 준비했다는 듯이 바로 퇴사 + 인수인계 문서나 파일도 제대로 없음인력사무소 - 취업하자마자 다른
- [각종 디바이스 무료 목업 (약 90종) by facebook](https://designbase.co.kr/magazine/각종-디바이스-무료-목업-약-90종-by-facebook/) - 매번 디바이스 목업 소스를 찾아다니기 힘드시죠. 페이스북 디자인 웹사이트에서 가장 기본적인 디바이스의 정면 PNG 파일과 스케치 파일을 제공합니다. 무려 90종 이상의 디바이스를 제공합니다. 같이 한번 살펴보죠. 스크롤을 내려보면 중간에 필터 기능이 있습니다. Phone, Watch, Tablet, Computer, Display, Home 이렇게 있습니다. 애플 디바이스에서 iMac이랑 아이패드, 아이폰, 맥북, 애플 워치를 제공하고, 삼성 갤럭시 노트와 갤럭시 제품들도 제공하고
- [저작권 완전 무료 이미지 사이트 모음](https://designbase.co.kr/magazine/저작권-완전-무료-이미지-사이트-모음/) - 오늘은 CCO 저작권 무료 이미지 사이트 추천합니다. 소셜에 올릴 콘텐츠를 제작하거나 블로그에 글 하나 쓰더라도 그에 맞는 이미지를 사용오늘은 CCO 저작권 무료 이미지 사이트 추천합니다. 소셜에 올릴 콘텐츠를 제작하거나 블로그에 글 하나 쓰더라도 그에 맞는 이미지를 사용하는 것은 꼭 필요하죠. 그러나 저작권에서 자유로울 수 없습니다. 구글에서 상업적으로 이용 가능한 이미지만 찾아보면 쓰고 싶지 않은 이미지로
- [그라데이션 컬러 추천해주는 사이트](https://designbase.co.kr/magazine/그라데이션-컬러-추천해주는-사이트/) - 꾸준히 사랑을 받아온 스타일 중 하나는 그라데이션이죠. Behance에서 Gradient라고 검색해봐도 그라데이션의 인기를 알 수 있겠죠? 하지만, 막상 그라데이션 컬러를 사용하려고 하면 어렵습니다. 이럴 때 컬러를 참고할만한 사이트들이 있습니다. 비슷한 사이트들은 좀 더 있지만 그중에 베스트 세 곳 만 뽑아봤습니다. WebGradients 웹그라디언츠는 감각적인 그라데이션 컬러들을 모아서 추천해주는 사이트입니다. 컬러 Hex값도 제공하고 있어서 빠르게 적용도 가능합니다. https://webgradients.com/ Blend 블랜드의 좋은 점은 컬러 팔레트로 좌우 영역의 색상을 지정
- [인공지능이 채색을 대신 해준다?!](https://designbase.co.kr/magazine/인공지능이-채색을-대신-해준다/) - 인공지능이 일러스트의 채색을 대신 해준다면 믿으시겠나요? 미래의 상상 혹은 기대감이 아니라 이미 몇 년 전부터 가능했습니다. 인공지능이 채색을 해주는 서비스인 페탈리카 페인트를 소개합니다. 인공지능은 관련 개발 종사자 뿐만 아니라 일반인들도 알만큼 유명한 기술이죠. 거리가 멀 것이라고 생각했던 예술분야까지도 인공지능이 스며들기 시작했네요. 스케치 이미지를 업로드한 후 일러스트 작가를 선택해주면 해당 작가 스타일로 자동 채색이 됩니다.해당 서비스의
- [디자이너에게 가장 힘든 클라이언트 유형은?](https://designbase.co.kr/magazine/디자이너에게-가장-힘든-클라이언트-유형은/) - 디자인 스낵은 아주 가벼운 디자인 정보와 특정 주제를 가지고 설문을 통해 디자이너 분들의 의견을 받아 정리하는 콘텐츠입니다. 첫 스낵은 설문조사로 약간 짠맛이긴 한데.. 637명이나 되는 많은 분들이 투포에 참여해주셨습니다.👀 질문 피드백 빌런 - 퇴근 준비중인데 수정 피드백 왕창주고 내일 오전까지 보여달라는 타입언어의 마법사 - 심플하면서 화려하게 말도 안되는 요청을 아무렇지 않게 하는 타입잡스형 - 말도
- [디자인 입문자가 꼭 참고해야 할 사이트](https://designbase.co.kr/magazine/디자인-입문자가-꼭-참고해야-할-사이트/) - 디자이너라면 꼭 참고해야할 사이트를 소개해드릴게요~! 몸이 건강해지려면 비타민 같은 좋은 것을 먹어야 되죠. 디자인을 잘하려면 비타민 같은 좋은 디자인을 눈으로 먹어야 돼요. 인풋이 있어야 아웃풋이 나오는 건 세상의 이치입니다.디자인을 잘하고 싶다면 가장 먼저 해야 할 것은 ‘좋은 것’을 많이 봐야 되죠. 아래 링크들은 즐겨찾기 해두고 하루하루 디자인 참고하는 걸 즐겨보세요. Behance 비핸스에는 전 세계 유명한 디자이너,

## 디자인사전

- [힉의 법칙 (Hick's Law)](https://designbase.co.kr/dictionary/hicks-law/) - 힉의 법칙은 사용자가 선택해야 할 옵션이 많아질수록, 의사결정에 소요되는 시간이 증가한다는 원칙을 설명합니다. 이는 UI/UX 디자인에서 정보를 단순화하고, 선택지를 최소화하는 것의 중요성을 강조하는 개념입니다. 사용자가 너무 많은 옵션을 동시에 제공받으면 인지 부하(Cognitive Load)가 증가하여 혼란을 느낄 수 있으며, 결과적으로 결정을 내리는 시간이 길어지고 사용성이 저하될 수 있습니다. UX/UI에서의 활용 사례 권장 옵션 강조하여 선택지 부담
- [제이콥의 법칙 (Jakob's Law)](https://designbase.co.kr/dictionary/jakobs-law/) - 제이콥의 법칙(Jakob's Law)은 사용자들이 이미 익숙한 인터페이스 패턴을 따르는 것이 더 효과적인 사용자 경험을 제공한다는 원칙입니다. 사용자는 새로운 시스템을 학습하는 것보다 기존에 익숙한 패턴을 활용하는 디자인을 선호합니다. 이 법칙은 UX/UI 디자인에서 매우 중요한 개념이며, 사용자가 자주 사용하는 웹사이트나 애플리케이션의 인터페이스를 참고하여 일관성 있는 사용자 경험을 제공해야 한다는 점을 강조합니다. 제이콥의 법칙을 적용한 사례 1. 네비게이션
- [제스처(Gestures)](https://designbase.co.kr/dictionary/gestures/) - 제스처는 사용자가 애플리케이션과 상호작용하는 방법을 의미하며, 웹에서는 마우스와 키보드, 모바일 앱에서는 손가락을 이용한 터치 동작을 통해 실행됩니다. 사용자가 원하는 작업을 수행하는 데 직관적인 조작 방식을 제공하며, UI와 UX 디자인에서 중요한 요소로 작용합니다. 제스처의 주요 유형 제스처는 사용 환경(웹/모바일)에 따라 다르게 적용될 수 있습니다. 웹에서의 제스처 클릭(Click) 버튼이나 링크를 클릭하여 실행 마우스오버(Mouse Over) 특정 요소 위에
- [웹 접근성 (Web Accessibility)](https://designbase.co.kr/dictionary/web-accessibility/) - 웹 접근성이란 모든 사용자가 장애나 환경적 제한 없이 웹사이트나 애플리케이션에서 제공되는 정보와 서비스를 동등하게 이용할 수 있도록 보장하는 개념입니다. 이는 장애인, 고령자, 신체적 제약이 있는 사용자뿐만 아니라, 다양한 기기와 환경에서 웹을 이용하는 모든 사용자를 포함합니다. 웹 접근성은 국제 웹 표준을 준수하고, 모든 사용자가 불편 없이 웹을 사용할 수 있도록 보장하는 중요한 원칙이며, 이는 사용자 경험(UX)
- [온보딩 페이지 (Onboarding Page)](https://designbase.co.kr/dictionary/onboarding-page/) - 앱 온보딩은 사용자가 앱을 처음 실행했을 때 핵심 정보를 전달하고, 앱의 주요 기능과 가치를 소개하는 과정입니다. 온보딩 과정은 주로 슬라이드 형식의 화면을 통해 제공되며, 사용자는 건너뛰기(Skip) 버튼을 이용하여 빠르게 온보딩을 완료할 수도 있습니다. 일반적으로 사용자가 앱을 설치했다는 것은 앱에 대해 어느 정도 관심을 가지고 있다는 의미이지만, 온보딩을 효과적으로 설계하면 사용자의 첫인상을 형성하고, 앱의 핵심 기능을
- [페이지네이션(Pagination)](https://designbase.co.kr/dictionary/pagination/) - 페이지네이션은 대량의 정보를 여러 페이지로 나누어 표시하는 UI 패턴입니다. 사용자가 한 번에 많은 데이터를 보지 않고, 필요한 정보를 특정 페이지에서 쉽게 찾을 수 있도록 도와줍니다. 웹사이트에서 검색 결과, 블로그 게시물 목록, 전자상거래 제품 리스트 등 다양한 콘텐츠를 제공할 때 활용됩니다. 비슷한 기능을 하는 다른 패턴으로 무한 스크롤(Infinite Scroll)과 더 보기 버튼(Load More)이 있습니다. 페이지네이션은 사용자가
- [파비콘 (Favicon)](https://designbase.co.kr/dictionary/favicon/) - 파비콘(Favicon)은 웹사이트를 대표하는 작은 아이콘으로, 웹 브라우저의 주소 표시줄, 브라우저 탭, 북마크 목록, 검색 결과 등에 표시됩니다. 파비콘은 웹사이트의 정체성을 강화하고, 사용자가 여러 개의 열린 탭에서 특정 웹사이트를 쉽게 인식할 수 있도록 도와줍니다. 파비콘은 주로 16×16픽셀, 32×32픽셀, 48×48픽셀 등의 크기로 제공되며, .ico, .png, .svg 등의 파일 형식을 사용합니다. 파비콘 사용 예시 1. 브라우저 탭 사용자가
- [테이블(Table)](https://designbase.co.kr/dictionary/table/) - 테이블(Table)은 정보를 구조적으로 정리하여 행(Row)과 열(Column) 형태로 배치하는 UI 요소입니다. 데이터 테이블(Data Table)이라고도 하며, 정렬(Sorting), 필터링(Filtering), 비교(Comparison), 그룹화(Grouping) 등의 기능을 제공하여 정보를 직관적으로 이해할 수 있도록 돕습니다. 특히, 대량의 데이터를 효과적으로 조직하고 사용자 경험(UX)을 개선하는 데 중요한 역할을 합니다. 테이블의 주요 구성 요소 테이블 헤더(Table Header) 테이블의 가장 상단에 위치하며, 각 열(Column)의 제목을 포함합니다. 사용자가
- [텍스트필드(Text field)](https://designbase.co.kr/dictionary/text-field/) - 텍스트 필드는 사용자가 텍스트를 입력할 수 있는 UI 컴포넌트입니다. 이는 웹사이트와 애플리케이션에서 사용자와 시스템 간의 상호작용을 원활하게 만들어 주며, 폼을 통해 정보를 수집하거나 검색 쿼리를 입력받는 등의 상황에서 사용됩니다. 단순한 단어 입력부터 검색, 로그인, 메시지 작성 등 다양한 용도로 활용됩니다. 사용 예시 로그인 및 회원가입에서 사용자가 이메일과 비밀번호를 입력하는 필드로 활용됩니다. 검색 기능에서 키워드를 입력받아
- [카드(Cards)](https://designbase.co.kr/dictionary/cards/) - 카드는 정보를 시각적으로 그룹화하고 정리하는 컨테이너 요소로, 웹사이트나 애플리케이션에서 다양한 콘텐츠를 표시하는 데 사용됩니다. 일반적으로 이미지, 텍스트, 아이콘, 버튼 등 다양한 UI 요소를 포함하며, 독립적인 정보 블록을 표현하는 역할을 합니다. 카드는 사용자가 정보를 쉽게 탐색하고, 직관적으로 이해할 수 있도록 도와주는 UI 구성 요소입니다. 이는 머티리얼 디자인(Material Design)에서 처음 도입된 개념이며, 현재는 웹과 모바일 디자인에서 널리
- [액션시트 (Action Sheet)](https://designbase.co.kr/dictionary/action-sheet/) - 액션시트(Action Sheet)는 사용자가 특정 작업을 수행하기 전에 여러 개의 선택지 중 하나를 선택하도록 요청하는 UI 컴포넌트입니다. 이는 주로 모바일 환경에서 사용되며, 화면 하단에서 슬라이드업 형태로 나타나 사용자가 직관적으로 선택할 수 있도록 돕습니다. 액션시트는 iOS와 Android에서 널리 사용되는 UI 요소로, 사용자의 컨텍스트에 따라 동적인 옵션을 제공하는 것이 특징입니다. 액션시트 사용 예시 액션시트는 사용자가 앱의 특정 요소를
- [스켈레톤 UI(Skeleton UI)](https://designbase.co.kr/dictionary/skeleton-ui/) - 스켈레톤 UI는 페이지나 앱의 콘텐츠가 로드되는 동안 사용자의 경험을 개선하기 위해 표시되는 임시적인 시각적 레이아웃입니다. 콘텐츠가 로드될 때까지 빈 화면을 보여주는 대신, 실제 콘텐츠의 배치를 모방한 회색 또는 흐릿한 형태의 플레이스홀더를 표시하여 사용자가 콘텐츠가 어디에 위치할지 미리 예측할 수 있도록 돕습니다. 스켈레톤 UI는 일반적인 로딩 스피너보다 사용자의 기대치를 효과적으로 관리하고 기다림의 불편함을 줄이는 역할을 합니다.
- [스낵바(Snackbars)](https://designbase.co.kr/dictionary/snackbars/) - 스낵바(Snackbars)는 사용자에게 간단한 피드백을 제공하는 UI 컴포넌트입니다. 일반적으로 화면 하단에 일시적으로 나타났다 사라지는 메시지를 통해 앱의 상태 변화나 작업 결과를 전달하는 용도로 사용됩니다. 중요하지만 즉각적인 조치가 필요하지 않은 경우에 적합하며, 화면의 다른 요소들과 자연스럽게 조화를 이루는 것이 특징입니다. 스낵바 사용 예시 스낵바는 다양한 상황에서 활용될 수 있습니다. 다음과 같은 경우에 특히 유용합니다. 작업 완료 알림파일이
- [세그먼트 컨트롤(Segmented Control)](https://designbase.co.kr/dictionary/segmented-control/) - 세그먼트 컨트롤(Segmented Control)은 사용자가 여러 옵션 중 하나를 선택할 수 있도록 하는 UI 요소이며, 주로 모바일 애플리케이션에서 필터링, 보기 전환, 설정 변경 등의 기능을 수행하는 데 사용됩니다. 직관적인 조작 방식과 빠른 선택 기능을 제공하는 것이 특징이며, iOS에서 많이 활용되며 Android에서는 탭(Tab) 또는 필터링 요소로 제공되기도 합니다. 세그먼트 컨트롤 사용 예시 세그먼트 컨트롤은 다양한 상황에서 활용될
- [콤보 박스(Combo Box)](https://designbase.co.kr/dictionary/combo-box/) - 콤보박스(Combo Box)는 사용자가 직접 입력하거나, 미리 정의된 옵션 목록에서 선택할 수 있도록 제공하는 UI 요소입니다. 이는 드롭다운 리스트와 텍스트 입력 필드가 결합된 형태로, 사용자의 편의성을 높이고 입력 오류를 줄이는 역할을 합니다. 콤보박스는 주로 폼 입력, 검색 기능, 필터링 옵션 등에서 사용되며, 사용자가 기존 값을 선택하거나 새로운 값을 입력할 수 있도록 설계됩니다.웹 개발에서는 태그와
- [리스트(Lists)](https://designbase.co.kr/dictionary/lists/) - 리스트(Lists)는 정보를 순차적으로 나열하여 표시하는 UI 요소입니다.이는 사용자가 데이터를 쉽게 인식하고 선택할 수 있도록 정리된 형태로 제공하는 것이 목적입니다. 리스트는 텍스트, 이미지, 아이콘, 버튼 등 다양한 UI 요소를 포함할 수 있으며, 웹사이트, 모바일 앱, 대시보드, 네비게이션 메뉴 등에서 널리 사용됩니다. 리스트는 사용 목적에 따라 단순한 텍스트 목록에서부터, 복잡한 카드 형식, 인터랙티브한 리스트까지 다양한 형태로 확장될
- [런처 아이콘(launcher icon)](https://designbase.co.kr/dictionary/launcher-icon/) - 런처 아이콘(Launcher Icon)은 모바일 애플리케이션에서 앱을 대표하는 아이콘으로, 홈 화면과 앱 서랍(App Drawer)에서 사용자가 앱을 쉽게 식별하고 실행할 수 있도록 하는 UI 요소입니다.이 아이콘은 사용자의 첫인상을 결정하는 중요한 디자인 요소 중 하나이며, 앱의 브랜드 아이덴티티를 전달하는 역할을 합니다. iOS와 Android에서 각각의 디자인 가이드라인을 따르며, 다양한 크기와 해상도로 제공되어야 합니다.또한, 앱을 설치한 후 사용자가 가장 먼저
- [레이블(Label)](https://designbase.co.kr/dictionary/label/) - 레이블(Label)은 사용자 인터페이스(UI)에서 정보의 종류나 입력 필드의 목적을 설명하는 텍스트 요소로, 사용자가 UI를 쉽게 이해하고 사용할 수 있도록 돕는 역할을 합니다. 라벨이라고도 불리며, 특히 입력 필드, 체크박스, 라디오 버튼 등의 요소와 함께 사용됩니다. 레이블은 간결하면서도 직관적인 정보를 제공하여, 사용자가 어떤 정보를 입력해야 하는지 쉽게 파악할 수 있도록 합니다. 레이블 사용 예시 버튼 및 아이콘 설명:
- [드롭다운(Drop-down)](https://designbase.co.kr/dictionary/drop-down/) - 드롭다운(Dropdown)은 사용자가 선택할 수 있는 여러 옵션을 목록 형태로 표시하는 UI 컴포넌트입니다. 사용자가 드롭다운을 클릭하면, 숨겨진 옵션 목록이 펼쳐져 다양한 선택지를 제공합니다. Android에서는 드롭다운을 Menus라고 부르기도 합니다. 드롭다운 메뉴는 사용자가 입력해야 하는 선택지를 간단하고 효율적으로 제공하는 데 유용하며, UI 공간을 절약하는 역할을 합니다. 드롭다운 사용 예시 필터링 기능: 이커머스 사이트에서 가격대, 색상, 사이즈 등으로 상품을
- [데이트 피커(Date Pickers)](https://designbase.co.kr/dictionary/date-pickers/) - 데이트 피커(Date Picker)는 사용자가 날짜를 쉽게 선택하도록 돕는 UI 요소입니다. 달력 형태의 인터페이스를 통해 사용자는 특정 날짜를 선택할 수 있으며, 이를 통해 입력 오류를 줄이고 편리하게 날짜를 지정할 수 있습니다. 데이트 피커는 날짜 선택 외에도 시간 선택 기능을 추가하여, 날짜와 시간을 함께 설정할 수 있습니다. 데이트 피커 사용 예시 1. 생일 입력 사용자가 계정 생성
- [다이어로그(Dialogs)](https://designbase.co.kr/dictionary/dialogs/) - 다이어로그(Dialog)는 사용자의 주의를 집중시키거나 선택을 유도하는 UI 컴포넌트입니다. 이 컴포넌트는 앱의 주요 콘텐츠 위에 겹쳐 나타나며, 사용자가 특정 작업을 수행하기 전 선택을 확인하거나 추가 정보를 제공하는 데 활용됩니다. 다이어로그는 사용자의 주의를 집중시키는 역할을 하므로, 정보의 명확성과 사용의 필요성에 따라 신중히 사용해야 합니다. 다이어로그 사용 예시 중요 작업 확인 요청: 사용자가 데이터를 삭제하거나 설정을 변경하려 할
- [다크 모드(Dark Mode)](https://designbase.co.kr/dictionary/dark-mode/) - 다크 모드(Dark Mode)는 사용자 인터페이스의 색상 스키마를 어두운 테마로 전환하는 기능입니다. 밝은 텍스트가 어두운 배경 위에 표시되며, 야간 사용이나 어두운 환경에서 가독성을 높이고 눈의 피로를 줄이기 위한 목적으로 도입되었습니다. 다크 모드는 화면에서 발산되는 빛의 양을 줄여 저조도 환경에서 사용하기에 적합합니다. 다만, 일부 연구에서는 다크 모드가 근시를 유발할 수 있다는 가능성도 제기되어 사용자 선택에 따라 사용하는
- [네비게이션바(Navigation Bar)](https://designbase.co.kr/dictionary/navigation-bar/) - 네비게이션바(Navigation Bar)는 웹사이트나 앱에서 페이지 간 이동이나 주요 기능에 접근하기 위한 상단 인터페이스 요소입니다. 네비게이션바를 통해 사용자는 앱의 구조를 파악하고, 원하는 기능을 빠르게 사용할 수 있습니다. 웹과 모바일은 사용 환경이 다르기 때문에, 각 환경에 맞는 네비게이션 방식과 디자인을 선택하는 것이 중요합니다. 웹과 모바일에서의 네비게이션바 차이 1. 웹 네비게이션바 위치 및 스타일: 웹에서는 주로 상단 헤더에
- [구분선(Divider)](https://designbase.co.kr/dictionary/divider/) - 구분선은은 UI 디자인에서 서로 다른 요소들 사이에 가시적인 경계를 만들어 콘텐츠를 명확하게 구분하는 데 사용되는 요소입니다. 구분선은 사용자가 인터페이스를 더 쉽게 이해하고, 정보의 그룹을 인식하도록 돕는 중요한 디자인 요소입니다. 구분선의 사용 예시 메뉴 항목: 사이드바 메뉴에서 각 항목을 시각적으로 분리하여, 사용자가 각 기능을 더 쉽게 구분할 수 있도록 합니다. 리스트 항목: 긴 목록에서 개별 항목을
- [sp (Scale-independent Pixels)](https://designbase.co.kr/dictionary/sp/) - SP (Scale-independent Pixels)는 안드로이드 환경에서 텍스트 크기를 결정하는 데 사용되는 단위입니다. SP는 DP(Density-independent Pixels)와 유사하게 화면의 해상도와 밀도에 따라 크기가 조정되지만, 추가로 사용자가 설정한 글꼴 크기에 따라 동적으로 변하는 특징을 가지고 있습니다. SP 단위는 사용자 설정을 반영하여 텍스트 크기를 조절함으로써, 다양한 사용자의 요구에 맞춘 접근성 향상에 기여합니다. SP의 필요성 안드로이드 기기마다 화면 크기와 해상도가 다르며,
- [dpi, ppi](https://designbase.co.kr/dictionary/dpi-ppi/) - PPI(Pixels Per Inch)와 DPI(Dots Per Inch)는 이미지 해상도를 나타내는 단위로, 각각 디지털 디스플레이와 인쇄 출력물의 화질을 표현하는 데 사용됩니다. PPI (Pixels Per Inch) 디지털 환경에서는 주로 72 PPI가 표준 해상도로 사용되며, 이 해상도는 웹에서 일반적으로 사용되는 해상도이기도 합니다. PPI는 Pixels Per Inch의 약자로, 1인치당 몇 개의 픽셀이 들어가는지를 나타내는 단위입니다. 주로 PC, 모바일 등의 디지털
- [dp (Density Independent Pixel)](https://designbase.co.kr/dictionary/dp/) - DP(Density Independent Pixel)은 안드로이드에서 사용하는 픽셀 단위로, 다양한 화면 밀도와 해상도를 가진 디바이스에서 일관된 크기의 UI 요소를 보여주기 위해 설계된 단위입니다. DP는 디스플레이의 밀도에 독립적인 픽셀로, 화면 크기와 해상도에 상관없이 동일한 크기로 표시되도록 합니다. 안드로이드에서는 다양한 화면 크기와 밀도를 가진 디바이스들이 존재하기 때문에, 모든 기기에서 같은 UI 디자인을 유지하는 데 매우 유용한 단위입니다. DP가 필요한
- [App Bar](https://designbase.co.kr/dictionary/app-bar/) - App Bar는 안드로이드 앱의 사용자 인터페이스에서 화면 상단에 위치한 중요한 요소로, 앱 이름, 네비게이션, 주요 액션을 표시하는 역할을 합니다. App Bar는 사용자에게 현재 화면의 정보를 제공하고, 앱 내에서 쉽게 이동하거나 작업을 수행할 수 있도록 돕는 기능을 합니다. 앱의 제목과 네비게이션 아이콘, 중요한 액션 버튼을 포함하는 App Bar는 안드로이드 앱 디자인의 핵심적인 UI 구성 요소입니다. App
- [A/B 테스트 (A/B Testing)](https://designbase.co.kr/dictionary/ab-testing/) - A/B 테스트는 두 가지 이상의 웹 페이지 또는 앱 디자인 버전을 비교하여 성능 차이를 확인하는 실험적인 방법입니다. 주로 웹 개발, 마케팅, UX/UI 디자인 등에서 많이 활용되며, 사용자 행동을 기반으로 데이터를 수집하여 최적화된 결정을 내릴 수 있게 해줍니다. 간단히 말해, A/B 테스트는 ‘버전 A’와 ‘버전 B’를 실제 사용자들에게 제공하여 어떤 버전이 더 높은 성과를 내는지 측정하는
- [빈 공간 (Empty States)](https://designbase.co.kr/dictionary/빈-공간-empty-states/) - 빈 공간 또는 빈 상태는 앱 내에 특정 콘텐츠나 데이터가 없는 경우에 보여주는 화면을 의미한다. 이는 초기 사용자가 앱을 처음 사용하거나, 검색 결과가 없거나, 목록의 항목이 없는 경우 등에 주로 사용된다. 빈 공간은 사용자에게 현재 상태를 명확하게 전달하고, 가능한 다음 행동을 안내하여 사용자의 혼란을 최소화하는데 도움을 준다. 사용 예시 빈 공간은 사용자가 앱을 처음 사용할
- [API(Application Programming Interface)](https://designbase.co.kr/dictionary/apiapplication-programming-interface/) - API(Application Programming Interface, 애플리케이션 프로그래밍 인터페이스)는 소프트웨어나 애플리케이션 간의 데이터를 주고받을 수 있도록 하는 규칙과 방법을 정의한 인터페이스입니다. 쉽게 말해, API는 서로 다른 프로그램이 정보를 주고받고, 기능을 사용할 수 있도록 연결하는 다리 역할을 합니다. 예를 들어, 날씨 앱이 기상청의 API를 사용하여 최신 날씨 정보를 가져오거나, 결제 서비스가 API를 통해 신용카드 결제를 처리하는 방식이 이에 해당합니다.
- [Design Token](https://designbase.co.kr/dictionary/design-token/) - Design Token이란? Design Token(디자인 토큰)은 색상, 타이포그래피, 간격, 그림자, 테두리 반경 등의 스타일 속성을 변수처럼 정의하여 디자인과 코드에서 일관되게 사용할 수 있도록 만든 단위입니다. “Primary Color = #007AFF” 같은 값을 이름 있는 구조로 정리하고, 이를 디자인 도구(Figma 등)와 개발 코드(CSS, iOS, Android 등)에서 공유합니다. 디자인 토큰 구조: Global → Alias → Component-Specific 디자인 토큰은 단순한
- [다국어 지원 (Localization)](https://designbase.co.kr/dictionary/localization/) - 다국어 지원이란? 다국어 지원(Multilingual Support)은 애플리케이션, 웹사이트, 디지털 제품에서 여러 언어로 콘텐츠를 제공하고, 언어별 사용자 경험을 최적화하는 것을 말합니다.여기에는 단순한 텍스트 번역뿐 아니라, 날짜/시간/통화 형식, 방향성(LTR/RTL), 이미지, UI 흐름까지 포함됩니다. Localization(로컬라이제이션): 특정 지역과 언어에 맞게 콘텐츠를 맞춤화하는 작업 Internationalization(i18n, 국제화): 다국어 및 지역화가 가능하도록 시스템을 설계하는 작업 Localization은 실제 번역과 현지 적용을 의미하고, Internationalization은 그
- [LTR / RTL](https://designbase.co.kr/dictionary/ltr-rtl/) - LTR, RTL이란? LTR(Left-To-Right)과 RTL(Right-To-Left)은 텍스트의 읽기 방향(Writing Direction)을 의미합니다.이는 언어 및 문화권에 따라 결정되며, UI 디자인과 개발에서 다국어 지원(Localization, 국제화 i18n) 시 반드시 고려해야 할 요소입니다. LTR (왼쪽 → 오른쪽): 영어, 한국어, 프랑스어 등 대부분의 언어 RTL (오른쪽 → 왼쪽): 아랍어, 히브리어, 페르시아어 등 왜 LTR/RTL 설정이 중요한가? 글만 번역하는 것으로는 충분하지 않습니다.버튼 위치, 정렬
- [UTM 태그](https://designbase.co.kr/dictionary/utm-tag/) - UTM 태그란? UTM 태그(UTM Parameters, Urchin Tracking Module)는 웹사이트에 유입되는 트래픽의 출처를 정확히 파악하기 위해 URL에 추가하는 추적 코드입니다. 구글 애널리틱스(Google Analytics)나 기타 웹 분석 도구와 연동하여, 사용자가 어디서 어떻게 해당 링크를 클릭했는지를 추적할 수 있게 도와줍니다. UTM 태그 적용 예시 https://designbase.co.kr/?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale 위 URL에는 3개의 UTM 태그가 포함되어 있으며, 이 링크를 클릭한 사용자가 이메일 뉴스레터를
- [피츠의 법칙(Fitts's Law)](https://designbase.co.kr/dictionary/fittss-law/) - 피츠의 법칙은 인간의 운동능력과 움직임을 설명하는 심리학적인 원리로, 움직이는 대상의 크기와 거리가 움직임의 정확성과 속도에 영향을 미치는 관계를 제시합니다. 이 법칙은 웹 디자인, 사용자 인터페이스(UI) 디자인, 인간-컴퓨터 상호작용 등 다양한 분야에서 활용되며, 사용자 경험과 인터랙션 디자인을 개선하는 데에 중요한 원칙으로 사용됩니다.UI 디자인에서 버튼, 링크, 메뉴 등의 대상의 크기와 배치를 결정하는 데에 활용됩니다. 크기가 크고 거리가
- [플로우차트 (Flowchart)](https://designbase.co.kr/dictionary/flowchart/) - 플로우차트는 사용자의 행동 흐름을 시각적으로 표현하는 다이어그램으로, UX/UI 디자인에서 사용자 여정(User Flow)을 설계하는 데 중요한 역할을 합니다. 이는 사용자가 특정 목표를 달성하기 위해 어떤 단계를 거치는지 명확하게 파악하고, 논리적인 인터랙션 설계를 가능하게 합니다. UX/UI에서의 플로우차트 활용 사용자 흐름(User Flow) 설계 웹사이트 또는 애플리케이션에서 사용자가 목표를 달성하기까지의 경로를 시각적으로 정리합니다. 예: 사용자가 로그인 > 상품 검색
- [폰 레스토프 효과(Von Restorff Effect)](https://designbase.co.kr/dictionary/von-restorff-effect/) - 폰 레스토프 효과는 동일한 요소들 중에서 눈에 띄는 요소가 기억에 더 오래 남는 현상을 말합니다. 이 효과는 사용자 경험 디자인과 인터페이스 디자인 관점에서 중요한 원리로 적용됩니다. "비슷한 사물 여러개 있으면 그중에서 가장 차이가 나는 한개만 기억할 가능성이 높다." 폰 레스토프 효과는 일반적인 패턴과는 다른 독특한 요소가 있는 경우, 그 요소가 사용자의 주의를 끌고 기억에 오래
- [포스텔의 법칙(Postel's Law)](https://designbase.co.kr/dictionary/postels-law/) - 포스텔의 법칙은 "받을 때는 관대하게, 보낼 때는 엄격하게"라는 원칙을 기반으로 한 사용자 경험(UX) 설계 원칙 중 하나입니다. 이는 사용자 입력을 최대한 수용하면서도, 시스템이 제공하는 출력(정보, 피드백 등)은 일관되고 명확해야 한다는 의미를 가집니다. 이 법칙은 특히 UX/UI 디자인에서 오류 허용성, 자동 완성, 데이터 검증(벨리데이션) 등 사용자 친화적인 인터페이스를 설계하는 데 중요한 역할을 합니다. 포스텔의 법칙은 네트워크
- [페르소나(Persona)](https://designbase.co.kr/dictionary/persona/) - 페르소나(Persona)은 특정 사용자 그룹을 대표하는 가상의 인물을 나타내는 개념입니다. 페르소나는 사용자 연구와 사용자 중심 디자인(User-Centered Design) 접근법에서 활용되며, 디자인 과정에서 사용자의 필요와 요구를 이해하고 고려하기 위해 사용됩니다. 구성 요소 이름과 신원: 페르소나는 가상의 사용자로서 이름, 나이, 성별, 직업 등과 같은 신원 정보를 갖습니다. 인구 통계: 페르소나는 대상 사용자 그룹의 특징을 반영하기 위해 인구 통계 데이터를
- [테슬러의 법칙(Tesler's Law)](https://designbase.co.kr/dictionary/teslers-law/) - 테슬러의 법칙은 "사용자는 항상 적어도 하나 이상의 작업을 수행하기 위해 필요한 기능을 기대한다"는 원칙을 나타내는 개념입니다. 이 법칙은 사용자 경험 디자인과 인터페이스 디자인 관점에서 중요한 원리로 적용됩니다. 또한, 모든 프로세스에는 디자인으로 처리할 수 없는 일정량의 복잡성이 존재하며, 이러한 복잡성은 시스템이나 사용자 중 한쪽이 감당해야 한다는 점을 염두에 두어야 합니다. 래리 테슬러(Larry Tesler)는 사용자가 디지털 제품을
- [컨버전스 (Convergence)](https://designbase.co.kr/dictionary/convergence/) - 컨버전스는 서로 다른 기술, 제품, 서비스 또는 시장이 통합되거나 합쳐지는 현상을 의미합니다. 이는 종종 신규 기술의 발전이나 새로운 사용자 요구의 충족을 통해 발생합니다. 이는 다양한 산업에서 나타나며, 특히 디지털 기술, 통신 및 미디어 산업에서 흔히 볼 수 있습니다. 컨버전스는 전통적으로 분리된 기능을 한 장치에서 제공하거나, 다양한 플랫폼이나 서비스가 상호 호환 가능하도록 하는 등 다양한 형태로
- [정보구조 (Information Architecture)](https://designbase.co.kr/dictionary/information-architecture/) - 정보구조는 웹사이트, 앱 또는 소프트웨어 내의 정보를 체계적으로 조직하고 구조화하는 방식을 의미합니다. 이를 통해 사용자는 원하는 정보를 빠르게 찾을 수 있으며, 효율적인 네비게이션이 가능해집니다. 정보구조는 사용자 경험(UX)의 핵심 요소 중 하나로, 사용자의 탐색 경험을 향상시키고 콘텐츠의 접근성을 높이는 역할을 합니다. 웹사이트, 애플리케이션, 디지털 플랫폼에서는 정보구조를 효과적으로 설계해야 사용자가 혼란 없이 원하는 목적을 달성할 수 있습니다.
- [인지심리학 (Cognitive Psychology)](https://designbase.co.kr/dictionary/cognitive-psychology/) - 인지심리학은 인간이 정보를 인지하고 처리하는 방식을 연구하는 심리학의 한 분야입니다. 사람의 지각, 기억, 학습, 문제 해결, 언어 사용, 의사 결정 등의 과정이 어떻게 이루어지는지를 연구하며, 인간의 정신을 정보 처리 시스템으로 이해하려는 접근 방식을 따릅니다. 이는 컴퓨터가 정보를 입력받아 처리하고 출력하는 방식과 유사하게, 인간의 뇌가 정보를 인지하고 해석하며 반응하는 과정을 설명하는 데 초점을 둡니다. 이러한 연구는
- [유니버설 디자인 (Universal Design)](https://designbase.co.kr/dictionary/universal-design/) - 유니버설 디자인은 모든 사용자가 나이, 성별, 신체 능력, 문화적 배경 등에 관계없이 제품과 환경을 공평하게 접근하고 이해하며 사용할 수 있도록 설계하는 디자인 접근 방식입니다. 이는 특정 사용자 그룹이 아닌, 가능한 많은 사람들이 불편 없이 이용할 수 있도록 하는 것이 핵심 목표입니다. 웹사이트, 모바일 애플리케이션, 건축물, 제품 디자인 등 다양한 분야에서 적용되며, 장애를 가진 사람뿐만 아니라
- [엣지 케이스(Edge case)](https://designbase.co.kr/dictionary/edge-case/) - 엣지케이스는 소프트웨어나 시스템에서 예상치 못한 상황이나 특정 조건에 따라 동작이나 결과가 변하는 경우를 의미합니다. 일반적인 시나리오와는 다르게 발생하는 특이한 상황을 포함하며, 시스템의 안정성과 사용자 경험(UX)에 영향을 미칠 수 있습니다. 엣지케이스를 고려하는 것은 소프트웨어의 견고함을 유지하고, 사용자 경험을 개선하는 데 필수적입니다. UX/UI 디자이너와 개발자는 예상 가능한 다양한 엣지케이스를 사전에 정의하고, 이를 해결할 수 있는 유연한 디자인과
- [어포던스 (Affordance)](https://designbase.co.kr/dictionary/affordance/) - 어포던스는 디자인 요소가 사용자에게 제공하는 행동 가능성을 의미하는 개념입니다. 이는 사용자가 제품 또는 인터페이스를 어떻게 사용할 것인지 직관적으로 이해할 수 있도록 돕는 핵심적인 원리입니다. 어포던스(Affordance)라는 용어는 심리학자 제임스 깁슨(James J. Gibson)이 처음 제안했으며, 이후 UX/UI 디자인에서도 중요한 개념으로 자리 잡았습니다. 디자인에서 어포던스는 사용자가 특정 요소를 보고 자연스럽게 어떤 동작을 할 수 있는지 유추할 수 있도록
- [앤드유저 (End User)](https://designbase.co.kr/dictionary/end-user/) - 앤드유저는 특정 제품, 서비스, 시스템 또는 디자인의 최종 사용자를 의미합니다.이는 제품을 개발하고 유지하는 사람들(개발자, 디자이너, 관리자 등)과 대비되는 개념으로, 최종적으로 제품을 소비하고 사용하는 사람을 가리킵니다. 앤드유저는 기술적 지식이 부족할 수도 있으며, 제품이나 서비스의 내부 작동 방식에 대해 알 필요 없이 자신의 문제를 해결하거나 특정 목표를 달성하는 데 집중합니다. 앤드유저의 개념 앤드유저는 단순히 제품을 사용하는 사람을
- [심미적 사용성 효과(Aesthetic-Usability Effect)](https://designbase.co.kr/dictionary/aesthetic-usability-effect/) - 심미적 사용성 효과는 디자인 요소의 시각적인 매력이 사용자의 인식과 경험에 어떤 영향을 미치는지를 나타내는 개념입니다. 이 효과는 사용자 경험 디자인과 인터페이스 디자인 관점에서 중요한 원리로 적용됩니다. "심미성이 좋은 디자인은 사용성이 더 뛰어난 디자인으로 인식한다." 심미적 사용성 효과는 사용자 경험과 인터페이스 디자인 간의 상호작용에 초점을 둡니다. 디자인의 시각적인 매력이 사용자의 인식, 인식의 품질, 사용성 평가 등에
- [스크린 리더 (Screen Reader)](https://designbase.co.kr/dictionary/screen-reader/) - 스크린 리더는 시각 장애인 또는 저시력자들이 컴퓨터나 모바일 기기를 사용할 수 있도록 도와주는 소프트웨어입니다. 스크린 리더는 컴퓨터 화면에 표시된 텍스트나 이미지를 오디오 출력으로 변환하여 사용자에게 정보를 제공합니다. 스크린 리더는 웹사이트, 이메일, 앱, 문서 등의 콘텐츠를 읽어주며, 사용자가 컴퓨터나 스마트폰의 기능을 사용할 수 있도록 돕습니다. 또한, 사용자가 키보드나 점자 표시기를 이용해 컴퓨터를 조작하는 것을 지원합니다. 사용
- [사용자 여정 지도 (User Journey Map)](https://designbase.co.kr/dictionary/user-journey-map/) - 사용자 여정 지도는 사용자가 제품이나 서비스를 이용하는 전체 과정과 경험을 시각적으로 표현한 도구입니다. 이를 통해 사용자의 감정, 행동, 기대, 문제점을 분석하여 서비스 개선의 기회를 발견할 수 있습니다. 특히 UX/UI 디자이너와 개발자가 사용자 중심의 디자인을 구축하는 데 중요한 역할을 합니다. 사용자 여정 지도의 개념 사용자 여정 지도는 단순한 화면 흐름도가 아니라 사용자의 심리적, 감정적 변화까지 포함한
- [밀러의 법칙(Miller's Law)](https://designbase.co.kr/dictionary/millers-law/) - 밀러의 법칙은 인간이 단기적으로 기억하고 처리할 수 있는 정보의 양에 대한 심리학적 원리로, **"매직 넘버 7±2"**라는 개념으로도 알려져 있습니다. 1956년 조지 A. 밀러(George A. Miller)가 제안한 이 법칙은 일반적으로 인간이 한 번에 기억하고 조작할 수 있는 정보의 개수가 5~9개 사이(평균 7개)임을 설명합니다. 밀러의 법칙이 강조하는 핵심은 단순히 7이라는 숫자가 아니라, 정보를 어떻게 구성하느냐에 있습니다. 즉,
- [레거시 (Legacy)](https://designbase.co.kr/dictionary/legacy/) - 레거시는 기술, 소프트웨어, 시스템 등이 오래되어 새로운 버전이나 표준으로 대체될 필요가 있지만, 여전히 사용되고 있는 상태를 의미합니다. 레거시 시스템은 기존의 업무 환경이나 기술 인프라에서 중요한 역할을 수행하고 있음에도 불구하고, 유지보수가 어렵고 새로운 기술과의 호환성이 낮으며, 성능이나 보안상의 문제가 발생할 수 있는 특징을 가집니다. UX/UI 디자이너의 입장에서 레거시 시스템은 특히 중요한 고려사항이 될 수 있습니다. 레거시
- [헤더(Header)](https://designbase.co.kr/dictionary/header/) - 헤더는 웹사이트나 애플리케이션의 상단에 위치하는 UI 요소로, 로고, 내비게이션, 액션 버튼(CTA) 등을 포함하는 핵심 영역입니다. 사용자가 사이트를 탐색하는 데 중요한 역할을 하며, 브랜드 아이덴티티를 강화하고 주요 기능에 쉽게 접근할 수 있도록 설계됩니다. 헤더의 주요 역할 내비게이션 기능 제공 헤더는 웹사이트의 주요 메뉴 및 링크를 포함하여 사용자가 원하는 페이지로 쉽게 이동할 수 있도록 도와줍니다. 일반적으로 홈,
- [햅틱 디자인 (Haptic Design)](https://designbase.co.kr/dictionary/haptic-design/) - 햅틱 디자인은 사용자의 행동에 대해 촉각적인 피드백을 제공하는 UX/UI 요소입니다. 주로 진동, 힘, 모션을 활용하여 사용자가 버튼을 클릭했거나 특정 작업이 완료되었음을 직관적으로 느낄 수 있도록 하는 기술입니다. 시각적, 청각적 피드백과 함께 활용되며, 특히 모바일 환경에서 사용자 경험을 더욱 풍부하게 만드는 역할을 합니다. 스마트폰, 웨어러블 기기, 게임 컨트롤러 등 다양한 디지털 인터페이스에서 적용되며, 사용자가 화면을 보지
- [사운드 디자인 (Sound Design)](https://designbase.co.kr/dictionary/sound-design/) - 사운드 디자인은 디지털 제품에서 사용자의 행동에 대한 피드백을 제공하거나 감성적인 경험을 향상시키기 위해 사용되는 오디오 요소를 설계하는 과정입니다. 이는 사용자 인터페이스(UI)에서 버튼 클릭, 알림, 오류 메시지, 피드백 효과 등을 음향으로 표현하는 데 활용되며, UX를 보다 직관적이고 몰입감 있게 만드는 중요한 요소입니다. 사용 예시 UI 피드백 효과음 버튼 클릭, 메뉴 전환, 스크롤 종료 시 작은 소리를
- [햄버거 메뉴 (Hamburger Menu)](https://designbase.co.kr/dictionary/hamburger-menu/) - 햄버거 메뉴는 세 개의 수평선으로 구성된 아이콘으로, 웹사이트나 모바일 애플리케이션에서 탐색 메뉴를 축소된 형태로 제공하는 UI 요소입니다. 사용자가 햄버거 메뉴 아이콘을 클릭하거나 터치하면, 탐색 옵션이 드롭다운 또는 사이드 메뉴 형태로 표시됩니다. 반응형 웹 디자인에서 주로 사용되며, 화면이 좁은 모바일 환경에서 공간을 절약하는 역할을 합니다. Android에서는 Drawer 메뉴, iOS에서는 사이드바라고도 불리며, iOS에서는 iPadOS가 아닌 경우 사이드바
- [해상도](https://designbase.co.kr/dictionary/resolution/) - 해상도는 디지털 디스플레이나 이미지에서 표현되는 화질의 정밀도를 나타내는 개념입니다. 일반적으로 가로와 세로 픽셀 수의 조합으로 표현되며, 해상도가 높을수록 화면이 더 선명하게 보입니다. 하지만, 해상도가 높아질수록 데이터의 크기와 성능 부담도 증가하게 됩니다. 해상도의 개념 해상도는 픽셀(pixel) 단위로 측정됩니다. 예를 들어, 1920×1080 해상도는 가로 1920픽셀, 세로 1080픽셀로 이루어진 화면을 의미합니다. 동일한 크기의 디스플레이에서도 픽셀 밀도(PPI)가 높아지면 더
- [픽셀(Pixel)](https://designbase.co.kr/dictionary/pixel/) - 픽셀은 디지털 이미지에서 가장 작은 단위로, 그래픽 디스플레이에서 색상을 표현하는 최소한의 요소입니다. 웹 및 앱 디자인에서 픽셀은 화면의 요소 크기를 정의하는 기본 단위로 사용되며, 해상도를 결정하는 중요한 요소이기도 합니다. 디지털 화면에서 모든 시각적 요소는 픽셀로 구성되므로, UI/UX 디자인을 할 때 픽셀의 개념을 이해하는 것이 중요합니다. 사용 예시 웹사이트나 앱에서 특정 요소의 크기를 결정할 때, 디자이너들은
- [프로토타이핑 (Prototyping)](https://designbase.co.kr/dictionary/prototyping/) - 프로토타이핑은 제품이나 서비스의 초기 버전을 만들어 내는 과정입니다. 이는 디자인팀이 실제 제품과 유사한 환경에서 디자인을 테스트하고, 사용자 피드백을 수집하며, 이를 바탕으로 제품을 개선할 수 있게 해줍니다. 프로토타입은 단순히 제품의 외관을 보여주는 것이 아닌, 제품이 실제로 어떻게 동작할지를 보여줍니다. 이를 통해 디자이너, 개발자, 스테이크홀더, 그리고 사용자들이 제품에 대한 더 깊은 이해를 할 수 있게 됩니다. Lo-fi
- [프로그래스바 (Progress Bar)](https://designbase.co.kr/dictionary/progress-bar/) - 프로그래스바는 작업의 진행 상황을 시각적으로 표시하는 UI 요소입니다. 사용자가 작업이 완료되기까지의 예상 시간을 파악할 수 있도록 돕고, 기다리는 동안 애플리케이션이 정상적으로 작동 중임을 알려줍니다. 이는 사용자 경험을 향상시키는 중요한 요소 중 하나로, 작업이 진행 중임을 명확하게 보여줌으로써 사용자의 불안감을 줄이는 역할을 합니다. 사용 예시 프로그래스바는 파일 업로드, 다운로드, 앱 설치, 느린 네트워크 연결에서 페이지 로딩
- [푸터(Footer)](https://designbase.co.kr/dictionary/footer/) - 푸터는 웹사이트나 애플리케이션의 하단 영역에 위치하는 UI 요소입니다. 사이트 내 다양한 정보를 제공하며, 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다. 브랜드 아이덴티티를 강화하고, 법적 필수 사항을 안내하며, 사이트 탐색을 보조하는 역할을 합니다. 웹사이트의 성격에 따라 푸터의 복잡성은 달라질 수 있습니다. 간단한 개인 웹사이트나 블로그에서는 최소한의 정보만 포함할 수 있지만, 기업 웹사이트나 전자상거래 플랫폼에서는 더
- [트랜지션(Transition)](https://designbase.co.kr/dictionary/transition/) - 트랜지션(Transition)은 웹사이트나 애플리케이션에서 페이지 간 이동 또는 UI 요소의 상태 변화를 부드럽게 연결하는 애니메이션 효과를 의미합니다. 이를 통해 사용자는 화면 전환이 자연스럽게 이루어짐을 인식하고, 인터페이스의 구조적 연계성을 쉽게 이해할 수 있습니다. 트랜지션은 단순한 시각적 효과가 아니라, 사용자 경험(UX)을 향상시키고 콘텐츠 간의 흐름을 직관적으로 전달하는 중요한 요소입니다. 트랜지션의 주요 요소 1. 이동 방식 트랜지션은 화면 내에서
- [툴팁(Tooltip)](https://designbase.co.kr/dictionary/tooltip/) - 툴팁(Tooltip)은 웹사이트나 애플리케이션에서 특정 요소 위에 마우스를 올릴 때 나타나는 작은 정보 박스로, 사용자에게 추가적인 설명이나 가이드라인을 제공하는 UI 요소입니다. 이는 인터페이스의 가독성을 유지하면서도, 필요한 정보를 사용자가 즉각적으로 확인할 수 있도록 도와줍니다. 툴팁은 아이콘, 버튼, 입력 필드, 링크 등의 요소에 적용될 수 있으며, 일반적으로 짧고 간결한 정보를 제공하는 데 사용됩니다. 툴팁 사용 예시 1. 아이콘
- [탭바(Tab Bar)](https://designbase.co.kr/dictionary/tab-bar/) - 탭바(Tab Bar)는 iOS의 주요 내비게이션 요소 중 하나로, 사용자가 앱 내의 주요 화면이나 기능 간에 쉽게 전환할 수 있도록 돕는 하단 바입니다. 주로 앱의 핵심 기능이 포함되며, 직관적인 아이콘과 텍스트 레이블을 통해 사용자 경험을 향상시킵니다. 탭바는 화면 하단에 고정되어 있으며, 한 번의 탭으로 원하는 화면으로 이동할 수 있어 탐색 흐름이 단순해집니다. 일반적으로 2개에서 5개의 탭
- [타이포그래피(Typography)](https://designbase.co.kr/dictionary/typography/) - 타이포그래피(Typography)는 단순히 글꼴(폰트)만을 의미하는 것이 아니라, 글자의 크기, 두께, 자간(글자 간격), 행간(줄 간격) 등을 조절하여 정보의 위계를 시각적으로 표현하는 디자인 개념입니다.UI/UX 디자인에서는 텍스트를 통해 사용자 경험을 향상시키기 위해 타이포그래피를 효과적으로 활용해야 합니다. 특히 웹과 모바일 환경에서는 화면 크기, 해상도, 사용자와의 거리 등이 다르기 때문에 타이포그래피 설정이 달라질 수 있습니다. 적절한 타이포그래피를 사용하면 가독성을 높이고, 사용자
- [콘택트 폼(Contact Form)](https://designbase.co.kr/dictionary/contact-form/) - 콘택트 폼(Contact Form)은 웹사이트나 애플리케이션에서 사용자가 특정 대상(관리자, 고객 서비스, 영업팀 등)에게 메시지를 보낼 수 있도록 제공하는 폼 UI입니다.이는 고객 문의, 지원 요청, 피드백 제출, 비즈니스 문의 등 다양한 목적으로 활용되며, 웹사이트 방문자와 운영자 간의 원활한 커뮤니케이션을 지원합니다. 단순한 이메일 주소 공개 방식과 비교했을 때, 스팸 방지 기능 및 사용자 경험 개선 등의 장점이 있어
- [컬러 시스템(Color System)](https://designbase.co.kr/dictionary/colorsystem/) - 컬러 시스템은 브랜드의 아이덴티티를 반영하고 UI의 일관성을 유지하기 위해 조직적으로 정의된 색상 테마를 의미합니다. 이는 사용자의 시각적 경험을 향상시키고, 인터페이스 내에서 정보의 우선순위를 명확하게 전달하는 중요한 디자인 요소입니다.컬러 시스템은 단순한 색상의 선택이 아니라 접근성과 가독성을 고려한 색상 배색, 브랜드 가이드라인, UI 요소 간의 일관성을 유지하기 위한 전략적 접근을 포함합니다. 컬러 시스템의 역할 1. 브랜드 아이덴티티
- [캐로셀 (Carousel)](https://designbase.co.kr/dictionary/carousel/) - 캐로셀(Carousel)은 여러 개의 콘텐츠를 한 영역에서 슬라이드 형태로 순환하며 보여주는 UI 패턴입니다.이름에서 알 수 있듯이 회전목마처럼 콘텐츠가 일정한 방향으로 반복적으로 이동하며, 사용자는 수동 또는 자동으로 콘텐츠를 탐색할 수 있습니다. 웹사이트나 모바일 애플리케이션에서 이미지 갤러리, 추천 상품, 뉴스 헤드라인, 프로모션 배너 등 다양한 콘텐츠를 효과적으로 표시하는 데 사용됩니다. 캐로셀의 특징 한정된 공간 내에서 여러 개의 콘텐츠
- [칩(Chips)](https://designbase.co.kr/dictionary/chips/) - 칩(Chips)은 사용자가 입력하거나 선택한 항목을 작고 간결한 형태로 표시하는 UI 요소입니다. 이는 버튼, 태그, 필터, 입력값 등의 역할을 하며, 사용자의 인터랙션을 단순화하고 화면을 보다 직관적으로 구성하는 데 유용합니다. 칩은 일반적으로 필터링(Filter Chips), 선택(Choice Chips), 입력(Input Chips), 액션(Action Chips)의 네 가지 유형으로 나뉩니다.머티리얼 디자인(Material Design)에서 처음 도입된 개념이며, 안드로이드 및 웹 애플리케이션에서 자주 사용됩니다. 칩의 주요
- [차트(Chart)](https://designbase.co.kr/dictionary/chart/) - 차트(Charts)는 데이터를 시각적으로 표현하는 도구로, 사용자가 데이터를 보다 직관적으로 이해하고 해석할 수 있도록 도와줍니다. 차트는 데이터의 특성과 전달하고자 하는 메시지에 따라 다양한 형태로 제공되며, 비교, 트렌드 분석, 분포, 비율 등의 데이터를 효과적으로 전달하는 역할을 합니다. 차트의 주요 유형 및 활용 차트는 목적에 따라 적절한 유형을 선택해야 하며, 각 차트는 특정 데이터 표현에 적합한 특징을 가집니다.
- [적응형 웹(Adaptive Web)](https://designbase.co.kr/dictionary/adaptive-web/) - 적응형 웹(Adaptive Web Design)은 다양한 디바이스의 화면 크기와 해상도에 따라 미리 정의된 레이아웃을 각각 제공하는 웹 디자인 접근 방식입니다. 이는 특정 화면 크기에 맞춰 개별적인 디자인과 스타일을 적용하는 방식으로, 반응형 웹(Responsive Web Design)과는 차이가 있습니다. 적응형 웹은 웹사이트를 사용자의 디바이스 환경에 맞게 최적화하여, 보다 세밀한 제어와 맞춤형 사용자 경험(UX)을 제공하는 것이 특징입니다. 적응형 웹 vs
- [인터렉션(Interaction)](https://designbase.co.kr/dictionary/interaction/) - 인터랙션이란 사용자가 특정 행동을 했을 때 시스템이 반응하는 것을 의미하며, UI/UX 디자인에서 중요한 요소 중 하나입니다.사용자가 버튼을 클릭하거나, 화면을 스크롤하거나, 특정 요소를 터치할 때 적절한 피드백을 제공함으로써 원활한 사용자 경험을 제공할 수 있습니다.인터랙션은 크게 제스처(Gesture), 셀렉션(Selection), 상태(States) 세 가지로 구분됩니다. 1. 제스처(Gesture) 제스처는 사용자가 특정 입력 장치를 활용하여 시스템과 상호작용하는 방법을 의미합니다.웹과 앱 환경에서 사용되는
- [오프라인 상태 (Offline States)](https://designbase.co.kr/dictionary/offline-states/) - 오프라인 상태는 인터넷 연결이 불안정하거나 완전히 끊겼을 때 웹사이트나 애플리케이션이 어떻게 동작하는지를 나타내는 개념이다.현대의 많은 서비스는 인터넷 연결을 기반으로 작동하지만, 사용자가 네트워크에 접속할 수 없는 경우에도 일부 기능을 사용할 수 있도록 설계하는 것이 중요하다. 오프라인 상태에서는 사용자가 현재의 연결 상태를 쉽게 인식할 수 있어야 하며, 가능한 작업과 제한 사항을 명확하게 전달하는 것이 필요하다. 사용 예시
- [아이코노그래피(Iconography)](https://designbase.co.kr/dictionary/iconography/) - 아이코노그래피(Iconography)는 시각적 기호를 활용하여 정보를 전달하는 디자인 기법을 의미합니다. 이는 UI/UX 디자인에서 아이콘(icon)을 설계하고 사용하는 원칙을 포함하며, 사용자에게 직관적으로 의미를 전달하는 데 중요한 역할을 합니다. 아이콘은 작은 크기의 그래픽 요소이지만, 올바르게 설계되지 않으면 사용자가 혼란을 겪을 수 있습니다. 따라서 기호학적 접근을 바탕으로 직관적이고 명확한 정보 전달이 가능한 디자인을 우선해야 합니다. 아이콘(Icon)이란? 아이콘은 텍스트 없이도 의미를
- [슬라이더(Slider)](https://designbase.co.kr/dictionary/slider/) - 슬라이더(Slider)는 사용자가 특정 범위 내에서 값을 조절하거나 선택할 수 있도록 하는 UI 컴포넌트입니다. 일반적으로 수평(가로) 또는 수직(세로) 바 형태를 가지며, 사용자는 마우스나 터치로 핸들을 움직여 원하는 값을 설정할 수 있습니다.웹에서는 요소로 구현되며, 음량 조절, 가격 범위 선택, 이미지 크기 조절, 밝기 조정 등 다양한 환경에서 활용됩니다. 슬라이더 사용 예시 1. 오디오 및 비디오
- [스티키(Sticky)](https://designbase.co.kr/dictionary/sticky/) - 스티키(Sticky)란 웹사이트나 애플리케이션에서 특정 UI 요소가 사용자가 스크롤을 내리거나 올려도 화면의 특정 위치에 고정되어 유지되는 방식을 의미합니다. 이를 통해 사용자 경험을 개선하고 중요한 정보를 항상 노출할 수 있도록 합니다. 스티키 요소는 주로 내비게이션 바, CTA(Call to Action) 버튼, 광고 배너, 검색 바 등에 사용됩니다. 일반적인 고정(Fixed) 요소와 달리, 스티키는 특정 지점까지 스크롤되면 고정되며, 다시 특정
- [스타일 가이드(Style guide)](https://designbase.co.kr/dictionary/styleguide/) - 스타일 가이드는 디자인 및 개발 팀이 일관된 비주얼 아이덴티티를 유지하고, 사용자의 경험을 향상시키기 위해 정의한 UI 및 UX 디자인 규칙을 문서화한 자료입니다. 이는 브랜드 아이덴티티를 강화하고, 제품 간의 디자인 일관성을 유지하며, 협업을 원활하게 만드는 역할을 합니다. 스타일 가이드는 색상, 타이포그래피, 버튼 스타일, 아이콘, 간격, 네비게이션 방식, 애니메이션 효과 등 UI 디자인의 다양한 요소를 포함합니다. 특히,
- [브레드 크럼(Breadcrumbs)](https://designbase.co.kr/dictionary/breadcrumbs/) - 브레드 크럼(Breadcrumb)은 웹사이트나 애플리케이션에서 사용자의 현재 위치를 시각적으로 나타내는 탐색(Navigation) 요소입니다.이는 사용자가 웹사이트 내에서 이동한 경로를 직관적으로 파악할 수 있도록 도와주는 기능을 하며, 특히 계층 구조가 깊은 웹사이트나 대규모 콘텐츠를 다루는 서비스에서 유용하게 사용됩니다. 브레드 크럼이라는 용어는 "헨젤과 그레텔" 동화에서 아이들이 길을 찾기 위해 빵 부스러기를 떨어뜨린 것에서 유래되었습니다.사용자는 브레드 크럼을 통해 자신이 현재 위치한
- [반응형 웹 (Responsive Web)](https://designbase.co.kr/dictionary/responsive-web/) - 반응형 웹(Responsive Web)은 웹사이트가 사용자의 디바이스(PC, 태블릿, 스마트폰 등)에 따라 자동으로 화면 크기, 콘텐츠 배치, 인터페이스 요소가 조정되는 웹 디자인 기법을 의미합니다.CSS의 미디어 쿼리(Media Query)를 활용하여 다양한 해상도에 적응하도록 설계되며, 하나의 코드베이스로 모든 기기에 최적화된 사용자 경험(UX)을 제공하는 것이 목표입니다. 과거에는 데스크톱, 모바일, 태블릿별로 별도의 웹사이트를 제작하는 "적응형 웹(Adaptive Web)" 방식을 사용했지만,반응형 웹은 하나의 웹사이트로
- [모바일 퍼스트(Mobile First)](https://designbase.co.kr/dictionary/mobile-first/) - 모바일 퍼스트(Mobile First)란 웹사이트나 애플리케이션을 설계할 때 모바일 환경을 우선적으로 고려한 후, 태블릿과 데스크톱 환경으로 확장하는 디자인 접근법입니다.이는 스마트폰과 태블릿 사용이 증가하면서 모바일 기기가 인터넷 사용의 주요 플랫폼이 된 현실을 반영하는 개념입니다. 과거에는 데스크톱 디자인을 먼저 만들고 모바일에 맞게 축소하는 방식(Desktop First Approach)이 일반적이었지만, 모바일 퍼스트 접근법은 작은 화면에서의 최적화를 우선한 후, 점진적으로 더 큰
- [모달 (Modal)](https://designbase.co.kr/dictionary/modal/) - 모달은 사용자의 주의를 특정 작업 또는 내용에 집중시키기 위해 화면 위에 표시되는 대화형 UI 요소입니다.이 요소는 사용자가 모달 내부의 정보를 확인하거나 특정 작업을 완료하기 전까지는 기존 화면과 상호작용할 수 없도록 제한하는 특징을 가지고 있습니다. 웹 브라우저에서는 기본적인 alert, confirm, prompt와 같은 모달 대화상자(alert dialog)를 제공하지만, 디자인과 기능성을 강화하기 위해 커스터마이징된 모달을 별도로 제작하는 경우가 많습니다.특히
- [마이크로인터랙션 (Microinteractions)](https://designbase.co.kr/dictionary/microinteractions/) - 마이크로 인터랙션(Micro-Interactions)은 사용자가 디지털 인터페이스에서 수행하는 작은 상호작용을 의미합니다.이는 사용자의 행동에 대한 즉각적인 피드백을 제공하고, 시스템 상태를 시각적으로 나타내며, 전체적인 사용자 경험(UX)을 향상시키는 데 중요한 역할을 합니다. 마이크로 인터랙션은 단순히 시각적인 효과가 아니라, 사용자 경험을 개선하고, 직관적인 인터페이스를 구축하는 핵심적인 요소입니다.예를 들어, 버튼을 클릭했을 때 색상이 변하거나, 토글 스위치를 켰을 때 애니메이션이 실행되는 것 등이
- [애자일 방법론 (Agile Methodology)](https://designbase.co.kr/dictionary/agile-methodology/) - 애자일 방법론(Agile Methodology)은 프로젝트를 관리하고 소프트웨어를 개발하기 위한 유연한 접근 방식입니다. 애자일은 개발 과정을 작은 단위로 나누어 반복적으로 진행하며, 변화에 빠르게 대응하고 고객의 피드백을 반영하여 사용자 중심의 결과물을 만드는 것을 목표로 합니다. 특히 사용자 요구사항이 자주 변하거나 고도화되는 환경에서 효율적인 방법으로 자리 잡았습니다. 애자일 방법론의 주요 특징 반복적 개발(Iterative Development) 애자일에서는 개발을 짧은 반복 주기로
- [워터폴 모델 (Waterfall Model)](https://designbase.co.kr/dictionary/waterfall-model/) - 워터폴 모델 혹은 폭포수 모델은 소프트웨어 개발 과정에서 가장 초기에 사용된 프로젝트 관리 방법론 중 하나로, 각 단계가 이전 단계의 결과에 기반을 두고 순차적으로 진행되는 것을 특징으로 합니다. 워터폴 모델은 일반적으로 요구사항 정의, 설계, 구현, 테스팅, 배포 및 유지보수와 같은 순차적인 단계로 구성됩니다. UX/UI 디자이너의 관점에서, 워터폴 모델은 요구사항과 설계 단계에서 중요한 역할을 합니다. 이
- [스프린트 (Sprint)](https://designbase.co.kr/dictionary/스프린트-sprint/) - 스프린트는 애자일 프레임워크인 스크럼에서 사용하는 주요 개념 중 하나로, 프로젝트의 특정 부분에 집중하는 제한된 시간 간격을 나타냅니다. 일반적으로 스프린트의 기간은 1~4주 사이이며, 그 기간 동안 팀은 사전에 정의된 작업 목록을 완료하는 데 집중합니다. 스프린트는 프로젝트를 관리하고 일정을 조정하는 데 중요한 도구로 사용됩니다. 각 스프린트는 명확한 목표와 정의된 결과물을 가지며, 이는 프로젝트의 전체 범위와 일정을 관리하기
- [스크럼 (Scrum)](https://designbase.co.kr/dictionary/scrum/) - 스크럼은 소프트웨어 개발을 위한 애자일 프레임워크 중 하나로, 복잡하고 예측 불가능한 프로젝트를 관리하는 방법론입니다. 작은 단위로 나누어진 작업들을 주기적으로 반복하며 프로젝트를 진행합니다. 스크럼 팀은 일반적으로 제품 소유자(Product Owner), 스크럼 마스터(Scrum Master), 개발팀(Development Team)의 세 가지 역할로 구성되며, 공동의 목표를 달성하기 위해 각자의 역할을 수행합니다. UX/UI 디자이너 입장에서 스크럼 방법론은 빠른 피드백과 지속적인 반복을 통해 디자인의
- [하이브리드 앱 (Hybrid App)](https://designbase.co.kr/dictionary/hybrid-app/) - 하이브리드 앱은 웹 애플리케이션을 네이티브 앱 셸로 둘러싼 것으로, 웹 기술(HTML, CSS, JavaScript)을 사용하여 개발하고 네이티브 웹 뷰 컴포넌트를 통해 실행됩니다. 이는 웹 애플리케이션의 접근성과 유연성을 유지하면서도, 네이티브 애플리케이션과 같은 사용자 인터페이스를 제공합니다. 크로스 플랫폼 (Cross-Platform) 앱과의 차이점 크로스 플랫폼 앱은 여러 운영 체제에서 실행할 수 있는 애플리케이션을 개발하는 방식입니다. 하나의 코드 베이스를 공유하여 iOS,
- [네이티브 앱 (Native App)](https://designbase.co.kr/dictionary/native-app/) - 네이티브 앱(Native App)은 특정 운영 체제에서 실행되도록 그 체제의 고유 프로그래밍 언어로 개발된 애플리케이션입니다. 예를 들어, Android 운영 체제에서는 Java 또는 Kotlin으로, iOS에서는 Objective-C 또는 Swift로 개발됩니다. 각 플랫폼의 네이티브 언어와 컴포넌트로 작성되기 때문에, 운영체제에서 제공하는 다양한 기능을 최대한 활용할 수 있으며, 성능이 우수합니다. 네이티브 앱의 UX/UI 관점 UX/UI 디자이너 입장에서 네이티브 앱은 각 플랫폼의
- [크로스 플랫폼 (Cross-Platform)](https://designbase.co.kr/dictionary/cross-platform/) - 크로스 플랫폼은 여러 운영 체제(예: iOS, Android, Windows 등)에서 실행되도록 설계된 소프트웨어의 형태를 의미합니다. 이 접근법은 하나의 코드베이스를 작성하고 이를 여러 플랫폼에 적용할 수 있도록 해주므로, 개발 시간을 절약하고 코드의 재사용성을 높일 수 있습니다. 크로스 플랫폼 앱 개발의 주요 이점 중 하나는 시장 점유율을 빠르게 확장할 수 있다는 것입니다. iOS와 Android 등 다양한 플랫폼에서 동시에
- [파레토 법칙 (Pareto Principle)](https://designbase.co.kr/dictionary/pareto-principle/) - 파레토 법칙(Pareto Principle)은 전체 결과의 80%가 원인의 20%에서 비롯된다는 경험적 법칙입니다.이는 19세기 이탈리아의 경제학자 빌프레도 파레토(Vilfredo Pareto)가 처음 제시한 개념으로,그는 이탈리아 사회의 부의 분포를 연구하던 중 상위 20%의 사람들이 전체 부의 80%를 차지하고 있다는 사실을 발견했습니다. 이후 이 원칙은 경제학뿐만 아니라 경영, 생산성, UX/UI 디자인, 마케팅, 개발 등 다양한 분야에 적용되며 널리 활용되고 있습니다.즉, 한
- [최소 기능 제품 (Minimum Viable Product, MVP)](https://designbase.co.kr/dictionary/minimum-viable-product/) - MVP(Minimum Viable Product, 최소 기능 제품)은 제품이나 서비스를 개발할 때, 핵심 기능만을 포함한 최소한의 제품을 먼저 출시하여 사용자 피드백을 받고, 점진적으로 개선하는 전략입니다. 이는 시간과 비용을 절약하면서도 시장 반응을 측정할 수 있는 효율적인 방법으로, Lean Startup(린 스타트업) 방법론에서 핵심 개념으로 사용됩니다.즉, 완벽한 제품을 출시하기 전에 가장 중요한 기능만 포함한 초기 버전을 빠르게 시장에 선보이고, 사용자
- [랜딩 페이지 (Landing Page)](https://designbase.co.kr/dictionary/landing-page/) - 랜딩 페이지(Landing Page)는 특정 목표(구매, 가입, 다운로드, 문의 등)를 달성하기 위해 설계된 독립적인 웹페이지입니다. 사용자는 디지털 광고, 이메일 캠페인, 검색 엔진, 소셜 미디어 링크 등을 통해 유입되며, 랜딩 페이지는 그들의 행동을 유도하는 역할을 합니다. 랜딩 페이지는 웹사이트의 일반적인 페이지(홈페이지, 블로그 등)와는 다르게 특정 목표를 중심으로 설계되며, 사용자 경험(UX)과 전환율(Conversion Rate)을 극대화하는 것이 핵심입니다. 랜딩 페이지의
- [딥링크 (Deep Linking)](https://designbase.co.kr/dictionary/deep-link/) - 딥링크(Deep Link)는 앱이나 웹사이트의 특정 페이지나 위치로 직접 연결해주는 URL입니다. 일반적인 링크는 웹사이트의 홈페이지로 연결되지만, 딥링크는 특정 콘텐츠나 페이지로 사용자를 즉시 이동시켜줍니다. 이를 통해 사용자는 불필요한 단계 없이 목표 콘텐츠에 빠르게 접근할 수 있어 사용자 경험(UX)을 향상시킬 수 있습니다. 딥링크 사용 예시 이메일 캠페인: 프로모션 이메일이나 알림 메시지에 특정 콘텐츠로의 딥링크를 삽입하여, 사용자가 앱을 열었을
- [지연된 로딩(Lazy Loading)](https://designbase.co.kr/dictionary/lazy-loading/) - Lazy Loading(지연 로딩)은 웹페이지의 리소스를 필요할 때만 로드하는 방식입니다.즉, 사용자가 특정 콘텐츠를 요청하거나 스크롤을 내릴 때 필요한 데이터나 이미지를 불러오도록 설계되어 있습니다. 일반적으로 웹페이지가 로드될 때 모든 콘텐츠를 한 번에 다운로드하면 초기 로딩 속도가 느려지고, 불필요한 데이터 사용이 증가할 수 있습니다.Lazy Loading을 적용하면 필요한 데이터만 로드하여 성능을 최적화하고 사용자 경험(UX)을 개선할 수 있습니다. 예시 1.
- [CORS (Cross-Origin Resource Sharing)](https://designbase.co.kr/dictionary/cors-cross-origin-resource-sharing/) - CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹 애플리케이션에서 서로 다른 도메인(출처) 간에 리소스를 공유할 수 있도록 허용하는 보안 정책입니다. 웹 브라우저는 보안을 위해 기본적으로 Same-Origin Policy(동일 출처 정책)을 적용하는데, 이를 통해 다른 도메인의 API나 리소스를 무분별하게 요청하는 것을 차단합니다.하지만, CORS를 사용하면 특정 조건하에 다른 도메인의 리소스에 안전하게 접근할 수 있도록 허용할 수 있습니다. 예시
- [JWT (JSON Web Token)](https://designbase.co.kr/dictionary/jwt-json-web-token/) - JWT(JSON Web Token)는 JSON 기반의 경량 토큰으로, 사용자 인증과 정보 교환을 안전하게 수행할 수 있도록 설계된 인증 방식입니다. 웹 애플리케이션에서 사용자가 로그인할 때, JWT를 생성하여 클라이언트(브라우저 또는 모바일 앱)와 서버 간에 인증 정보를 안전하게 주고받을 수 있습니다.JWT는 암호화된 서명을 포함한 문자열 형식으로 되어 있으며, 토큰을 검증하면 사용자의 신원을 확인할 수 있습니다. JWT 예시 1. JWT의
- [Cloud Computing (클라우드 컴퓨팅)](https://designbase.co.kr/dictionary/cloud-computing/) - 클라우드 컴퓨팅(Cloud Computing)은 인터넷을 통해 IT 리소스(서버, 스토리지, 데이터베이스, 네트워크, 소프트웨어 등)를 제공하는 기술을 의미합니다. 과거에는 기업이나 개인이 자체적으로 서버와 데이터를 관리해야 했지만, 클라우드 컴퓨팅을 사용하면 필요한 만큼의 IT 인프라를 임대하여 사용할 수 있으며, 유지보수와 확장이 용이합니다. 이 기술은 AWS, Google Cloud, Microsoft Azure 등의 서비스 제공업체를 통해 사용되며, 웹 애플리케이션, 데이터 저장소, 머신러닝, 인공지능,
- [NoSQL](https://designbase.co.kr/dictionary/nosql/) - NoSQL(Not Only SQL)은 관계형 데이터베이스(SQL)와 달리, 고정된 스키마(테이블 구조) 없이 데이터를 저장하고 처리할 수 있는 데이터베이스 시스템을 의미합니다. 기존의 SQL 기반 관계형 데이터베이스(RDBMS)는 데이터를 행(Row)과 열(Column)로 구성된 테이블에 저장하는 반면, NoSQL 데이터베이스는 문서(Document), 키-값(Key-Value), 컬럼(Column-Family), 그래프(Graph) 등의 다양한 데이터 모델을 지원합니다. NoSQL 데이터베이스는 빅데이터, 실시간 웹 애플리케이션, 클라우드 기반 서비스와 같은 대량의 데이터를 빠르게 처리해야
- [SQL (Structured Query Language)](https://designbase.co.kr/dictionary/sql-structured-query-language/) - SQL(Structured Query Language, 구조적 질의 언어)은 데이터베이스에서 데이터를 저장, 조회, 수정, 삭제할 때 사용하는 프로그래밍 언어입니다. 주로 관계형 데이터베이스(RDBMS, Relational Database Management System)에서 사용되며, 데이터를 테이블 형태로 구조화하여 관리합니다. SQL은 사용자가 데이터베이스와 상호작용할 수 있도록 도와주며, 비개발자도 쉽게 배울 수 있는 직관적인 문법을 가지고 있습니다. 예를 들어, 웹사이트의 회원 정보, 상품 목록, 주문 내역 등
- [Framework (프레임워크)](https://designbase.co.kr/dictionary/framework/) - 프레임워크(Framework)는 소프트웨어 개발을 보다 효율적이고 체계적으로 진행할 수 있도록 제공되는 미리 정의된 코드 구조 및 도구 모음을 의미합니다. 개발자는 프레임워크를 사용하여 일정한 규칙과 패턴을 따라 애플리케이션을 구축할 수 있습니다. 프레임워크는 일반적으로 반복적인 개발 작업을 줄이고, 코드의 재사용성을 높이며, 유지보수를 용이하게 하는 역할을 합니다. 웹 개발, 모바일 개발, 데이터 분석, 인공지능 등 다양한 분야에서 사용됩니다. 프레임워크의
- [CDN (콘텐츠 전송 네트워크)](https://designbase.co.kr/dictionary/cdn-content-delivery-network/) - CDN(Content Delivery Network, 콘텐츠 전송 네트워크)은 웹사이트의 이미지, 동영상, CSS, JavaScript 같은 정적 파일을 여러 지역의 서버에 분산하여 제공하는 네트워크 시스템입니다. CDN을 활용하면 사용자가 특정 웹사이트에 접속할 때 가장 가까운 CDN 서버에서 데이터를 가져오므로, 웹페이지 로딩 속도를 개선하고 서버 부하를 줄이며 보안성을 강화할 수 있습니다. 예를 들어, 사용자가 한국에서 미국에 있는 웹사이트에 접속하면, 직접 미국의
- [Serverless (서버리스)](https://designbase.co.kr/dictionary/serverless/) - 서버리스(Serverless)는 서버가 전혀 없는 것이 아니라, 개발자가 직접 서버를 관리할 필요 없이 클라우드 제공업체가 서버 운영을 자동으로 처리하는 방식을 의미합니다. 전통적인 서버 기반 개발에서는 서버를 직접 구축하고 유지보수해야 했지만, 서버리스 환경에서는 이러한 작업을 클라우드 서비스가 대신 수행합니다. 개발자는 오직 비즈니스 로직과 코드 작성에 집중할 수 있습니다. 서버리스 컴퓨팅은 AWS Lambda, Google Cloud Functions, Azure Functions
- [Server (서버)](https://designbase.co.kr/dictionary/server/) - 서버(Server)는 네트워크를 통해 클라이언트(사용자의 기기)로부터 요청을 받아 처리하고 응답을 반환하는 컴퓨터 또는 소프트웨어를 의미합니다. 웹사이트나 애플리케이션은 서버를 통해 데이터 요청을 처리하고, 사용자가 원하는 정보를 제공할 수 있습니다. 서버는 단순히 데이터를 저장하는 공간이 아니라, 요청을 처리하고 응답을 반환하는 중요한 역할을 합니다. 서버는 물리적인 하드웨어 장비일 수도 있고, 클라우드 기반의 가상 서버일 수도 있습니다. 또한, 웹사이트나 앱에서
- [Database (데이터베이스)](https://designbase.co.kr/dictionary/database/) - 데이터베이스(Database, DB)는 데이터를 체계적으로 저장하고 관리하는 시스템을 의미합니다. 데이터베이스는 단순한 파일 저장소가 아니라, 검색, 수정, 삭제, 추가 등의 작업을 빠르고 효율적으로 처리할 수 있도록 설계된 구조를 가집니다. 웹사이트나 애플리케이션에서는 사용자 정보, 게시물, 주문 내역, 결제 정보 등 다양한 데이터를 저장해야 합니다. 이러한 데이터를 안전하게 보관하고, 필요할 때 빠르게 불러올 수 있도록 도와주는 것이 데이터베이스의 역할입니다.
- [Back-end (백엔드)](https://designbase.co.kr/dictionary/back-end/) - 백엔드(Back-end)는 웹사이트나 애플리케이션의 서버, 데이터베이스, 애플리케이션 로직을 담당하는 영역을 의미합니다. 사용자가 직접 볼 수 없는 부분에서 데이터를 처리하고, 저장하며, 웹사이트나 앱이 정상적으로 동작하도록 지원하는 역할을 합니다. 웹사이트에서 로그인, 회원가입, 게시글 작성, 결제 등과 같은 기능들은 모두 백엔드에서 데이터베이스와 서버를 통해 처리됩니다. 백엔드는 API를 통해 프론트엔드와 소통하며, 보안, 인증, 데이터 관리 등 중요한 역할을 수행합니다. 백엔드의
- [Front-end (프론트엔드)](https://designbase.co.kr/dictionary/front-end/) - 프론트엔드(Front-end)는 사용자가 직접 보고 상호작용하는 웹 애플리케이션의 UI(User Interface)를 개발하는 영역을 의미합니다. 즉, 사용자가 웹사이트를 방문했을 때, 화면에 보이는 모든 요소(버튼, 입력창, 이미지, 네비게이션 바 등)를 구성하고 동작하게 만드는 역할을 합니다. 프론트엔드는 주로 HTML(구조), CSS(디자인), JavaScript(동작)를 활용하여 웹사이트의 화면을 구성하며, React, Vue.js, Angular와 같은 프론트엔드 프레임워크 또는 라이브러리를 이용해 더 효율적으로 개발할 수 있습니다. 프론트엔드의
- [JavaScript (JS)](https://designbase.co.kr/dictionary/javascript-js/) - JavaScript(JS)는 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다. HTML이 웹페이지의 구조를 정의하고, CSS가 디자인을 담당한다면, JavaScript는 사용자와의 상호작용을 처리하고, 웹사이트를 더욱 동적으로 만들기 위한 역할을 합니다. JavaScript는 웹 브라우저에서 실행되며, 버튼 클릭 이벤트, 데이터 업데이트, 애니메이션, 폼 검증 등의 기능을 수행할 수 있습니다. 또한, Node.js를 이용하면 백엔드 개발에서도 활용할 수 있어, 웹 개발 전반에서 필수적인 언어로
- [CSS (Cascading Style Sheets)](https://designbase.co.kr/dictionary/css-cascading-style-sheets/) - CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 스타일링 언어입니다. HTML이 웹페이지의 구조를 담당한다면, CSS는 해당 구조에 색상, 배경, 글꼴, 레이아웃 등의 디자인을 적용하는 역할을 합니다. CSS는 웹 개발에서 필수적인 요소이며, HTML과 함께 사용되어 웹사이트의 디자인과 사용자 경험(UX)을 향상시킵니다. CSS를 사용하면 일관된 디자인을 유지할 수 있고, 반응형 웹 디자인을 적용하여 다양한 기기에서 최적화된 UI를 제공할 수
- [HTML (HyperText Markup Language)](https://designbase.co.kr/dictionary/html-hypertext-markup-language/) - HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 마크업 언어입니다. 웹 개발의 기초로, 문서의 콘텐츠를 계층적으로 구성하며, 웹 브라우저가 이를 해석하여 사용자에게 화면을 출력합니다. HTML은 단독으로 동작하는 것이 아니라, CSS(Cascading Style Sheets) 및 JavaScript와 함께 사용하여 디자인과 기능을 추가하는 역할을 합니다. HTML은 기본적으로 태그(Tag) 기반의 언어로, 요소(Element)와 속성(Attribute)으로 구성됩니다. 각 태그는 특정한 역할을 수행하며, 문서의 구조를 논리적으로
- [체크박스(Checkbox)](https://designbase.co.kr/dictionary/checkbox/) - 체크박스(Checkbox)는 웹 또는 앱 개발에서 사용자가 하나 이상의 옵션을 선택할 수 있는 입력 요소로, 동의, 선택, 허용 등의 선택 사항을 표시하는 데 사용됩니다. 각 옵션을 선택하거나 해제할 수 있으며, 여러 체크박스를 그룹으로 묶어 사용자가 다중 선택할 수 있게 할 수도 있습니다. 체크박스 사용 예시 회원 가입 페이지의 이용 약관 동의: 사용자에게 이용 약관에 동의할지 묻는
- [인풋 (Input)](https://designbase.co.kr/dictionary/input/) - 인풋(Input)은 웹 개발에서 사용자에게 정보를 입력받기 위한 상자나 필드를 의미합니다. 다양한 유형의 정보를 입력할 수 있도록 설계된 요소로, 사용자로부터 텍스트, 숫자, 선택 옵션 등을 입력받거나 선택할 수 있게 도와주는 역할을 합니다. 인풋 종류 텍스트 인풋(Text Input): 사용자가 텍스트를 입력할 수 있는 입력 상자입니다. 주로 사용자 이름, 이메일, 비밀번호 등을 입력받을 때 사용됩니다. 숫자 인풋(Number Input):
- [라디오 버튼(Radio Button)](https://designbase.co.kr/dictionary/radio-button/) - 라디오 버튼(Radio Button)은 사용자가 여러 옵션 중 하나의 선택지만 선택할 수 있도록 제공하는 입력 요소입니다. 사용자가 단일 항목만 선택할 수 있는 상황에 주로 사용되며, 여러 개를 중복 선택할 수 있는 체크박스와는 다른 특징을 가집니다. 웹 개발에서 자주 사용하는 UI 요소 중 하나로, 사용자가 한 번에 하나의 옵션만 선택해야 하는 경우 매우 유용합니다. 라디오 버튼 사용
- [디자인 윤리 (Design Ethics)](https://designbase.co.kr/dictionary/design-ethics/) - 디자인 윤리(Design Ethics)는 디자인 프로세스와 결과물이 사회와 개인에게 미치는 영향에 대한 가치 판단을 포함합니다. 디자이너는 단순히 보기 좋고 기능적인 제품을 만드는 것을 넘어, 해당 제품이 사람들의 삶에 미칠 사회적, 개인적 영향을 고려해야 합니다. 특히, UX/UI 디자이너는 사용자의 경험을 깊이 이해하고 이를 디자인에 반영해야 하기 때문에 윤리적 책임이 더욱 중요합니다. 디자인 윤리의 주요 요소 프라이버시 보호
- [도허티의 임계(Doherty Threshold)](https://designbase.co.kr/dictionary/doherty-threshold/) - 도허티의 임계(Doherty Threshold)는 사용자와 컴퓨터 간의 인터랙션 시 가장 적절한 응답 시간을 지칭하는 개념입니다. 이 이론에 따르면, 시스템의 반응은 0.4초 이내에 이루어져야 사용자 주의가 분산되지 않고, 원활하게 작업을 이어갈 수 있습니다. 사용자가 인터페이스와 상호작용할 때 빠른 피드백을 제공하면 생산성이 향상되고, 사용자의 만족도 또한 높아집니다. "사용자의 주의가 분산되는 것을 막고 생산성을 높이려면 시스템의 반응은 0.4초 이내에
- [데이터 포맷(Data formats)](https://designbase.co.kr/dictionary/data-formats/) - 데이터 포맷(Data Formats)은 숫자, 언어, 날짜, 시간 등의 다양한 유형의 데이터를 나타내는 형식을 의미합니다. UI에서 시간, 요일, 날짜(예: 월, 일, 연도) 등의 정보를 표시할 때 사용자의 지역과 서비스 목적에 맞춰 적절하게 표현하는 것이 중요합니다. 특히 타임 존(Time Zone)의 경우, 국가나 지역마다 시간대가 다르므로, 구체적인 시간 표기를 제공해야 사용자가 혼동 없이 정보를 이해할 수 있습니다. 예를
- [더블 다이아몬드 프로세스 (Double Diamond process)](https://designbase.co.kr/dictionary/double-diamond-process/) - 더블 다이아몬드(Double Diamond)는 디자인 프로세스를 구조화한 방법론으로, 영국 디자인 위원회(British Design Council)가 제안한 디자인 사고 프로세스 모델입니다. 이 모델은 문제를 이해하고 정의하는 문제 탐구 단계와 문제 해결을 위한 솔루션 개발 단계를 각각 다이아몬드 모양으로 구분하여 표현합니다. 두 개의 다이아몬드 형태는 문제와 해결책을 명확하게 정의하고, 체계적으로 접근하도록 돕습니다. 더블 다이아몬드의 4단계 1. 발견(Discover) 목표: 최대한 많은
- [다크 패턴 (Dark Patterns)](https://designbase.co.kr/dictionary/dark-patterns/) - 다크 패턴(Dark Pattern)은 사용자 인터페이스 디자인에서 사용자를 의도적으로 혼란스럽게 하거나 오해를 유도하여, 사용자가 원하지 않는 행동을 하도록 만드는 유해한 디자인 전략입니다. 다크 패턴은 비윤리적이고 사용자 경험에 부정적인 영향을 미치기 때문에 주의가 필요합니다. 특히, 이용 약관 동의, 개인정보 수집, 불필요한 구매, 탈퇴 방해 등 사용자에게 불리한 방식으로 자주 사용됩니다. 다크 패턴 사용 예시 장바구니 자동 추가:
- [CRM 마케팅 (Customer Relationship Management)](https://designbase.co.kr/dictionary/crm/) - CRM(Customer Relationship Management)이란? CRM(Customer Relationship Management)은 고객 관계 관리 시스템으로, 고객과의 상호작용을 효과적으로 관리하고 고객의 데이터를 체계적으로 분석하여 고객 만족도와 충성도를 높이는 전략입니다. CRM은 고객 정보를 중앙에서 통합 관리하며, 이를 통해 고객의 요구를 파악하고, 맞춤형 마케팅, 판매, 서비스 활동을 지원합니다. 이 시스템은 마케팅, 영업, 서비스 등의 부서가 고객 데이터를 공유하고 협업할 수 있도록 해줍니다. CRM의
- [네비게이션(Navigation)](https://designbase.co.kr/dictionary/navigation/) - 네비게이션(Navigation)은 웹이나 앱 서비스 내에서 사용자가 특정 페이지로 이동할 수 있도록 하는 탐색 경로를 말합니다. 사용자는 네비게이션을 통해 원하는 정보를 쉽게 찾고, 서비스 내에서의 위치를 파악할 수 있습니다. 웹에서는 주로 헤더(Header), 사이드바(Sidebar)에 네비게이션 기능을 제공하며, 앱에서는 App Bar Top이나 Bottom Navigation Bar에 해당 기능을 배치합니다. 웹과 앱은 환경과 사용자 경험이 다르므로 각 환경에 맞는 네비게이션
- [넛지(NUDGE)](https://designbase.co.kr/dictionary/nudge/) - 넛지(NUDGE)는 사용자의 행동을 자연스럽게 유도하거나 간접적인 힌트를 제공하여 사용자 경험을 개선하는 디자인 기법입니다. UX/UI 디자이너는 넛지를 활용해 사용자가 특정 기능을 찾거나 행동을 쉽게 수행할 수 있도록 돕고, 사용자가 무의식적으로 원하는 방향으로 인터랙션을 유도할 수 있습니다. 넛지의 목적은 사용자의 주의를 끌고, 가벼운 힌트를 통해 바람직한 행동을 촉진하는 것입니다. "어떤 행동을 하도록 부추기며 옆구리를 슬쩍 찌르는 것"
- [재방문율 (Retention)](https://designbase.co.kr/dictionary/retention/) - 재방문율(리텐션)은 웹사이트나 앱에 사용자가 얼마나 자주 돌아오는지 측정하는 데 사용됩니다. 이를 통해 고객의 충성도, 서비스의 만족도, 제품의 장기적인 가치 등을 추정할 수 있습니다. 디자이너 입장에서 사용성 개선 및 신규 서비스 런칭등 성과 지표로 파악할 수 있기 때문에 알아두면 좋습니다. 재방문율 구하는 공식 재방문율 = (특정 기간 동안 재방문한 사용자 수 / 특정 기간 동안 전체
- [전환율 (Conversion Rate)](https://designbase.co.kr/dictionary/conversion-rate/) - 전환율은 마케팅 및 웹 분석에서 사용하는 중요한 지표로, 특정 행동을 완료한 사용자의 비율을 의미합니다. 웹사이트를 방문한 100명의 사용자 중 5명이 제품을 구매했다면, 전환율은 5%가 됩니다.이 행동은 웹사이트 방문, 앱 다운로드, 구독, 구매, 등록 등 다양한 형태가 될 수 있습니다. UXUI 디자이너로서 전환율을 향상시킬 수 있는 다양한 방법을 고민하고 적용해야 합니다. 전환율 높인 사례 Amazon의 1-Click
- [그리드시스템(Grid System)](https://designbase.co.kr/dictionary/gridsystem/) - 그리드 시스템(Grid System)이란? 그리드 시스템은 웹 또는 앱의 레이아웃을 체계적으로 구성하기 위한 가이드로, 콘텐츠 폭(Container), 컬럼(Column), 거터(Gutter), **마진(Margin)**의 4가지 요소로 구성됩니다. 다양한 해상도와 비율의 디바이스에 최적화된 레이아웃을 구현하기 위해 그리드 시스템을 활용하면, 모든 디바이스에서 일관된 레이아웃을 제공할 수 있습니다. 일반적으로 Desktop과 Laptop은 12단, Tablet은 6단, Mobile은 4단 그리드가 추천됩니다. 그리드 시스템의 주요 요소 콘텐츠 폭(Container)
- [퍼널 (Funnel)](https://designbase.co.kr/dictionary/funnel/) - 퍼널(Funnel)은 마케팅과 UX/UI 디자인에서 사용자가 특정 목표를 달성하기 위해 거치는 단계를 시각화한 모델입니다. 이름에서 알 수 있듯이 깔때기 모양을 하고 있으며, 가장 넓은 시작 부분에서 점점 좁아져 마지막 목표 지점에 도달하게 됩니다. 이 모델은 각 단계를 거치면서 일부 사용자들이 목표 달성 전에 탈락하는 과정을 나타냅니다. 퍼널의 사용 예시 예를 들어, 온라인 쇼핑몰의 구매 퍼널을 살펴보면,
- [게슈탈트 이론(Gestalt Theory)](https://designbase.co.kr/dictionary/gestalt-theory/) - 게슈탈트 이론은 심리학의 한 분야로, 전체가 부분의 합보다 더 큰 의미를 가진다는 개념을 강조합니다. 이 이론은 인간이 각각의 개별적인 요소보다는 전체적인 구조와 패턴을 우선적으로 인식하는 경향을 설명하며, UX/UI 디자인에서도 매우 중요한 원리로 활용됩니다. 게슈탈트 이론을 이해하면 사용자가 디자인을 어떻게 인식하고 해석하는지 파악할 수 있어, 더 나은 사용자 경험을 제공하는 데 도움이 됩니다. 게슈탈트 이론은 독일어로
- [구글 애널리틱스 (Google Analytics)](https://designbase.co.kr/dictionary/google-analytics/) - 구글 애널리틱스란? 구글 애널리틱스(Google Analytics)는 웹사이트 트래픽과 사용자 행동을 분석할 수 있는 무료 도구입니다. 이를 통해 웹사이트의 성과를 측정하고, 사용자 경험을 최적화하며, 마케팅 전략을 개선할 수 있습니다. 구글 애널리틱스는 다양한 데이터와 보고서를 제공하여 웹사이트 운영자에게 중요한 통찰을 제공합니다. 구글 애널리틱스의 중요성 1. 트래픽 분석 웹사이트 방문자의 수, 방문 경로, 유입 경로 등을 분석할 수 있습니다.
- [개념 증명 (Proof of Concept, POC)](https://designbase.co.kr/dictionary/proof-of-concept/) - 개념 증명(POC)은 Proof of Concept의 약자로, 신규 개발 제품, 서비스, 솔루션 등의 이론이나 아이디어가 실제로 실행 가능한 것을 보여주기 위한 시험, 테스트 또는 실험을 의미합니다. 그래서 어떤 아이디어나 기술이 실제로 실행 가능하고, 그 예상 결과를 이룰 수 있는지를 확인하는데 있어 중요한 역할을 합니다. POC 성공 사례 Dropbox Dropbox의 창업자 드류 호스턴은 Dropbox를 만들기 위한 POC를
- [가시화 (Visualization)](https://designbase.co.kr/dictionary/visualization/) - UX/UI 디자이너는 사용자가 정보를 쉽게 이해하고 해석할 수 있도록 다양한 가시화 기법을 사용합니다. 여기에는 도표, 그래프, 지도, 인포그래픽 등이 포함되며, 이러한 시각적 요소들은 복잡한 정보를 단순화하여 직관적으로 전달하는 데 큰 역할을 합니다. 예를 들어, 히트맵은 웹사이트 방문자의 행동을 분석하는 데 자주 사용됩니다. 히트맵을 통해 사용자의 클릭, 스크롤, 시선 패턴 등을 시각적으로 표현할 수 있으며, 이를
- [FAB(Floating Action Button)](https://designbase.co.kr/dictionary/floating-action-button/) - FAB(Floating Action Button)은 UI 내 특정 위치에 고정되어 떠 있는 버튼으로, 사용자에게 중요한 행동을 언제든지 클릭할 수 있도록 제공하는 UI 요소입니다. 주로 안드로이드에서 자주 사용되는 유형으로, 리스트나 콘텐츠 위에 고정되어 사용자의 행동을 유도합니다. FAB는 화면에서 항상 쉽게 접근할 수 있는 위치에 배치되며, 앱에서 가장 중요한 기능을 수행하는 데 활용됩니다. FAB의 특징과 사용 예시 고정 위치:
- [pt (Point)](https://designbase.co.kr/dictionary/pt/) - PT (Point)는 디자인에서 자주 사용되는 단위로, 일반적으로 화면의 물리적 크기에 의존합니다. 주로 iOS에서 사용하는 단위이며, 1pt는 약 1/72 인치로 정의됩니다. PT는 디바이스의 화면 크기나 해상도에 상관없이 일관된 물리적 크기를 유지할 수 있어 다양한 디바이스에서 균일한 UI 요소를 보여주는 데 유용합니다. 이는 안드로이드의 DP 단위와 유사하지만, iOS 환경에 최적화된 단위입니다. PT가 필요한 이유 iOS에서는 iPhone과 iPad를
- [SEO (Search Engine Optimization)](https://designbase.co.kr/dictionary/seo-search-engine-optimization/) - SEO(검색 엔진 최적화)는 웹사이트가 검색 엔진 결과 페이지에서 더 높은 순위를 차지할 수 있도록 도와주는 다양한 전략과 기술을 의미합니다. SEO의 기본 개념 SEO란 무엇인가? SEO는 Search Engine Optimization의 약자로, 검색 엔진에서 특정 키워드에 대해 웹사이트의 순위를 높이는 과정을 말합니다. 검색 엔진은 사용자에게 가장 관련성 높은 결과를 제공하기 위해 웹사이트를 평가하고 순위를 매깁니다. 왜 SEO가 중요한가?
- [F-패턴 (F-Pattern)과 Z-패턴 (Z-Pattern)](https://designbase.co.kr/dictionary/f-pattern-and-z-pattern/) - F-패턴이란? F-패턴은 웹 페이지의 내용을 사용자가 스캔할 때 주로 따라가는 눈의 움직임을 나타낸 것입니다. 사용자는 페이지의 왼쪽 상단부터 읽기 시작하여 수평으로 이동한 후, 세로로 아래로 이동하며 새로운 정보를 찾고, 다시 수평으로 읽어 내려가는 방식입니다. 이러한 패턴은 사용자의 시선이 페이지에서 F자 형태를 이루게 하며, 정보의 배치를 효과적으로 할 수 있는 가이드라인을 제공합니다. F-패턴 사용 예시 1.
- [CTR (Click-Through Rate)](https://designbase.co.kr/dictionary/click-through-rate/) - CTR(클릭률)이란? CTR(Click-Through Rate)은 디지털 마케팅에서 광고의 효과를 측정하는 데 사용되는 지표로, 광고를 본 사람들 중 실제로 그 광고를 클릭하여 해당 웹사이트나 제품 페이지에 방문한 비율을 의미합니다. CTR은 광고 캠페인의 성과를 파악하고, 사용자의 관심을 끄는 데 얼마나 성공적인지 평가하는 중요한 지표로 사용됩니다. CTR은 아래의 공식으로 계산됩니다. CTR(%) = (광고를 클릭한 사용자 수 / 광고를 본 전체
- [CTA(Call To Action)](https://designbase.co.kr/dictionary/call-to-action/) - CTA(Call to Action)는 웹사이트, 앱, 광고에서 사용자가 특정 행동을 취하도록 유도하는 설계 기술입니다. CTA는 보통 버튼이나 링크 형태로 나타나며, "구매하기", "더 알아보기", "가입하기"와 같은 강력한 동사를 사용하여 사용자의 행동을 유도합니다. 이러한 행동 유도 문구는 사용자에게 명확한 지침을 제공하고, 웹사이트나 앱에서 원하는 목표를 달성하는 데 중요한 역할을 합니다. CTA의 중요성 웹사이트나 앱의 목표는 사용자가 정보를 찾고,
- [CRUD](https://designbase.co.kr/dictionary/crud/) - CRUD는 컴퓨터 프로그래밍에서 데이터의 기본적인 네 가지 기능을 뜻합니다: 생성(Create), 읽기(Read), 업데이트(Update), **삭제(Delete)**입니다. 이러한 기능은 데이터베이스와 상호작용하는 모든 시스템에서 필수적인 작업으로, 데이터 관리의 기본적인 방식을 제공합니다. CRUD의 개념이 UX/UI 디자인에서 중요한 이유 CRUD는 백엔드 개발뿐만 아니라, UX/UI 디자이너가 웹이나 앱 애플리케이션을 설계할 때도 매우 중요한 개념입니다. CRUD에 대한 이해를 통해 디자이너는 사용자가 데이터와 상호작용하는 화면을
- [AMP (Accelerated Mobile Pages)](https://designbase.co.kr/dictionary/amp-accelerated-mobile-pages/) - AMP란? AMP(Accelerated Mobile Pages)는 Google에서 개발한 오픈 소스 프레임워크로, 모바일 환경에서 웹 페이지의 로딩 속도를 극대화하는 데 중점을 둡니다. AMP를 적용한 웹 페이지는 훨씬 더 빠르게 로딩되어, 사용자 경험(UX)을 개선하는 데 큰 기여를 합니다. 특히 AMP는 모바일 사용자들에게 최적화되어 있으며, 모바일에서 빠르게 로딩되는 웹사이트가 필요한 경우에 유용한 솔루션입니다. AMP의 필요성 1. 빠른 로딩 속도 AMP를
- [Alt 속성 (Alt Attribute)](https://designbase.co.kr/dictionary/alt-attribute/) - Alt 속성, 또는 대체 텍스트(Alternative Text)는 HTML에서 이미지 태그()에 사용되는 속성으로, 이미지의 의미와 내용을 설명하는 텍스트를 제공하는 역할을 합니다. 이 속성은 이미지가 로드되지 않거나 접근성 도구(스크린 리더 등)를 사용하는 사용자들에게 중요한 정보를 전달하기 위해 사용됩니다. 웹 접근성 측면에서 Alt 속성은 필수 요소 중 하나로 간주됩니다. Alt 속성의 중요성 Alt 속성은 다양한 측면에서 중요한 역할을 합니다.

## 디자인 툴

- [Logo finder](https://designbase.co.kr/logo-finder) - 다양한 브랜드와 서비스의 로고를 빠르게 검색하고 확인할 수 있는 로고 탐색 도구입니다. 디자인 작업이나 레퍼런스 수집 시 필요한 로고를 손쉽게 찾아보세요.
- [팔레트 비주얼라이저](https://designbase.co.kr/palette-visualizer/) - 컬러 팔레트 비주얼라이저를 통해 다양한 컬러를 손쉽게 참고할 수 있습니다. 수많은 디자인 예시에 직접 컬러를 적용해보며, 빠르고 효율적으로 컬러의 느낌을 확인해보세요.
- [툴 단축키 모음](https://designbase.co.kr/design-tool-shortcuts/) - Figma, Photoshop, Illustrator 등 자주 사용하는 디자인 툴의 단축키를 한눈에 확인할 수 있습니다. 작업 속도를 높이고 반복적인 디자인 과정을 더 효율적으로 관리해보세요.
- [이모지 찾기](https://designbase.co.kr/emoji/) - 한글로 이모지 찾고, 이모지 복사 붙여넣기 기능을 제공합니다. 빠르게 이모지를 한글로 검색하고 쉽게 복사 및 붙여넣기 할 수 있습니다.
- [컬러 배색](https://designbase.co.kr/design-tool/color-pairing/) - 디자인에 어울리는 컬러 조합을 빠르게 찾고 적용해보세요.
- [Easy Chart](https://designbase.co.kr/design-tool/easy-chart/) - 복잡한 설정 없이 다양한 차트를 쉽고 빠르게 만들 수 있는 차트 라이브러리입니다. 데이터 시각화가 필요한 화면에서 간단하게 그래프를 구성하고 활용할 수 있습니다.
- [그라데이션 생성기](https://designbase.co.kr/gradient-generator/) - 웹으로 빠르게 그라데이션 컬러를 만들고 이미지로 출력하거나 CSS 코드로 복사 할 수 있습니다. 수 많은 예시 그라데이션 컬러를 확인해보세요.
- [로고 SVG 모음](https://designbase.co.kr/logo-svg-collector/) - 400개 이상의 유명 브랜드·서비스 로고를 한 곳에 모아 제공하는 로고 라이브러리입니다. 필요한 로고를 검색하고, SVG 포맷으로 바로 저장하거나 다운로드할 수 있어 디자인 업무 효율을 크게 높여줍니다. 상업·개인 프로젝트 어디에서나 활용 가능한 고품질 벡터 로고로, 배경 손실 없이 자유롭게 편집하고 적용해보세요.
- [Chart Generator](https://designbase.co.kr/design-tool/chart-generator/) - 클릭 몇 번으로 완성되는 그래프 - 피그마 플러그인 데이터 시각화를 위한 차트 제작을 쉽게 할 수 있습니다. 바, 선, 원형, 도넛, 레이더, 스파크라인, 캔들스틱 그래프까지 한 번의 클릭으로 다양한 벡터 기반 차트(Vector Charts)를 생성해보세요. 디자인과 데이터 시각화를 동시에 해결할 수 있는 피그마(Figma) 전용 플러그인입니다. 7가지 차트 유형으로 완벽한 데이터 시각화 이 차트 제너레이터 플러그인은 UI
- [Variable Doc](https://designbase.co.kr/design-tool/variable-doc/) - 변수를 손쉽게 확인하고 문서화할 수 있는 피그마 플러그인 Variable Doc는 Figma의 로컬 변수와 공유 라이브러리 변수를 한 눈에 보고 문서화할 수 있도록 돕는 플러그인입니다. 플러그인 보러가기 Variable Doc 플러그인 주요 기능 1. 모든 변수를 한눈에 로컬 변수와 라이브러리 변수를 한곳에서 명확하게 확인하세요. 여러 메뉴를 오갈 필요 없이, 모든 변수를 체계적으로 정리하여 빠르게 접근할 수 있습니다.
- [반응형 웹 그리드 시스템 계산기](https://designbase.co.kr/grid-calculator) - 반응형 웹디자인 시에 최적화된 그리드를 찾아보세요. Desktop, Tablet, Mobile 등의 컬럼수, 거터, 마진 등의 값을 통해 정수로 떨어지는 값을 찾는 것도 가능합니다. 미리보기를 통해 여러분이 작성한 값에 대한 반응형 그리드 시스템을 확인해보세요.
- [Table Generator](https://designbase.co.kr/design-tool/table-generator/) - Table Generator는 피그마에서 복잡한 테이블을 쉽고 빠르게 만들어주는 플러그인입니다.데이터를 불러오고, 테이블을 생성하고, 편집하는 모든 과정을 자동화하여 반복적인 작업 시간을 크게 줄여줍니다. 플러그인 주요 기능 테이블 자동 생성 행(row)과 열(column)에 원하는 값을 입력하고, 테이블 생성 버튼 클릭하면 피그마에서 편집 가능한 테이블이 생성됩니다. 데이터 불러오기 (Google Sheets / CSV) 구글 스프레드시트 링크 붙여넣기 CSV 파일 업로드 불러온
- [Detach Master](https://designbase.co.kr/design-tool/detach-master/) - 프레임 안의 다양한 속성을 빠르게 분리(Detach)하고 정리하는 Figma 플러그인 디자인을 수정하거나 스타일을 초기화해야 할 때, 하나하나 수동으로 분리하는 건 너무 번거롭습니다.Detach Master는 선택한 프레임 내의 요소들을 선택적으로 디테치(Detach) 할 수 있도록 도와주는 스마트한 도구입니다. 이런 상황에서 유용해요 공통 스타일을 제거하고 새 스타일로 적용하고 싶을 때(텍스트 스타일, 컬러 스타일, 효과 스타일 등) 라이브러리 컴포넌트를 분리하여 커스터마이징하고
- [Font changer](https://designbase.co.kr/design-tool/font-changer/) - Font Changer는 디자인 작업의 효율성을 높여주는 강력한 플러그인입니다. 현재 페이지에서 사용된 폰트를 쉽게 식별하고 빠르게 변경할 수 있습니다. 검색 및 북마크 기능을 통해 자주 사용하는 폰트를 손쉽게 관리할 수 있습니다. 폰트 두께를 자동으로 조절하여 일관성을 유지하고 다양한 시각적 표현을 가능하게 합니다. Font Changer를 통해 폰트 관리를 간소화하고 디자인 작업을 간편하게 진행하세요. 현재 베타 버전입니다. 자유롭게
- [Pixel Perfect](https://designbase.co.kr/design-tool/pixel-perfect/) - 픽셀 완벽주의자를 위한 필수 피그마 플러그인 한 번의 클릭으로 모든 디자인 요소를 4의 배수 근사치로 조정해 디자인의 일관성과 정밀도를 극대화합니다. 복잡한 수작업 없이 깔끔하고 체계적인 디자인을 완성하세요. 핵심 기능 자동 정밀 조정 요소의 크기가 4의 배수가 아닐 경우, 가장 가까운 4의 배수로 조정합니다.예: 7 → 8, 5 → 4로 자동 조정. 소수점 처리 소수점을 포함하는
- [한글 더미](https://designbase.co.kr/design-tool/korean-dummy-plugin/) - 피그마에서 진짜 한글 더미 텍스트 빠르고 간편하게 넣는 방법 UI 디자인 작업 중 번거로운 더미 텍스트 입력 작업을 한 번의 클릭으로 해결하세요. 랜덤 한글 텍스트를 자동으로 생성하고 적용하여 생산성을 극대화합니다. 피그마 플러그인 바로가기 플러그인 유료 구매하기 한글 더미 플러그인을 만든 이유 디자이너들은 UI 작업 중 더미 텍스트를 작성하기 위해 직접 타이핑 해야 하는 번거로움에 직면하곤
- [Face Dummy](https://designbase.co.kr/design-tool/face-dummy/) - 플러그인 유료 구매하기 UI 내 프로필 이미지 더 이상 찾아보지 마세요. 다양한 스타일의 얼굴 이미지를 제공하는 Face Dummy는 UI 디자인에서 프로필 이미지를 쉽고 빠르게 적용할 수 있는 피그마 플러그인입니다. 모든 이미지는 저작권 걱정 없이 사용 가능하며, 디자인 작업의 효율성을 극대화합니다. 다양한 스타일의 얼굴 이미지 제공 실사 이미지뿐만 아니라 다양한 그래픽 스타일의 이미지도 포함되어 있어 디자이너의

## 디지털 제품

- [상세페이지 템플릿 세트](https://designbase.co.kr/digital-product/detailpage-template-set/)
- [상세페이지 템플릿 A타입](https://designbase.co.kr/digital-product/detailpage-template/)
- [상세페이지 템플릿 B타입](https://designbase.co.kr/digital-product/detailpage-template-type-b/)
- [상세페이지 템플릿 C타입](https://designbase.co.kr/digital-product/detailpage-template-type-c/)
- [복붙으로 시작하는 고퀄리티 앱 UI 템플릿](https://designbase.co.kr/digital-product/app-ui-template/)
- [손쉽게 시작하는 웹 UI 디자인 치트키](https://designbase.co.kr/digital-product/web-ui-template/)
- [웹 & 앱 UI 템플릿 세트](https://designbase.co.kr/digital-product/web-app-ui-template-set/)

## 공지사항

- [무료 폰트 추가](https://designbase.co.kr/notices/무료-폰트-추가/) - 무료 폰트를 추가했습니다. 앞으로 더 좋은 폰트를 찾게되면 추가해보겠습니다~! 그냥 무료라서 올리는 게 아니라 디자인에 충분히 활용할만큼 매력적인 폰트만 선별해서 올리고 있습니다.^^ 추가된 폰트 코트라 희망체 가나초콜릿체 Y클로버체 와구리체
- [무료 폰트 기능 및 폰트 추가](https://designbase.co.kr/notices/무료-폰트-기능-및-폰트-추가/) - 무료 폰트에 기능과 폰트를 추가했습니다. 앞으로 더 좋은 폰트를 찾게되면 추가해보겠습니다~! 그냥 무료라서 올리는 게 아니라 디자인에 충분히 활용할만큼 매력적인 폰트만 선별해서 올리고 있습니다.^^ 추가된 기능 폰트 명을 통한 검색 기능 카테고리 필터 기능 추가 (고딕, 명조, 손글씨체, 장식체, 픽셀체) 리스트 페이지에서 미리보기 텍스트와 폰트 사이즈 조절 가능 추가된 폰트 태백체 태백 은하수체 부크크고딕 평창평화체
- [컬러 팔레트 비주얼라이저 신규 기능 제작](https://designbase.co.kr/notices/컬러-팔레트-비주얼라이저-신규-기능-제작/) - 안녕하세요. 컬러 팔레트 비주얼라이저라는 신규 도구 페이지를 만들었습니다. 컬러 팔레트 비주얼라이저를 통해 다양한 컬러를 손쉽게 참고할 수 있습니다. 수많은 디자인 예시에 직접 컬러를 적용해보며, 빠르고 효율적으로 컬러의 느낌을 확인해보세요. 현재는 베타 버전으로 제작했으며 앞으로 다양한 컬러와 예시가 추가될 예정입니다.
- [반응형 웹 그리드 시스템 계산기 업데이트](https://designbase.co.kr/notices/반응형-웹-그리드-시스템-계산기-업데이트/) - 반응형 웹 그리드 시스템 계산기 UI 기능을 개선했습니다. UI 디자인 개선 CSS 코드뷰 기능 추가(Beta) 반응형 토글 기능 제거
- [그라데이션 생성기 업데이트](https://designbase.co.kr/notices/그라데이션-생성기-업데이트/) - 그라데이션 생성기 UI 기능을 개선했습니다. UI 디자인 개선 드래그 앤 드롭으로 순서 변경 추가
- [미드저니 강좌 업로드 시작](https://designbase.co.kr/notices/midjourney-tutorial-upload-beginning/) - 안녕하세요. 디자인베이스 운영자입니다. 드디어, 미드저니 강좌를 업로드합니다. 미드저니 강좌 커리큘럼 1-0. 미드저니 기초: 세팅부터 사용까지 1-01. 미드저니 소개 및 가입, 결제 미드저니란 무엇인가? 가입 절차 결제 방법 1-02. 디스코드 내 미드저니, 미드저니 웹사이트 살펴보기 디스코드에서 미드저니 사용하기 미드저니 웹사이트 탐색 1-03. 디스코드 개인서버 만들기 및 설정 개인 서버 생성 방법 서버 설정 및 관리 1-04.

## 카테고리

- [포토샵 입문](https://designbase.co.kr/category/photoshop_course/photoshop_basic/) - 포토샵 기초의 모든 것
- [포토샵 실전](https://designbase.co.kr/category/photoshop_course/photoshop_advanced/) - 스킬 UP을 위한 실전 모음집
- [포토샵](https://designbase.co.kr/category/photoshop_course/) - 기초부터 실무까지 쉽고 정확하게
- [포토샵 꿀팁](https://designbase.co.kr/category/photoshop_course/photoshop_tip/) - 모르면 손해! 소소한 포토샵 꿀팁 모음
- [스케치](https://designbase.co.kr/category/sketch_course/) - UI 디자이너가 알려주는 스케치 핵심
- [일러스트레이터](https://designbase.co.kr/category/illustrator_course/) - 따라하며 마스터하기
- [XD](https://designbase.co.kr/category/adobexd_course/) - 작업 능률 2배 오르는 UI/UX툴 배우기
- [웹 디자인](https://designbase.co.kr/category/webdesign_basic_course/) - 기초부터 탄탄히 배우는 웹
- [웹 코딩](https://designbase.co.kr/category/webcoding_basic_course/) - 디자이너를 위한 웹 코딩 강좌
- [방구석클래스](https://designbase.co.kr/category/room-corner-lecture/) - 다양한 주제로 폭넓게 배워갈 수 있도록 만든 섹션
- [일러스트레이터 입문](https://designbase.co.kr/category/illustrator_course/illustrator-basic/) - 기초부터 튼튼하게 쌓는 입문 강좌
- [일러스트레이터 실전](https://designbase.co.kr/category/illustrator_course/illustrator-advanced/) - 일러스트레이터 마스터 실전 예제
- [프로토파이](https://designbase.co.kr/category/protopie-course/) - 프로토타이핑 기초부터 실전까지
- [Lottie](https://designbase.co.kr/category/lottie-course/) - 사용법부터 자유자재 응용까지
- [멤버십 전용](https://designbase.co.kr/category/membership/) - 멤버십 회원들만 볼 수 있는 고급 강좌 영상
- [피그마](https://designbase.co.kr/category/figma-course/) - UXUI 디자이너 필수 툴
- [제플린](https://designbase.co.kr/category/zeplin/) - 디자인 코드화 핸드오프 끝판왕
- [Three.js](https://designbase.co.kr/category/threejs-course/) - 웹에서 3D까지 자유롭게
- [워드프레스](https://designbase.co.kr/category/wordpress-course/) - 나만의 웹사이트 제작부터 운영까지
- [UXUI](https://designbase.co.kr/category/uxui-course/) - 기초부터 탄탄하게
- [애프터 이펙트](https://designbase.co.kr/category/after-effects-course/) - 움직임을 추가하는 마법
- [미드저니](https://designbase.co.kr/category/midjourney/) - 상상을 이미지로 구현하는 생성형 AI
- [크리에이티](https://designbase.co.kr/category/creatie/) - 차세대 AI 기반 UI 디자인 도구

## 태그

- [UI](https://designbase.co.kr/tag/ui/)
- [GUI](https://designbase.co.kr/tag/gui/)
- [UX](https://designbase.co.kr/tag/ux/)
- [Guide](https://designbase.co.kr/tag/guide/)
- [Instagram](https://designbase.co.kr/tag/instagram/)
- [Gradient](https://designbase.co.kr/tag/gradient/)
- [Color](https://designbase.co.kr/tag/color/)
- [컬러](https://designbase.co.kr/tag/컬러/)
- [그라데이션](https://designbase.co.kr/tag/그라데이션/)
- [AI](https://designbase.co.kr/tag/ai/)
- [서체](https://designbase.co.kr/tag/서체/)
- [폰트](https://designbase.co.kr/tag/폰트/)
- [인터페이스](https://designbase.co.kr/tag/인터페이스/)
- [색상모드](https://designbase.co.kr/tag/색상모드/)
- [CMYK](https://designbase.co.kr/tag/cmyk/)
- [RGB](https://designbase.co.kr/tag/rgb/)
- [해상도](https://designbase.co.kr/tag/해상도/)
- [Pixel](https://designbase.co.kr/tag/pixel/)
- [캔버스](https://designbase.co.kr/tag/캔버스/)
- [레이어](https://designbase.co.kr/tag/레이어/)
- [스마트오브젝트](https://designbase.co.kr/tag/스마트오브젝트/)
- [Layer](https://designbase.co.kr/tag/layer/)
- [Smartobject](https://designbase.co.kr/tag/smartobject/)
- [저장방식](https://designbase.co.kr/tag/저장방식/)
- [환경설정](https://designbase.co.kr/tag/환경설정/)
- [그리드](https://designbase.co.kr/tag/그리드/)
- [Grid](https://designbase.co.kr/tag/grid/)
- [이미지편집](https://designbase.co.kr/tag/이미지편집/)
- [선택툴](https://designbase.co.kr/tag/선택툴/)
- [그라디언트](https://designbase.co.kr/tag/그라디언트/)
- [보정](https://designbase.co.kr/tag/보정/)
- [톤보정](https://designbase.co.kr/tag/톤보정/)
- [Adjustments](https://designbase.co.kr/tag/adjustments/)
- [명암조정](https://designbase.co.kr/tag/명암조정/)
- [색상보정](https://designbase.co.kr/tag/색상보정/)
- [합성](https://designbase.co.kr/tag/합성/)
- [도장툴](https://designbase.co.kr/tag/도장툴/)
- [스탬프툴](https://designbase.co.kr/tag/스탬프툴/)
- [Clone Stamp Tool](https://designbase.co.kr/tag/clone-stamp-tool/)
- [힐링브러쉬](https://designbase.co.kr/tag/힐링브러쉬/)
- [얼굴보정](https://designbase.co.kr/tag/얼굴보정/)
- [잡티제거](https://designbase.co.kr/tag/잡티제거/)
- [사진보정](https://designbase.co.kr/tag/사진보정/)
- [블러](https://designbase.co.kr/tag/블러/)
- [샤픈](https://designbase.co.kr/tag/샤픈/)
- [번툴](https://designbase.co.kr/tag/번툴/)
- [닷지툴](https://designbase.co.kr/tag/닷지툴/)
- [인물보정](https://designbase.co.kr/tag/인물보정/)
- [꿀팁](https://designbase.co.kr/tag/꿀팁/)
- [실행취소](https://designbase.co.kr/tag/실행취소/)
- [재실행](https://designbase.co.kr/tag/재실행/)
- [히스토리](https://designbase.co.kr/tag/히스토리/)
- [정렬](https://designbase.co.kr/tag/정렬/)
- [Align](https://designbase.co.kr/tag/align/)
- [펜툴](https://designbase.co.kr/tag/펜툴/)
- [누끼](https://designbase.co.kr/tag/누끼/)
- [Pen Tool](https://designbase.co.kr/tag/pen-tool/)
- [크롭툴](https://designbase.co.kr/tag/크롭툴/)
- [Crop Tool](https://designbase.co.kr/tag/crop-tool/)
- [자르기](https://designbase.co.kr/tag/자르기/)
- [블렌딩모드](https://designbase.co.kr/tag/블렌딩모드/)
- [Blending Mode](https://designbase.co.kr/tag/blending-mode/)
- [레이어마스크](https://designbase.co.kr/tag/레이어마스크/)
- [Layer Mask](https://designbase.co.kr/tag/layer-mask/)
- [이중 노출 효과](https://designbase.co.kr/tag/이중-노출-효과/)
- [골드텍스트효과](https://designbase.co.kr/tag/골드텍스트효과/)
- [Gold Text Effect](https://designbase.co.kr/tag/gold-text-effect/)
- [그래픽디자인](https://designbase.co.kr/tag/그래픽디자인/)
- [Magdiel Lopez](https://designbase.co.kr/tag/magdiel-lopez/)
- [명함](https://designbase.co.kr/tag/명함/)
- [명함디자인](https://designbase.co.kr/tag/명함디자인/)
- [캐릭터](https://designbase.co.kr/tag/캐릭터/)
- [카카오프렌즈](https://designbase.co.kr/tag/카카오프렌즈/)
- [아이코닉](https://designbase.co.kr/tag/아이코닉/)
- [Graphic](https://designbase.co.kr/tag/graphic/)
- [모피질감](https://designbase.co.kr/tag/모피질감/)
- [털질감](https://designbase.co.kr/tag/털질감/)
- [3D](https://designbase.co.kr/tag/3d/)
- [블랜드툴](https://designbase.co.kr/tag/블랜드툴/)
- [배너](https://designbase.co.kr/tag/배너/)
- [배너디자인](https://designbase.co.kr/tag/배너디자인/)
- [로고](https://designbase.co.kr/tag/로고/)
- [앱디자인](https://designbase.co.kr/tag/앱디자인/)
- [웹디자인](https://designbase.co.kr/tag/웹디자인/)
- [dp](https://designbase.co.kr/tag/dp/)
- [iOS](https://designbase.co.kr/tag/ios/)
- [안드로이드](https://designbase.co.kr/tag/안드로이드/)
- [일러스트](https://designbase.co.kr/tag/일러스트/)
- [일러스트레이션](https://designbase.co.kr/tag/일러스트레이션/)
- [필터](https://designbase.co.kr/tag/필터/)
- [Cutout](https://designbase.co.kr/tag/cutout/)
- [반응형웹](https://designbase.co.kr/tag/반응형웹/)
- [패턴](https://designbase.co.kr/tag/패턴/)
- [패턴만들기](https://designbase.co.kr/tag/패턴만들기/)
- [이모티콘](https://designbase.co.kr/tag/이모티콘/)
- [움직이는이모티콘](https://designbase.co.kr/tag/움직이는이모티콘/)
- [스케치심볼](https://designbase.co.kr/tag/스케치심볼/)
- [GIF](https://designbase.co.kr/tag/gif/)
- [스타일가이드](https://designbase.co.kr/tag/스타일가이드/)
- [Text Style](https://designbase.co.kr/tag/text-style/)
- [Layer Style](https://designbase.co.kr/tag/layer-style/)
- [리사이징](https://designbase.co.kr/tag/리사이징/)
- [Resizing](https://designbase.co.kr/tag/resizing/)
- [네온사인](https://designbase.co.kr/tag/네온사인/)
- [네온효과](https://designbase.co.kr/tag/네온효과/)
- [프로토타이핑](https://designbase.co.kr/tag/프로토타이핑/)
- [프로토타입](https://designbase.co.kr/tag/프로토타입/)
- [스케치](https://designbase.co.kr/tag/스케치/)
- [스케치효과](https://designbase.co.kr/tag/스케치효과/)
- [손그림효과](https://designbase.co.kr/tag/손그림효과/)
- [포토샵 필터](https://designbase.co.kr/tag/포토샵-필터/)
- [포토샵 필터갤러리](https://designbase.co.kr/tag/포토샵-필터갤러리/)
- [아이소메트릭](https://designbase.co.kr/tag/아이소메트릭/)
- [isometric](https://designbase.co.kr/tag/isometric/)
- [Prototyping](https://designbase.co.kr/tag/prototyping/)
- [액체효과](https://designbase.co.kr/tag/액체효과/)
- [포스터](https://designbase.co.kr/tag/포스터/)
- [포토샵 이펙트](https://designbase.co.kr/tag/포토샵-이펙트/)
- [단축키](https://designbase.co.kr/tag/단축키/)
- [액션](https://designbase.co.kr/tag/액션/)
- [스케치60](https://designbase.co.kr/tag/스케치60/)
- [스케치 컴포넌트패널](https://designbase.co.kr/tag/스케치-컴포넌트패널/)
- [일러스트레이터](https://designbase.co.kr/tag/일러스트레이터/)
- [물결](https://designbase.co.kr/tag/물결/)
- [물결라인](https://designbase.co.kr/tag/물결라인/)
- [어도비XD강좌](https://designbase.co.kr/tag/어도비xd강좌/)
- [XD](https://designbase.co.kr/tag/xd/)
- [UI 단위](https://designbase.co.kr/tag/ui-단위/)
- [반복 그리드](https://designbase.co.kr/tag/반복-그리드/)
- [Repeat Grid](https://designbase.co.kr/tag/repeat-grid/)
- [수채화](https://designbase.co.kr/tag/수채화/)
- [수채화효과](https://designbase.co.kr/tag/수채화효과/)
- [포토샵](https://designbase.co.kr/tag/포토샵/)
- [제플린](https://designbase.co.kr/tag/제플린/)
- [Zeplin](https://designbase.co.kr/tag/zeplin/)
- [가이드라인](https://designbase.co.kr/tag/가이드라인/)
- [홀로그래픽](https://designbase.co.kr/tag/홀로그래픽/)
- [holographic](https://designbase.co.kr/tag/holographic/)
- [포토샵에서편집](https://designbase.co.kr/tag/포토샵에서편집/)
- [컴포넌트](https://designbase.co.kr/tag/컴포넌트/)
- [에셋](https://designbase.co.kr/tag/에셋/)
- [플러그인](https://designbase.co.kr/tag/플러그인/)
- [Rename it](https://designbase.co.kr/tag/rename-it/)
- [Sketch Measure](https://designbase.co.kr/tag/sketch-measure/)
- [Distributor](https://designbase.co.kr/tag/distributor/)
- [어도비 XD](https://designbase.co.kr/tag/어도비-xd/)
- [Sketch](https://designbase.co.kr/tag/sketch/)
- [코딩](https://designbase.co.kr/tag/코딩/)
- [상태](https://designbase.co.kr/tag/상태/)
- [텍스트효과](https://designbase.co.kr/tag/텍스트효과/)
- [웹디자인강좌](https://designbase.co.kr/tag/웹디자인강좌/)
- [웹용어](https://designbase.co.kr/tag/웹용어/)
- [웹요소](https://designbase.co.kr/tag/웹요소/)
- [웹구성요소](https://designbase.co.kr/tag/웹구성요소/)
- [애니마](https://designbase.co.kr/tag/애니마/)
- [Anima](https://designbase.co.kr/tag/anima/)
- [자동 애니메이트](https://designbase.co.kr/tag/자동-애니메이트/)
- [반응형크기조정](https://designbase.co.kr/tag/반응형크기조정/)
- [그리드시스템](https://designbase.co.kr/tag/그리드시스템/)
- [레이아웃](https://designbase.co.kr/tag/레이아웃/)
- [듀오톤](https://designbase.co.kr/tag/듀오톤/)
- [Duotone](https://designbase.co.kr/tag/duotone/)
- [Content aware](https://designbase.co.kr/tag/content-aware/)
- [지우기](https://designbase.co.kr/tag/지우기/)
- [Liquify](https://designbase.co.kr/tag/liquify/)
- [AEUX](https://designbase.co.kr/tag/aeux/)
- [에프터이펙트](https://designbase.co.kr/tag/에프터이펙트/)
- [모션](https://designbase.co.kr/tag/모션/)
- [와이어프레임](https://designbase.co.kr/tag/와이어프레임/)
- [게슈탈트이론](https://designbase.co.kr/tag/게슈탈트이론/)
- [웹코딩](https://designbase.co.kr/tag/웹코딩/)
- [웹코딩강좌](https://designbase.co.kr/tag/웹코딩강좌/)
- [HTML](https://designbase.co.kr/tag/html/)
- [CSS](https://designbase.co.kr/tag/css/)
- [VSCode](https://designbase.co.kr/tag/vscode/)
- [에디터툴](https://designbase.co.kr/tag/에디터툴/)
- [vscode설치](https://designbase.co.kr/tag/vscode설치/)
- [에셋작명](https://designbase.co.kr/tag/에셋작명/)
- [내보내기](https://designbase.co.kr/tag/내보내기/)
- [HTML문법](https://designbase.co.kr/tag/html문법/)
- [CSS문법](https://designbase.co.kr/tag/css문법/)
- [코드예제](https://designbase.co.kr/tag/코드예제/)
- [Display](https://designbase.co.kr/tag/display/)
- [캐스캐이딩](https://designbase.co.kr/tag/캐스캐이딩/)
- [부모와 자식](https://designbase.co.kr/tag/부모와-자식/)
- [Reset.css](https://designbase.co.kr/tag/reset-css/)
- [Normalize.css](https://designbase.co.kr/tag/normalize-css/)
- [방구석클래스](https://designbase.co.kr/tag/방구석클래스/)
- [웹사이트](https://designbase.co.kr/tag/웹사이트/)
- [윅스](https://designbase.co.kr/tag/윅스/)
- [웹빌더툴](https://designbase.co.kr/tag/웹빌더툴/)
- [웹플로우](https://designbase.co.kr/tag/웹플로우/)
- [박스모델](https://designbase.co.kr/tag/박스모델/)
- [box sizing](https://designbase.co.kr/tag/box-sizing/)
- [포지션](https://designbase.co.kr/tag/포지션/)
- [position](https://designbase.co.kr/tag/position/)
- [모바일웹](https://designbase.co.kr/tag/모바일웹/)
- [Z-index](https://designbase.co.kr/tag/z-index/)
- [스택](https://designbase.co.kr/tag/스택/)
- [패딩](https://designbase.co.kr/tag/패딩/)
- [레이어정리](https://designbase.co.kr/tag/레이어정리/)
- [Float](https://designbase.co.kr/tag/float/)
- [단위](https://designbase.co.kr/tag/단위/)
- [반응형](https://designbase.co.kr/tag/반응형/)
- [입문강좌](https://designbase.co.kr/tag/입문강좌/)
- [작업환경](https://designbase.co.kr/tag/작업환경/)
- [작업환경설정](https://designbase.co.kr/tag/작업환경설정/)
- [새 도큐먼트 만들기](https://designbase.co.kr/tag/새-도큐먼트-만들기/)
- [문서만들기](https://designbase.co.kr/tag/문서만들기/)
- [Background](https://designbase.co.kr/tag/background/)
- [배경이미지](https://designbase.co.kr/tag/배경이미지/)
- [프로토파이](https://designbase.co.kr/tag/프로토파이/)
- [protopie](https://designbase.co.kr/tag/protopie/)
- [핵심개념](https://designbase.co.kr/tag/핵심개념/)
- [로티](https://designbase.co.kr/tag/로티/)
- [lottie.js](https://designbase.co.kr/tag/lottie-js/)
- [lottie](https://designbase.co.kr/tag/lottie/)
- [툴바](https://designbase.co.kr/tag/툴바/)
- [환경세팅](https://designbase.co.kr/tag/환경세팅/)
- [설치](https://designbase.co.kr/tag/설치/)
- [코드분석](https://designbase.co.kr/tag/코드분석/)
- [코드정리](https://designbase.co.kr/tag/코드정리/)
- [js](https://designbase.co.kr/tag/js/)
- [예제](https://designbase.co.kr/tag/예제/)
- [aftereffect](https://designbase.co.kr/tag/aftereffect/)
- [import](https://designbase.co.kr/tag/import/)
- [스크롤](https://designbase.co.kr/tag/스크롤/)
- [페이징](https://designbase.co.kr/tag/페이징/)
- [scene](https://designbase.co.kr/tag/scene/)
- [input](https://designbase.co.kr/tag/input/)
- [property](https://designbase.co.kr/tag/property/)
- [변수](https://designbase.co.kr/tag/변수/)
- [variable](https://designbase.co.kr/tag/variable/)
- [함수](https://designbase.co.kr/tag/함수/)
- [토글버튼](https://designbase.co.kr/tag/토글버튼/)
- [조건](https://designbase.co.kr/tag/조건/)
- [range](https://designbase.co.kr/tag/range/)
- [chain](https://designbase.co.kr/tag/chain/)
- [공유](https://designbase.co.kr/tag/공유/)
- [tilt](https://designbase.co.kr/tag/tilt/)
- [기울기센서](https://designbase.co.kr/tag/기울기센서/)
- [sound](https://designbase.co.kr/tag/sound/)
- [소리센서](https://designbase.co.kr/tag/소리센서/)
- [진입애니메이션](https://designbase.co.kr/tag/진입애니메이션/)
- [Erase Tool](https://designbase.co.kr/tag/erase-tool/)
- [Scissors Tool](https://designbase.co.kr/tag/scissors-tool/)
- [네이버블로그](https://designbase.co.kr/tag/네이버블로그/)
- [홈페이지형](https://designbase.co.kr/tag/홈페이지형/)
- [웹폰트](https://designbase.co.kr/tag/웹폰트/)
- [구글폰트](https://designbase.co.kr/tag/구글폰트/)
- [목업 제작](https://designbase.co.kr/tag/목업-제작/)
- [Shear Tool](https://designbase.co.kr/tag/shear-tool/)
- [Reflect Tool](https://designbase.co.kr/tag/reflect-tool/)
- [Scale Tool](https://designbase.co.kr/tag/scale-tool/)
- [Rotate Tool](https://designbase.co.kr/tag/rotate-tool/)
- [실전강좌](https://designbase.co.kr/tag/실전강좌/)
- [등고선](https://designbase.co.kr/tag/등고선/)
- [애니메이션](https://designbase.co.kr/tag/애니메이션/)
- [Animation](https://designbase.co.kr/tag/animation/)
- [로그인 예제](https://designbase.co.kr/tag/로그인-예제/)
- [골드효과](https://designbase.co.kr/tag/골드효과/)
- [픽셀](https://designbase.co.kr/tag/픽셀/)
- [이미지사이즈](https://designbase.co.kr/tag/이미지사이즈/)
- [브러시](https://designbase.co.kr/tag/브러시/)
- [타이포그래피](https://designbase.co.kr/tag/타이포그래피/)
- [그레이디언트](https://designbase.co.kr/tag/그레이디언트/)
- [밝기조절](https://designbase.co.kr/tag/밝기조절/)
- [뒤로가기](https://designbase.co.kr/tag/뒤로가기/)
- [블렌드툴](https://designbase.co.kr/tag/블렌드툴/)
- [아트보드](https://designbase.co.kr/tag/아트보드/)
- [rulers](https://designbase.co.kr/tag/rulers/)
- [커스텀도형](https://designbase.co.kr/tag/커스텀도형/)
- [실루엣](https://designbase.co.kr/tag/실루엣/)
- [카드 ui 예제](https://designbase.co.kr/tag/카드-ui-예제/)
- [shape builder](https://designbase.co.kr/tag/shape-builder/)
- [패스파인더](https://designbase.co.kr/tag/패스파인더/)
- [시각보정](https://designbase.co.kr/tag/시각보정/)
- [구글로고](https://designbase.co.kr/tag/구글로고/)
- [닌텐도로고](https://designbase.co.kr/tag/닌텐도로고/)
- [커닝](https://designbase.co.kr/tag/커닝/)
- [시각디자인](https://designbase.co.kr/tag/시각디자인/)
- [장미꽃](https://designbase.co.kr/tag/장미꽃/)
- [장미그리기](https://designbase.co.kr/tag/장미그리기/)
- [스켈레톤ui](https://designbase.co.kr/tag/스켈레톤ui/)
- [미디어쿼리](https://designbase.co.kr/tag/미디어쿼리/)
- [Media Query](https://designbase.co.kr/tag/media-query/)
- [유튜브썸네일](https://designbase.co.kr/tag/유튜브썸네일/)
- [이미지활용](https://designbase.co.kr/tag/이미지활용/)
- [자바스크립트](https://designbase.co.kr/tag/자바스크립트/)
- [선두께조절](https://designbase.co.kr/tag/선두께조절/)
- [width tool](https://designbase.co.kr/tag/width-tool/)
- [심볼](https://designbase.co.kr/tag/심볼/)
- [Mask](https://designbase.co.kr/tag/mask/)
- [마스크](https://designbase.co.kr/tag/마스크/)
- [UIUX](https://designbase.co.kr/tag/uiux/)
- [피그마](https://designbase.co.kr/tag/피그마/)
- [Figma](https://designbase.co.kr/tag/figma/)
- [스타일](https://designbase.co.kr/tag/스타일/)
- [영상](https://designbase.co.kr/tag/영상/)
- [Video](https://designbase.co.kr/tag/video/)
- [Auto Layout](https://designbase.co.kr/tag/auto-layout/)
- [image trace](https://designbase.co.kr/tag/image-trace/)
- [Effect](https://designbase.co.kr/tag/effect/)
- [실시간 협업](https://designbase.co.kr/tag/실시간-협업/)
- [스크롤 인터렉션](https://designbase.co.kr/tag/스크롤-인터렉션/)
- [실습 예제](https://designbase.co.kr/tag/실습-예제/)
- [메타태그](https://designbase.co.kr/tag/메타태그/)
- [SEO](https://designbase.co.kr/tag/seo/)
- [마우스커서](https://designbase.co.kr/tag/마우스커서/)
- [파비콘](https://designbase.co.kr/tag/파비콘/)
- [Favicon](https://designbase.co.kr/tag/favicon/)
- [그림자효과](https://designbase.co.kr/tag/그림자효과/)
- [뉴모피즘](https://designbase.co.kr/tag/뉴모피즘/)
- [낙서효과](https://designbase.co.kr/tag/낙서효과/)
- [반짝이](https://designbase.co.kr/tag/반짝이/)
- [네잎클로버](https://designbase.co.kr/tag/네잎클로버/)
- [부트스트랩](https://designbase.co.kr/tag/부트스트랩/)
- [반복](https://designbase.co.kr/tag/반복/)
- [그래픽](https://designbase.co.kr/tag/그래픽/)
- [원형그라데이션](https://designbase.co.kr/tag/원형그라데이션/)
- [Adobe XD](https://designbase.co.kr/tag/adobe-xd/)
- [구성요소](https://designbase.co.kr/tag/구성요소/)
- [글래스모피즘](https://designbase.co.kr/tag/글래스모피즘/)
- [헤더](https://designbase.co.kr/tag/헤더/)
- [jQuery](https://designbase.co.kr/tag/jquery/)
- [Swiper](https://designbase.co.kr/tag/swiper/)
- [슬라이더](https://designbase.co.kr/tag/슬라이더/)
- [FTP](https://designbase.co.kr/tag/ftp/)
- [웹서버](https://designbase.co.kr/tag/웹서버/)
- [파일질라](https://designbase.co.kr/tag/파일질라/)
- [클론](https://designbase.co.kr/tag/클론/)
- [photoshop](https://designbase.co.kr/tag/photoshop/)
- [포토샵2022](https://designbase.co.kr/tag/포토샵2022/)
- [컬러모드](https://designbase.co.kr/tag/컬러모드/)
- [도큐먼트](https://designbase.co.kr/tag/도큐먼트/)
- [GA](https://designbase.co.kr/tag/ga/)
- [구글애널리틱스](https://designbase.co.kr/tag/구글애널리틱스/)
- [기본도형](https://designbase.co.kr/tag/기본도형/)
- [왜곡](https://designbase.co.kr/tag/왜곡/)
- [그레인효과](https://designbase.co.kr/tag/그레인효과/)
- [Grain](https://designbase.co.kr/tag/grain/)
- [Blend](https://designbase.co.kr/tag/blend/)
- [롱쉐도우](https://designbase.co.kr/tag/롱쉐도우/)
- [그림자](https://designbase.co.kr/tag/그림자/)
- [Repeat](https://designbase.co.kr/tag/repeat/)
- [무한루프슬라이더](https://designbase.co.kr/tag/무한루프슬라이더/)
- [Three.js](https://designbase.co.kr/tag/three-js/)
- [웹개발](https://designbase.co.kr/tag/웹개발/)
- [빛](https://designbase.co.kr/tag/빛/)
- [로티파일즈](https://designbase.co.kr/tag/로티파일즈/)
- [안개](https://designbase.co.kr/tag/안개/)
- [포트폴리오](https://designbase.co.kr/tag/포트폴리오/)
- [워드프레스](https://designbase.co.kr/tag/워드프레스/)
- [CMS](https://designbase.co.kr/tag/cms/)
- [mamp](https://designbase.co.kr/tag/mamp/)
- [vs code](https://designbase.co.kr/tag/vs-code/)
- [RGBELoader](https://designbase.co.kr/tag/rgbeloader/)
- [GLTFLoader](https://designbase.co.kr/tag/gltfloader/)
- [OBJLoader](https://designbase.co.kr/tag/objloader/)
- [GSAP](https://designbase.co.kr/tag/gsap/)
- [Raycaster](https://designbase.co.kr/tag/raycaster/)
- [프로퍼티](https://designbase.co.kr/tag/프로퍼티/)
- [어드민](https://designbase.co.kr/tag/어드민/)
- [ScrollTrigger](https://designbase.co.kr/tag/scrolltrigger/)
- [스크롤애니메이션](https://designbase.co.kr/tag/스크롤애니메이션/)
- [슬로우모션](https://designbase.co.kr/tag/슬로우모션/)
- [미디어](https://designbase.co.kr/tag/미디어/)
- [페이지](https://designbase.co.kr/tag/페이지/)
- [댓글](https://designbase.co.kr/tag/댓글/)
- [외모](https://designbase.co.kr/tag/외모/)
- [UXUI](https://designbase.co.kr/tag/uxui/)
- [테마](https://designbase.co.kr/tag/테마/)
- [테마설치](https://designbase.co.kr/tag/테마설치/)
- [위젯](https://designbase.co.kr/tag/위젯/)
- [메뉴](https://designbase.co.kr/tag/메뉴/)
- [헤더 메뉴](https://designbase.co.kr/tag/헤더-메뉴/)
- [플러그인 설치](https://designbase.co.kr/tag/플러그인-설치/)
- [추천 플러그인](https://designbase.co.kr/tag/추천-플러그인/)
- [사용자 메뉴](https://designbase.co.kr/tag/사용자-메뉴/)
- [도구 메뉴](https://designbase.co.kr/tag/도구-메뉴/)
- [설정 메뉴](https://designbase.co.kr/tag/설정-메뉴/)
- [중급](https://designbase.co.kr/tag/중급/)
- [구조파악](https://designbase.co.kr/tag/구조파악/)
- [PHP](https://designbase.co.kr/tag/php/)
- [템플릿](https://designbase.co.kr/tag/템플릿/)
- [hierarchy](https://designbase.co.kr/tag/hierarchy/)
- [숏코드](https://designbase.co.kr/tag/숏코드/)
- [이미지](https://designbase.co.kr/tag/이미지/)
- [scss](https://designbase.co.kr/tag/scss/)
- [sass](https://designbase.co.kr/tag/sass/)
- [a 태그](https://designbase.co.kr/tag/a-태그/)
- [스와이퍼](https://designbase.co.kr/tag/스와이퍼/)
- [cpt](https://designbase.co.kr/tag/cpt/)
- [커스텀 포스트 타입](https://designbase.co.kr/tag/커스텀-포스트-타입/)
- [고급](https://designbase.co.kr/tag/고급/)
- [내장 함수](https://designbase.co.kr/tag/내장-함수/)
- [조건문](https://designbase.co.kr/tag/조건문/)
- [반복문](https://designbase.co.kr/tag/반복문/)
- [배열](https://designbase.co.kr/tag/배열/)
- [아이콘](https://designbase.co.kr/tag/아이콘/)
- [커스텀 필드](https://designbase.co.kr/tag/커스텀-필드/)
- [wp query](https://designbase.co.kr/tag/wp-query/)
- [Custom post type](https://designbase.co.kr/tag/custom-post-type/)
- [if](https://designbase.co.kr/tag/if/)
- [썸존](https://designbase.co.kr/tag/썸존/)
- [터치 타깃](https://designbase.co.kr/tag/터치-타깃/)
- [제스처](https://designbase.co.kr/tag/제스처/)
- [내비게이션](https://designbase.co.kr/tag/내비게이션/)
- [사이드바](https://designbase.co.kr/tag/사이드바/)
- [브레드크럼](https://designbase.co.kr/tag/브레드크럼/)
- [breadcrumbs](https://designbase.co.kr/tag/breadcrumbs/)
- [인스타피드](https://designbase.co.kr/tag/인스타피드/)
- [instagram feed](https://designbase.co.kr/tag/instagram-feed/)
- [호스팅](https://designbase.co.kr/tag/호스팅/)
- [마이그레이션](https://designbase.co.kr/tag/마이그레이션/)
- [보안](https://designbase.co.kr/tag/보안/)
- [검색엔진최적화](https://designbase.co.kr/tag/검색엔진최적화/)
- [최적화](https://designbase.co.kr/tag/최적화/)
- [구글킷](https://designbase.co.kr/tag/구글킷/)
- [googleanalytics](https://designbase.co.kr/tag/googleanalytics/)
- [구글애드센스](https://designbase.co.kr/tag/구글애드센스/)
- [광고](https://designbase.co.kr/tag/광고/)
- [android](https://designbase.co.kr/tag/android/)
- [sp](https://designbase.co.kr/tag/sp/)
- [나인패치](https://designbase.co.kr/tag/나인패치/)
- [애펙](https://designbase.co.kr/tag/애펙/)
- [컴포지션](https://designbase.co.kr/tag/컴포지션/)
- [프레임레이트](https://designbase.co.kr/tag/프레임레이트/)
- [프레임](https://designbase.co.kr/tag/프레임/)
- [애프터이펙트](https://designbase.co.kr/tag/애프터이펙트/)
- [핵심 기능](https://designbase.co.kr/tag/핵심-기능/)
- [파티클](https://designbase.co.kr/tag/파티클/)
- [콘페티](https://designbase.co.kr/tag/콘페티/)
- [카메라](https://designbase.co.kr/tag/카메라/)
- [눈](https://designbase.co.kr/tag/눈/)
- [작명](https://designbase.co.kr/tag/작명/)
- [앱 런처 아이콘](https://designbase.co.kr/tag/앱-런처-아이콘/)
- [웨이브](https://designbase.co.kr/tag/웨이브/)
- [벌](https://designbase.co.kr/tag/벌/)
- [플레이스토어](https://designbase.co.kr/tag/플레이스토어/)
- [미리보기](https://designbase.co.kr/tag/미리보기/)
- [스크린샷](https://designbase.co.kr/tag/스크린샷/)
- [pt](https://designbase.co.kr/tag/pt/)
- [autoshrink](https://designbase.co.kr/tag/autoshrink/)
- [앱 아이콘](https://designbase.co.kr/tag/앱-아이콘/)
- [런처아이콘](https://designbase.co.kr/tag/런처아이콘/)
- [비타민](https://designbase.co.kr/tag/비타민/)
- [진통제](https://designbase.co.kr/tag/진통제/)
- [타깃](https://designbase.co.kr/tag/타깃/)
- [피터틸](https://designbase.co.kr/tag/피터틸/)
- [persona](https://designbase.co.kr/tag/persona/)
- [페르소나](https://designbase.co.kr/tag/페르소나/)
- [유저저니맵](https://designbase.co.kr/tag/유저저니맵/)
- [사용자여정지도](https://designbase.co.kr/tag/사용자여정지도/)
- [user journey map](https://designbase.co.kr/tag/user-journey-map/)
- [CRUD](https://designbase.co.kr/tag/crud/)
- [유저플로우](https://designbase.co.kr/tag/유저플로우/)
- [user flow](https://designbase.co.kr/tag/user-flow/)
- [플로우차트](https://designbase.co.kr/tag/플로우차트/)
- [wireframe](https://designbase.co.kr/tag/wireframe/)
- [멘탈 모델](https://designbase.co.kr/tag/멘탈-모델/)
- [어포던스](https://designbase.co.kr/tag/어포던스/)
- [게슈탈트](https://designbase.co.kr/tag/게슈탈트/)
- [게슈탈트 이론](https://designbase.co.kr/tag/게슈탈트-이론/)
- [인지심리학](https://designbase.co.kr/tag/인지심리학/)
- [제이콥의법칙](https://designbase.co.kr/tag/제이콥의법칙/)
- [피츠의법칙](https://designbase.co.kr/tag/피츠의법칙/)
- [밀러의법칙](https://designbase.co.kr/tag/밀러의법칙/)
- [폰레스토프효과](https://designbase.co.kr/tag/폰레스토프효과/)
- [힉의법칙](https://designbase.co.kr/tag/힉의법칙/)
- [포스텔의법칙](https://designbase.co.kr/tag/포스텔의법칙/)
- [목표그라데이션](https://designbase.co.kr/tag/목표그라데이션/)
- [피크엔드법칙](https://designbase.co.kr/tag/피크엔드법칙/)
- [도허티의 임계](https://designbase.co.kr/tag/도허티의-임계/)
- [파레토법칙](https://designbase.co.kr/tag/파레토법칙/)
- [미적 사용성 효과](https://designbase.co.kr/tag/미적-사용성-효과/)
- [인지편향](https://designbase.co.kr/tag/인지편향/)
- [확증편향](https://designbase.co.kr/tag/확증편향/)
- [직렬위치효과](https://designbase.co.kr/tag/직렬위치효과/)
- [기준점 편향](https://designbase.co.kr/tag/기준점-편향/)
- [권위에의 호소 편향](https://designbase.co.kr/tag/권위에의-호소-편향/)
- [허위합의효과](https://designbase.co.kr/tag/허위합의효과/)
- [밴드왜건효과](https://designbase.co.kr/tag/밴드왜건효과/)
- [생존자편향](https://designbase.co.kr/tag/생존자편향/)
- [데이터드리븐](https://designbase.co.kr/tag/데이터드리븐/)
- [data driven ux](https://designbase.co.kr/tag/data-driven-ux/)
- [글](https://designbase.co.kr/tag/글/)
- [계층](https://designbase.co.kr/tag/계층/)
- [미드저니](https://designbase.co.kr/tag/미드저니/)
- [Midjourney](https://designbase.co.kr/tag/midjourney/)
- [디스코드](https://designbase.co.kr/tag/디스코드/)
- [휴리스틱](https://designbase.co.kr/tag/휴리스틱/)
- [프롬프트](https://designbase.co.kr/tag/프롬프트/)
- [업스케일](https://designbase.co.kr/tag/업스케일/)
- [베리에이션](https://designbase.co.kr/tag/베리에이션/)
- [그라데이션 생성기](https://designbase.co.kr/tag/그라데이션-생성기/)
- [그리드 시스템 계산기](https://designbase.co.kr/tag/그리드-시스템-계산기/)
- [무료 폰트](https://designbase.co.kr/tag/무료-폰트/)
- [네거티브 프롬프트](https://designbase.co.kr/tag/네거티브-프롬프트/)
- [모델](https://designbase.co.kr/tag/모델/)
- [스타일라이즈](https://designbase.co.kr/tag/스타일라이즈/)
- [비율](https://designbase.co.kr/tag/비율/)
- [타일](https://designbase.co.kr/tag/타일/)
- [시드](https://designbase.co.kr/tag/시드/)
- [Seed](https://designbase.co.kr/tag/seed/)
- [Chaos](https://designbase.co.kr/tag/chaos/)
- [Weird](https://designbase.co.kr/tag/weird/)
- [줌아웃](https://designbase.co.kr/tag/줌아웃/)
- [Reframe](https://designbase.co.kr/tag/reframe/)
- [카메라 샷](https://designbase.co.kr/tag/카메라-샷/)
- [빛 표현](https://designbase.co.kr/tag/빛-표현/)
- [조명](https://designbase.co.kr/tag/조명/)
- [날씨](https://designbase.co.kr/tag/날씨/)
- [작가](https://designbase.co.kr/tag/작가/)
- [애니풍](https://designbase.co.kr/tag/애니풍/)
- [Niji](https://designbase.co.kr/tag/niji/)
- [그림체](https://designbase.co.kr/tag/그림체/)
- [놀링](https://designbase.co.kr/tag/놀링/)
- [Knolling](https://designbase.co.kr/tag/knolling/)
- [Logo](https://designbase.co.kr/tag/logo/)
- [아이소매트릭](https://designbase.co.kr/tag/아이소매트릭/)
- [스큐어모피즘](https://designbase.co.kr/tag/스큐어모피즘/)
- [목업](https://designbase.co.kr/tag/목업/)
- [Mock up](https://designbase.co.kr/tag/mock-up/)
- [제품 이미지](https://designbase.co.kr/tag/제품-이미지/)
- [인물 사진](https://designbase.co.kr/tag/인물-사진/)
- [섹션](https://designbase.co.kr/tag/섹션/)
- [레이아웃 그리드](https://designbase.co.kr/tag/레이아웃-그리드/)
- [그리드 시스템](https://designbase.co.kr/tag/그리드-시스템/)
- [코멘트](https://designbase.co.kr/tag/코멘트/)
- [멀티 에디팅](https://designbase.co.kr/tag/멀티-에디팅/)
- [일괄 변경](https://designbase.co.kr/tag/일괄-변경/)
- [핸드오프](https://designbase.co.kr/tag/핸드오프/)
- [Dev mode](https://designbase.co.kr/tag/dev-mode/)
- [개발](https://designbase.co.kr/tag/개발/)
- [Constraints](https://designbase.co.kr/tag/constraints/)
- [Components](https://designbase.co.kr/tag/components/)
- [Variables](https://designbase.co.kr/tag/variables/)
- [크리에이티](https://designbase.co.kr/tag/크리에이티/)
- [Creatie](https://designbase.co.kr/tag/creatie/)
- [모드](https://designbase.co.kr/tag/모드/)
- [다크모드](https://designbase.co.kr/tag/다크모드/)
- [Wizard](https://designbase.co.kr/tag/wizard/)
- [Magicon](https://designbase.co.kr/tag/magicon/)
- [Audit](https://designbase.co.kr/tag/audit/)
- [Style Guide](https://designbase.co.kr/tag/style-guide/)
- [Prototype](https://designbase.co.kr/tag/prototype/)
- [디자인시스템](https://designbase.co.kr/tag/디자인시스템/)
- [Design system](https://designbase.co.kr/tag/design-system/)
- [라이브러리](https://designbase.co.kr/tag/라이브러리/)
- [피그마 라이브러리](https://designbase.co.kr/tag/피그마-라이브러리/)
- [피그마 플러그인](https://designbase.co.kr/tag/피그마-플러그인/)
- [피그마 프로토타이핑](https://designbase.co.kr/tag/피그마-프로토타이핑/)
- [컬러시스템](https://designbase.co.kr/tag/컬러시스템/)
- [디자인 시스템 타이포그래피](https://designbase.co.kr/tag/디자인-시스템-타이포그래피/)
- [스페이싱](https://designbase.co.kr/tag/스페이싱/)
- [사이징](https://designbase.co.kr/tag/사이징/)
- [Swap library](https://designbase.co.kr/tag/swap-library/)
- [Noise](https://designbase.co.kr/tag/noise/)
- [Texture](https://designbase.co.kr/tag/texture/)
- [Liquid glass](https://designbase.co.kr/tag/liquid-glass/)
- [iOS26](https://designbase.co.kr/tag/ios26/)
- [Draw](https://designbase.co.kr/tag/draw/)
- [Dynamic Stroke](https://designbase.co.kr/tag/dynamic-stroke/)
- [콘텐츠](https://designbase.co.kr/tag/콘텐츠/)
- [Site](https://designbase.co.kr/tag/site/)
- [인터렉션](https://designbase.co.kr/tag/인터렉션/)
- [Interaction](https://designbase.co.kr/tag/interaction/)
- [Reveal](https://designbase.co.kr/tag/reveal/)
- [Scroll Parallax](https://designbase.co.kr/tag/scroll-parallax/)
- [노코드](https://designbase.co.kr/tag/노코드/)
- [웹빌더](https://designbase.co.kr/tag/웹빌더/)
- [Make](https://designbase.co.kr/tag/make/)
- [코드](https://designbase.co.kr/tag/코드/)
- [MCP](https://designbase.co.kr/tag/mcp/)
- [Cursor](https://designbase.co.kr/tag/cursor/)
- [API](https://designbase.co.kr/tag/api/)
- [Glass](https://designbase.co.kr/tag/glass/)
- [무드보드](https://designbase.co.kr/tag/무드보드/)
- [Moodboard](https://designbase.co.kr/tag/moodboard/)
- [Styles](https://designbase.co.kr/tag/styles/)
- [움직이는 영상](https://designbase.co.kr/tag/움직이는-영상/)
- [UX UI 디자인](https://designbase.co.kr/tag/ux-ui-디자인/)
- [웹사이트 제작](https://designbase.co.kr/tag/웹사이트-제작/)
- [디자인 프로세스](https://designbase.co.kr/tag/디자인-프로세스/)
- [웹사이트 기획](https://designbase.co.kr/tag/웹사이트-기획/)
- [디자인 핸드오프](https://designbase.co.kr/tag/디자인-핸드오프/)
- [반응형 웹](https://designbase.co.kr/tag/반응형-웹/)
- [모바일 퍼스트](https://designbase.co.kr/tag/모바일-퍼스트/)
- [적응형 웹](https://designbase.co.kr/tag/적응형-웹/)
- [데스크톱 퍼스트](https://designbase.co.kr/tag/데스크톱-퍼스트/)
- [브레이크포인트](https://designbase.co.kr/tag/브레이크포인트/)
- [모자이크](https://designbase.co.kr/tag/모자이크/)
- [효과](https://designbase.co.kr/tag/효과/)
- [포스터디자인](https://designbase.co.kr/tag/포스터디자인/)
- [실린더](https://designbase.co.kr/tag/실린더/)
- [Warp](https://designbase.co.kr/tag/warp/)
- [웹사이트 레이아웃](https://designbase.co.kr/tag/웹사이트-레이아웃/)
- [웹사이트 구조](https://designbase.co.kr/tag/웹사이트-구조/)
- [메인 콘텐츠](https://designbase.co.kr/tag/메인-콘텐츠/)
- [푸터](https://designbase.co.kr/tag/푸터/)
- [랜딩 페이지](https://designbase.co.kr/tag/랜딩-페이지/)
- [메인 섹션](https://designbase.co.kr/tag/메인-섹션/)
- [히어로 섹션](https://designbase.co.kr/tag/히어로-섹션/)
- [CTA](https://designbase.co.kr/tag/cta/)
- [콘텐츠 구성](https://designbase.co.kr/tag/콘텐츠-구성/)

## 디자인사전 카테고리

- [UI](https://designbase.co.kr/dictionary_categories/ui/)
- [UX](https://designbase.co.kr/dictionary_categories/ux/)
- [Android](https://designbase.co.kr/dictionary_categories/ui/android/)
- [iOS](https://designbase.co.kr/dictionary_categories/ui/ios/)
- [Web](https://designbase.co.kr/dictionary_categories/ui/web/)
- [디자인 방법론](https://designbase.co.kr/dictionary_categories/design-methodology/)
- [기타](https://designbase.co.kr/dictionary_categories/etc/)
- [마케팅](https://designbase.co.kr/dictionary_categories/marketing/)
- [개발](https://designbase.co.kr/dictionary_categories/development/)

## 그라데이션 카테고리

- [그레이](https://designbase.co.kr/gradient-category/gray/)
- [그린](https://designbase.co.kr/gradient-category/green/)
- [레드](https://designbase.co.kr/gradient-category/red/)
- [블루](https://designbase.co.kr/gradient-category/blue/)
- [민트](https://designbase.co.kr/gradient-category/mint/)
- [옐로우](https://designbase.co.kr/gradient-category/yellow/)
- [오렌지](https://designbase.co.kr/gradient-category/orange/)
- [퍼블](https://designbase.co.kr/gradient-category/purple/)
- [핑크](https://designbase.co.kr/gradient-category/pink/)

## Hue Categories

- [Warm](https://designbase.co.kr/color-rec-hue/warm/)
- [Cool](https://designbase.co.kr/color-rec-hue/cool/)
- [Red](https://designbase.co.kr/color-rec-hue/red/)
- [Orange](https://designbase.co.kr/color-rec-hue/orange/)
- [Yellow](https://designbase.co.kr/color-rec-hue/yellow/)
- [Green](https://designbase.co.kr/color-rec-hue/green/)
- [Cyan](https://designbase.co.kr/color-rec-hue/cyan/)
- [Blue](https://designbase.co.kr/color-rec-hue/blue/)
- [Violet](https://designbase.co.kr/color-rec-hue/violet/)
- [Magenta](https://designbase.co.kr/color-rec-hue/magenta/)

## Type Categories

- [Pastel](https://designbase.co.kr/color-rec-type/pastel/)
- [Deep](https://designbase.co.kr/color-rec-type/deep/)
- [Muted](https://designbase.co.kr/color-rec-type/muted/)
- [Rich](https://designbase.co.kr/color-rec-type/rich/)
- [Bright](https://designbase.co.kr/color-rec-type/bright/)

## 인터랙션 유형

- [Scroll](https://designbase.co.kr/interaction-type/scroll/)
- [Drag](https://designbase.co.kr/interaction-type/drag/)
- [Mouse Move](https://designbase.co.kr/interaction-type/mouse-move/)
- [Infinite](https://designbase.co.kr/interaction-type/infinite/)

## Freebies Categories

- [서식류](https://designbase.co.kr/freebies_categories/stationery/)
- [디바이스](https://designbase.co.kr/freebies_categories/devices/)
- [패키지](https://designbase.co.kr/freebies_categories/package/)
- [목업](https://designbase.co.kr/freebies_categories/mockup/)
- [아이템](https://designbase.co.kr/freebies_categories/item/) - 합성 혹은 목업에 같이 사용하기 좋은 아이템입니다.
- [UX/UI](https://designbase.co.kr/freebies_categories/uxui/)
- [그래픽](https://designbase.co.kr/freebies_categories/graphics/)
- [사인물](https://designbase.co.kr/freebies_categories/signs-billboards/)
- [아이콘](https://designbase.co.kr/freebies_categories/icon/)

## freefonts Categories

- [고딕](https://designbase.co.kr/freefonts_categories/gothic/)
- [명조](https://designbase.co.kr/freefonts_categories/myeongjo/)
- [손글씨체](https://designbase.co.kr/freefonts_categories/handwriting/)
- [장식체](https://designbase.co.kr/freefonts_categories/display/)
- [픽셀체](https://designbase.co.kr/freefonts_categories/pixel/)
- [코딩체](https://designbase.co.kr/freefonts_categories/monospace/)

## Magazine Categories

- [디자인스낵](https://designbase.co.kr/magazine_categories/design_snack/)
- [디자인터뷰](https://designbase.co.kr/magazine_categories/designterview/)
- [기업 소개](https://designbase.co.kr/magazine_categories/기업-소개/)
- [디자인사이트](https://designbase.co.kr/magazine_categories/designsight/)

## 디자인사전 태그

- [Google Optimize](https://designbase.co.kr/dictionary-tag/google-optimize/)
- [통계](https://designbase.co.kr/dictionary-tag/통계/)
- [클릭률](https://designbase.co.kr/dictionary-tag/클릭률/)
- [전환율](https://designbase.co.kr/dictionary-tag/전환율/)
- [접근성](https://designbase.co.kr/dictionary-tag/접근성/)
- [HTML](https://designbase.co.kr/dictionary-tag/html/)
- [AMP](https://designbase.co.kr/dictionary-tag/amp/)
- [개발](https://designbase.co.kr/dictionary-tag/개발/)
- [모바일](https://designbase.co.kr/dictionary-tag/모바일/)
- [컴포넌트](https://designbase.co.kr/dictionary-tag/컴포넌트/)
- [네비게이션](https://designbase.co.kr/dictionary-tag/네비게이션/)
- [CRUD](https://designbase.co.kr/dictionary-tag/crud/)
- [데이터베이스](https://designbase.co.kr/dictionary-tag/데이터베이스/)
- [CTA](https://designbase.co.kr/dictionary-tag/cta/)
- [버튼](https://designbase.co.kr/dictionary-tag/버튼/)
- [행동유도](https://designbase.co.kr/dictionary-tag/행동유도/)
- [마케팅](https://designbase.co.kr/dictionary-tag/마케팅/)
- [참여율](https://designbase.co.kr/dictionary-tag/참여율/)
- [dp](https://designbase.co.kr/dictionary-tag/dp/)
- [Android](https://designbase.co.kr/dictionary-tag/android/)
- [해상도](https://designbase.co.kr/dictionary-tag/해상도/)
- [Pixel](https://designbase.co.kr/dictionary-tag/pixel/)
- [PPI](https://designbase.co.kr/dictionary-tag/ppi/)
- [DPI](https://designbase.co.kr/dictionary-tag/dpi/)
- [패턴](https://designbase.co.kr/dictionary-tag/패턴/)
- [레이아웃](https://designbase.co.kr/dictionary-tag/레이아웃/)
- [F-패턴](https://designbase.co.kr/dictionary-tag/f-패턴/)
- [Z-패턴](https://designbase.co.kr/dictionary-tag/z-패턴/)
- [SEO](https://designbase.co.kr/dictionary-tag/seo/)
- [최적화](https://designbase.co.kr/dictionary-tag/최적화/)
- [PT](https://designbase.co.kr/dictionary-tag/pt/)
- [단위](https://designbase.co.kr/dictionary-tag/단위/)
- [SP](https://designbase.co.kr/dictionary-tag/sp/)
- [텍스트](https://designbase.co.kr/dictionary-tag/텍스트/)
- [데이터](https://designbase.co.kr/dictionary-tag/데이터/)
- [그래프](https://designbase.co.kr/dictionary-tag/그래프/)
- [차트](https://designbase.co.kr/dictionary-tag/차트/)
- [인포그래픽](https://designbase.co.kr/dictionary-tag/인포그래픽/)
- [개념 증명](https://designbase.co.kr/dictionary-tag/개념-증명/)
- [POC](https://designbase.co.kr/dictionary-tag/poc/)
- [테스트](https://designbase.co.kr/dictionary-tag/테스트/)
- [가설](https://designbase.co.kr/dictionary-tag/가설/)
- [아이디어](https://designbase.co.kr/dictionary-tag/아이디어/)
- [게슈탈트 이론](https://designbase.co.kr/dictionary-tag/게슈탈트-이론/)
- [인지](https://designbase.co.kr/dictionary-tag/인지/)
- [구글애널리틱스](https://designbase.co.kr/dictionary-tag/구글애널리틱스/)
- [성과](https://designbase.co.kr/dictionary-tag/성과/)
- [트래픽](https://designbase.co.kr/dictionary-tag/트래픽/)
- [분석](https://designbase.co.kr/dictionary-tag/분석/)
- [퍼널](https://designbase.co.kr/dictionary-tag/퍼널/)
- [구분](https://designbase.co.kr/dictionary-tag/구분/)
- [반응형](https://designbase.co.kr/dictionary-tag/반응형/)
- [브레이크 포인트](https://designbase.co.kr/dictionary-tag/브레이크-포인트/)
- [컬럼](https://designbase.co.kr/dictionary-tag/컬럼/)
- [거터](https://designbase.co.kr/dictionary-tag/거터/)
- [마진](https://designbase.co.kr/dictionary-tag/마진/)
- [재방문율](https://designbase.co.kr/dictionary-tag/재방문율/)
- [클릭율](https://designbase.co.kr/dictionary-tag/클릭율/)
- [A/B Test](https://designbase.co.kr/dictionary-tag/a-b-test/)
- [CRM](https://designbase.co.kr/dictionary-tag/crm/)
- [메뉴](https://designbase.co.kr/dictionary-tag/메뉴/)
- [헤더](https://designbase.co.kr/dictionary-tag/헤더/)
- [GNB](https://designbase.co.kr/dictionary-tag/gnb/)
- [LNB](https://designbase.co.kr/dictionary-tag/lnb/)
- [브레드크럼즈](https://designbase.co.kr/dictionary-tag/브레드크럼즈/)
- [히스토리 백](https://designbase.co.kr/dictionary-tag/히스토리-백/)
- [리드](https://designbase.co.kr/dictionary-tag/리드/)
- [넛지](https://designbase.co.kr/dictionary-tag/넛지/)
- [마이크로인터렉션](https://designbase.co.kr/dictionary-tag/마이크로인터렉션/)
- [툴팁](https://designbase.co.kr/dictionary-tag/툴팁/)
- [앱바](https://designbase.co.kr/dictionary-tag/앱바/)
- [네이티브 앱](https://designbase.co.kr/dictionary-tag/네이티브-앱/)
- [앱](https://designbase.co.kr/dictionary-tag/앱/)
- [하이브리드 앱](https://designbase.co.kr/dictionary-tag/하이브리드-앱/)
- [크로스플랫폼](https://designbase.co.kr/dictionary-tag/크로스플랫폼/)
- [iOS](https://designbase.co.kr/dictionary-tag/ios/)
- [다크모드](https://designbase.co.kr/dictionary-tag/다크모드/)
- [컬러](https://designbase.co.kr/dictionary-tag/컬러/)
- [스키마](https://designbase.co.kr/dictionary-tag/스키마/)
- [다이어로그](https://designbase.co.kr/dictionary-tag/다이어로그/)
- [모달](https://designbase.co.kr/dictionary-tag/모달/)
- [다크패턴](https://designbase.co.kr/dictionary-tag/다크패턴/)
- [UX](https://designbase.co.kr/dictionary-tag/ux/)
- [윤리](https://designbase.co.kr/dictionary-tag/윤리/)
- [방법론](https://designbase.co.kr/dictionary-tag/방법론/)
- [더블 다이아몬드](https://designbase.co.kr/dictionary-tag/더블-다이아몬드/)
- [프로세스](https://designbase.co.kr/dictionary-tag/프로세스/)
- [데이터 포맷](https://designbase.co.kr/dictionary-tag/데이터-포맷/)
- [데이트 피커](https://designbase.co.kr/dictionary-tag/데이트-피커/)
- [날짜](https://designbase.co.kr/dictionary-tag/날짜/)
- [도허티의 임계](https://designbase.co.kr/dictionary-tag/도허티의-임계/)
- [속도](https://designbase.co.kr/dictionary-tag/속도/)
- [스켈레톤 UI](https://designbase.co.kr/dictionary-tag/스켈레톤-ui/)
- [Lazy Loading](https://designbase.co.kr/dictionary-tag/lazy-loading/)
- [피드백](https://designbase.co.kr/dictionary-tag/피드백/)
- [드롭다운](https://designbase.co.kr/dictionary-tag/드롭다운/)
- [라디오 버튼](https://designbase.co.kr/dictionary-tag/라디오-버튼/)
- [체크박스](https://designbase.co.kr/dictionary-tag/체크박스/)
- [선택](https://designbase.co.kr/dictionary-tag/선택/)
- [애자일](https://designbase.co.kr/dictionary-tag/애자일/)
- [워터폴](https://designbase.co.kr/dictionary-tag/워터폴/)
- [스프린트](https://designbase.co.kr/dictionary-tag/스프린트/)
- [레이블](https://designbase.co.kr/dictionary-tag/레이블/)
- [인풋](https://designbase.co.kr/dictionary-tag/인풋/)
- [텍스트필드](https://designbase.co.kr/dictionary-tag/텍스트필드/)
- [유효성 검사](https://designbase.co.kr/dictionary-tag/유효성-검사/)
- [마크업](https://designbase.co.kr/dictionary-tag/마크업/)
- [퍼블리싱](https://designbase.co.kr/dictionary-tag/퍼블리싱/)
- [프론트엔드](https://designbase.co.kr/dictionary-tag/프론트엔드/)
- [js](https://designbase.co.kr/dictionary-tag/js/)
- [javascript](https://designbase.co.kr/dictionary-tag/javascript/)
- [코딩](https://designbase.co.kr/dictionary-tag/코딩/)
- [백엔드](https://designbase.co.kr/dictionary-tag/백엔드/)
- [서버](https://designbase.co.kr/dictionary-tag/서버/)
- [CSS](https://designbase.co.kr/dictionary-tag/css/)
- [React](https://designbase.co.kr/dictionary-tag/react/)
- [SQL](https://designbase.co.kr/dictionary-tag/sql/)
- [캐싱](https://designbase.co.kr/dictionary-tag/캐싱/)
- [DB](https://designbase.co.kr/dictionary-tag/db/)
- [백엔드 개발](https://designbase.co.kr/dictionary-tag/백엔드-개발/)
- [Node.js](https://designbase.co.kr/dictionary-tag/node-js/)
- [서버리스](https://designbase.co.kr/dictionary-tag/서버리스/)
- [CDN](https://designbase.co.kr/dictionary-tag/cdn/)
- [api](https://designbase.co.kr/dictionary-tag/api/)
- [프레임워크](https://designbase.co.kr/dictionary-tag/프레임워크/)
- [NoSQL](https://designbase.co.kr/dictionary-tag/nosql/)
- [클라우드](https://designbase.co.kr/dictionary-tag/클라우드/)
- [클라우드 컴퓨팅](https://designbase.co.kr/dictionary-tag/클라우드-컴퓨팅/)
- [토큰](https://designbase.co.kr/dictionary-tag/토큰/)
- [Json](https://designbase.co.kr/dictionary-tag/json/)
- [JWT](https://designbase.co.kr/dictionary-tag/jwt/)
- [OAuth](https://designbase.co.kr/dictionary-tag/oauth/)
- [CORS](https://designbase.co.kr/dictionary-tag/cors/)
- [보안](https://designbase.co.kr/dictionary-tag/보안/)
- [정책](https://designbase.co.kr/dictionary-tag/정책/)
- [UI](https://designbase.co.kr/dictionary-tag/ui/)
- [Loading](https://designbase.co.kr/dictionary-tag/loading/)
- [딥링크](https://designbase.co.kr/dictionary-tag/딥링크/)
- [캠페인](https://designbase.co.kr/dictionary-tag/캠페인/)
- [광고](https://designbase.co.kr/dictionary-tag/광고/)
- [랜딩페이지](https://designbase.co.kr/dictionary-tag/랜딩페이지/)
- [웹](https://designbase.co.kr/dictionary-tag/웹/)
- [홍보](https://designbase.co.kr/dictionary-tag/홍보/)
- [MVP](https://designbase.co.kr/dictionary-tag/mvp/)
- [서비스](https://designbase.co.kr/dictionary-tag/서비스/)
- [파레토](https://designbase.co.kr/dictionary-tag/파레토/)
- [비즈니스](https://designbase.co.kr/dictionary-tag/비즈니스/)
- [리엑트네이티브](https://designbase.co.kr/dictionary-tag/리엑트네이티브/)
- [플루터](https://designbase.co.kr/dictionary-tag/플루터/)
- [스크럼](https://designbase.co.kr/dictionary-tag/스크럼/)
- [런처아이콘](https://designbase.co.kr/dictionary-tag/런처아이콘/)
- [아이콘](https://designbase.co.kr/dictionary-tag/아이콘/)
- [브랜드](https://designbase.co.kr/dictionary-tag/브랜드/)
- [리스트](https://designbase.co.kr/dictionary-tag/리스트/)
- [카드](https://designbase.co.kr/dictionary-tag/카드/)
- [콘텐츠](https://designbase.co.kr/dictionary-tag/콘텐츠/)
- [Components](https://designbase.co.kr/dictionary-tag/components/)
- [인터렉션](https://designbase.co.kr/dictionary-tag/인터렉션/)
- [터치](https://designbase.co.kr/dictionary-tag/터치/)
- [콤보박스](https://designbase.co.kr/dictionary-tag/콤보박스/)
- [confirm](https://designbase.co.kr/dictionary-tag/confirm/)
- [모바일 퍼스트](https://designbase.co.kr/dictionary-tag/모바일-퍼스트/)
- [적응형](https://designbase.co.kr/dictionary-tag/적응형/)
- [미디어쿼리](https://designbase.co.kr/dictionary-tag/미디어쿼리/)
- [브레드크럼](https://designbase.co.kr/dictionary-tag/브레드크럼/)
- [계층구조](https://designbase.co.kr/dictionary-tag/계층구조/)
- [세그먼트 컨트롤](https://designbase.co.kr/dictionary-tag/세그먼트-컨트롤/)
- [탭](https://designbase.co.kr/dictionary-tag/탭/)
- [필터](https://designbase.co.kr/dictionary-tag/필터/)
- [옵션](https://designbase.co.kr/dictionary-tag/옵션/)
- [스낵바](https://designbase.co.kr/dictionary-tag/스낵바/)
- [토스트](https://designbase.co.kr/dictionary-tag/토스트/)
- [스켈레톤](https://designbase.co.kr/dictionary-tag/스켈레톤/)
- [Placeholder](https://designbase.co.kr/dictionary-tag/placeholder/)
- [로딩](https://designbase.co.kr/dictionary-tag/로딩/)
- [스타일가이드](https://designbase.co.kr/dictionary-tag/스타일가이드/)
- [컬러시스템](https://designbase.co.kr/dictionary-tag/컬러시스템/)
- [타이포그래피](https://designbase.co.kr/dictionary-tag/타이포그래피/)
- [스티키](https://designbase.co.kr/dictionary-tag/스티키/)
- [네비게이션 바](https://designbase.co.kr/dictionary-tag/네비게이션-바/)
- [슬라이더](https://designbase.co.kr/dictionary-tag/슬라이더/)
- [아이코노그래피](https://designbase.co.kr/dictionary-tag/아이코노그래피/)
- [액션시트](https://designbase.co.kr/dictionary-tag/액션시트/)
- [바텀시트](https://designbase.co.kr/dictionary-tag/바텀시트/)
- [오프라인 상태](https://designbase.co.kr/dictionary-tag/오프라인-상태/)
- [Empty States](https://designbase.co.kr/dictionary-tag/empty-states/)
- [States](https://designbase.co.kr/dictionary-tag/states/)
- [제스처](https://designbase.co.kr/dictionary-tag/제스처/)
- [상태](https://designbase.co.kr/dictionary-tag/상태/)
- [적응형 웹](https://designbase.co.kr/dictionary-tag/적응형-웹/)
- [반응형 웹](https://designbase.co.kr/dictionary-tag/반응형-웹/)
- [데이터 비주얼라이제이션](https://designbase.co.kr/dictionary-tag/데이터-비주얼라이제이션/)
- [칩](https://designbase.co.kr/dictionary-tag/칩/)
- [목록](https://designbase.co.kr/dictionary-tag/목록/)
- [캐로셀](https://designbase.co.kr/dictionary-tag/캐로셀/)
- [배색](https://designbase.co.kr/dictionary-tag/배색/)
- [콘택트 폼](https://designbase.co.kr/dictionary-tag/콘택트-폼/)
- [문의](https://designbase.co.kr/dictionary-tag/문의/)
- [자간](https://designbase.co.kr/dictionary-tag/자간/)
- [행간](https://designbase.co.kr/dictionary-tag/행간/)
- [탭바](https://designbase.co.kr/dictionary-tag/탭바/)
- [힌트](https://designbase.co.kr/dictionary-tag/힌트/)
- [트랜지션](https://designbase.co.kr/dictionary-tag/트랜지션/)
- [애니메이션](https://designbase.co.kr/dictionary-tag/애니메이션/)
- [테이블](https://designbase.co.kr/dictionary-tag/테이블/)
- [파비콘](https://designbase.co.kr/dictionary-tag/파비콘/)
- [북마크](https://designbase.co.kr/dictionary-tag/북마크/)
- [페이지네이션](https://designbase.co.kr/dictionary-tag/페이지네이션/)
- [더 보기](https://designbase.co.kr/dictionary-tag/더-보기/)
- [무한 스크롤](https://designbase.co.kr/dictionary-tag/무한-스크롤/)
- [푸터](https://designbase.co.kr/dictionary-tag/푸터/)
- [프로그래스바](https://designbase.co.kr/dictionary-tag/프로그래스바/)
- [프로토타이핑](https://designbase.co.kr/dictionary-tag/프로토타이핑/)
- [Lo-fi](https://designbase.co.kr/dictionary-tag/lo-fi/)
- [Hi-fi](https://designbase.co.kr/dictionary-tag/hi-fi/)
- [픽셀](https://designbase.co.kr/dictionary-tag/픽셀/)
- [디스플레이](https://designbase.co.kr/dictionary-tag/디스플레이/)
- [햄버거 메뉴](https://designbase.co.kr/dictionary-tag/햄버거-메뉴/)
- [드로월 메뉴](https://designbase.co.kr/dictionary-tag/드로월-메뉴/)
- [햅틱 디자인](https://designbase.co.kr/dictionary-tag/햅틱-디자인/)
- [진동](https://designbase.co.kr/dictionary-tag/진동/)
- [사운드](https://designbase.co.kr/dictionary-tag/사운드/)
- [사운드 디자인](https://designbase.co.kr/dictionary-tag/사운드-디자인/)
- [메가 메뉴](https://designbase.co.kr/dictionary-tag/메가-메뉴/)
- [레거시](https://designbase.co.kr/dictionary-tag/레거시/)
- [밀러의법칙](https://designbase.co.kr/dictionary-tag/밀러의법칙/)
- [청킹](https://designbase.co.kr/dictionary-tag/청킹/)
- [사용자 여정 지도](https://designbase.co.kr/dictionary-tag/사용자-여정-지도/)
- [기획](https://designbase.co.kr/dictionary-tag/기획/)
- [스크린 리더](https://designbase.co.kr/dictionary-tag/스크린-리더/)
- [웹 접근성](https://designbase.co.kr/dictionary-tag/웹-접근성/)
- [심미성](https://designbase.co.kr/dictionary-tag/심미성/)
- [사용성](https://designbase.co.kr/dictionary-tag/사용성/)
- [인지심리](https://designbase.co.kr/dictionary-tag/인지심리/)
- [앤드유저](https://designbase.co.kr/dictionary-tag/앤드유저/)
- [사용성 테스트](https://designbase.co.kr/dictionary-tag/사용성-테스트/)
- [어포던스](https://designbase.co.kr/dictionary-tag/어포던스/)
- [엣지케이스](https://designbase.co.kr/dictionary-tag/엣지케이스/)
- [온보딩](https://designbase.co.kr/dictionary-tag/온보딩/)
- [코너케이스](https://designbase.co.kr/dictionary-tag/코너케이스/)
- [경계값 테스트](https://designbase.co.kr/dictionary-tag/경계값-테스트/)
- [유니버설 디자인](https://designbase.co.kr/dictionary-tag/유니버설-디자인/)
- [인지심리학](https://designbase.co.kr/dictionary-tag/인지심리학/)
- [정보구조](https://designbase.co.kr/dictionary-tag/정보구조/)
- [I.A](https://designbase.co.kr/dictionary-tag/i-a/)
- [제이콥의 법칙](https://designbase.co.kr/dictionary-tag/제이콥의-법칙/)
- [컨버전스](https://designbase.co.kr/dictionary-tag/컨버전스/)
- [테슬러의 법칙](https://designbase.co.kr/dictionary-tag/테슬러의-법칙/)
- [페르소나](https://designbase.co.kr/dictionary-tag/페르소나/)
- [포스텔의 법칙](https://designbase.co.kr/dictionary-tag/포스텔의-법칙/)
- [벨리데이션](https://designbase.co.kr/dictionary-tag/벨리데이션/)
- [자동 완성](https://designbase.co.kr/dictionary-tag/자동-완성/)
- [폰 레스토프 효과](https://designbase.co.kr/dictionary-tag/폰-레스토프-효과/)
- [플로우차트](https://designbase.co.kr/dictionary-tag/플로우차트/)
- [힉의 법칙](https://designbase.co.kr/dictionary-tag/힉의-법칙/)
- [인지부하](https://designbase.co.kr/dictionary-tag/인지부하/)
- [피츠의 법칙](https://designbase.co.kr/dictionary-tag/피츠의-법칙/)
- [UTM](https://designbase.co.kr/dictionary-tag/utm/)
- [추적링크](https://designbase.co.kr/dictionary-tag/추적링크/)
- [디지털마케팅](https://designbase.co.kr/dictionary-tag/디지털마케팅/)
- [트래픽 분석](https://designbase.co.kr/dictionary-tag/트래픽-분석/)
- [URL](https://designbase.co.kr/dictionary-tag/url/)
- [LTR](https://designbase.co.kr/dictionary-tag/ltr/)
- [RTL](https://designbase.co.kr/dictionary-tag/rtl/)
- [텍스트 방향](https://designbase.co.kr/dictionary-tag/텍스트-방향/)
- [다국어 UI](https://designbase.co.kr/dictionary-tag/다국어-ui/)
- [국제화](https://designbase.co.kr/dictionary-tag/국제화/)
- [인터페이스](https://designbase.co.kr/dictionary-tag/인터페이스/)
- [Localization](https://designbase.co.kr/dictionary-tag/localization/)
- [i18n](https://designbase.co.kr/dictionary-tag/i18n/)
- [다국어](https://designbase.co.kr/dictionary-tag/다국어/)
- [디자인 토큰](https://designbase.co.kr/dictionary-tag/디자인-토큰/)
- [디자인 시스템](https://designbase.co.kr/dictionary-tag/디자인-시스템/)
- [변수](https://designbase.co.kr/dictionary-tag/변수/)
- [Style Dictionary](https://designbase.co.kr/dictionary-tag/style-dictionary/)

## Design Tool Categories

- [피그마 플러그인](https://designbase.co.kr/design_tool_categories/figma-plugin/)
- [온사이트 서비스](https://designbase.co.kr/design_tool_categories/on-site-services/)
- [라이브러리](https://designbase.co.kr/design_tool_categories/library/)

## 공지사항 카테고리

- [업데이트](https://designbase.co.kr/notice_categories/update/)
- [강좌 업로드](https://designbase.co.kr/notice_categories/tutorial-upload/)

## 북마크 카테고리

- [디자인 레퍼런스](https://designbase.co.kr/designerbookmark_categories/design-reference/)
- [UXUI 디자인](https://designbase.co.kr/designerbookmark_categories/uxui-design/)
- [그래픽 디자인](https://designbase.co.kr/designerbookmark_categories/graphic-design-inspiration/)
- [컬러](https://designbase.co.kr/designerbookmark_categories/color/)
- [웹 빌더 툴](https://designbase.co.kr/designerbookmark_categories/website-builder/)
- [디자인 툴](https://designbase.co.kr/designerbookmark_categories/design-tools/)
- [프로토타이핑](https://designbase.co.kr/designerbookmark_categories/prototype-tools/)
- [UX/UI](https://designbase.co.kr/designerbookmark_categories/uxui-design-tools/)
- [그래픽 디자인](https://designbase.co.kr/designerbookmark_categories/graphic-design-tools/)
- [이미지](https://designbase.co.kr/designerbookmark_categories/image/)
- [폰트](https://designbase.co.kr/designerbookmark_categories/font/)
- [그래픽](https://designbase.co.kr/designerbookmark_categories/graphic/)
- [아이콘](https://designbase.co.kr/designerbookmark_categories/icon-library/)
- [Mock up](https://designbase.co.kr/designerbookmark_categories/mock-up/)
- [국제 디자인 공모전](https://designbase.co.kr/designerbookmark_categories/international-design-competitions/)
- [국내 디자인 공모전](https://designbase.co.kr/designerbookmark_categories/domestic-design-competitions/)
- [코딩](https://designbase.co.kr/designerbookmark_categories/coding/)
- [기타](https://designbase.co.kr/designerbookmark_categories/useful/)
- [디자인시스템](https://designbase.co.kr/designerbookmark_categories/design-system/)
- [이미지 생성](https://designbase.co.kr/designerbookmark_categories/image-generator/)
- [음성](https://designbase.co.kr/designerbookmark_categories/voice/)
- [영상](https://designbase.co.kr/designerbookmark_categories/vidio-ai-tool/)
- [영상](https://designbase.co.kr/designerbookmark_categories/video/)
- [지식](https://designbase.co.kr/designerbookmark_categories/knowledge/)
- [Ai 개발 툴](https://designbase.co.kr/designerbookmark_categories/ai-dev-tools/)
- [마케팅](https://designbase.co.kr/designerbookmark_categories/marketing/)
- [기타](https://designbase.co.kr/designerbookmark_categories/etc/)
- [로고](https://designbase.co.kr/designerbookmark_categories/logo/)
- [플러그인](https://designbase.co.kr/designerbookmark_categories/plugin/)
- [영감](https://designbase.co.kr/designerbookmark_categories/inspiration/)
- [생성형 Ai](https://designbase.co.kr/designerbookmark_categories/ai-tools/)
- [지식 쌓기](https://designbase.co.kr/designerbookmark_categories/knowledge-building/)
- [도구](https://designbase.co.kr/designerbookmark_categories/tools/)
- [라이브러리](https://designbase.co.kr/designerbookmark_categories/library/)
- [정보](https://designbase.co.kr/designerbookmark_categories/information/)
- [마케팅 툴](https://designbase.co.kr/designerbookmark_categories/marketing-tools/)
- [노코드 툴](https://designbase.co.kr/designerbookmark_categories/nocode-tools/)
- [코드](https://designbase.co.kr/designerbookmark_categories/코드/)
- [핸드오프 & 코드 변환](https://designbase.co.kr/designerbookmark_categories/handoff-tools/)
- [디자인](https://designbase.co.kr/designerbookmark_categories/ai-design/)
- [영상](https://designbase.co.kr/designerbookmark_categories/video-reference/)
- [기타](https://designbase.co.kr/designerbookmark_categories/etc-tools/)