Depth(계층 구조) 적정 수준과 구조 설계
메뉴 및 정보 구조 설계 시, 사용자 경험(UX)를 고려한 적정 Depth(계층 구조)의 기준과 Depth가 깊어졌을 때 문제점과 해결 방안에 대해서 생각한 방법입니다. 특히 정보량이 많은 웹앱에 적합한 기준과 설계 방향에 대해서 생각했습니다. Depth란 무엇인가? ...
게슈탈트 이론으로 UI/UX 디자인 최적화하기
웹 개발과 디자인의 세계에서는 사용자의 경험을 향상시키는 것이 가장 중요합니다. 이를 위해 게슈탈트 이론은 매우 유용한 도구가 될 수 있습니다. 게슈탈트 이론의 주요 원칙을 살펴보고, 이를 웹 디자인에 어떻게 적용할 수 있는지에 대해 알아보겠습니다. 이러한 원칙들을 이...
Figma에서 버튼 클릭으로 페이지 및 섹션 이동 설정하는 방법
Figma에서 버튼을 클릭하여 페이지 간 이동하거나 페이지 내 특정 섹션으로 스크롤하는 방법을 알아보겠습니다. 1. 페이지 간 이동 설정 버튼 선택 : 페이지 또는 섹션으로 이동시키고 싶은 버튼을 선택합니다. 프로토타이핑 모드로 전환 : 오른쪽 상단의 Prototype...
Figma Dev Mode 활용
개발자 모드 사용법 개발자들은 Chrome의 F12 버튼을 통해 개발자 모드를 활성화하여 웹페이지의 개발 내용을 검사합니다. Figma의 개발자 모드 역시 유사한 기능을 제공하여, 디자인과 코드가 어떻게 연결되는지 직접 확인할 수 있습니다. 선택 및 디테일 그룹화된 객...
Figma Autolayout: 코딩의 Flex 개념을 가져온 유연한 레이아웃
Figma Autolayout은 코딩의 Flex 개념을 레이아웃 디자인에 효과적으로 적용하는 강력한 기능입니다. Flex는 Flexible(유연한)의 줄임말로, 요소들을 유연하게 배치하고 조절하는 개념을 의미합니다. 이 개념은 오토레이아웃에서도 중요한 역할을 합니다. ...
Figma에서의 "Space Between" 사용법
Figma에서 "Space Between"은 주로 자동 레이아웃 기능을 통해 사용됩니다. 이 기능은 여러 자식 요소들 사이에 공간을 자동으로 균일하게 배분하여 디자인의 일관성과 정돈된 레이아웃을 만드는 데 도움을 줍니다. 즉 Space Between 은 여러 자손 요소...
Figma Grid의 개념
Figma에서의 Grid는 세밀하고 체계적인 디자인 작업을 지원하는 도구 입니다. 이는 디자이너가 웹 또는 앱 인터페이스를 구축할 때 일관성과 정밀함을 유지할 수 있도록 돕습니다. 웹 디자인에서는 특히 컬럼 그리드 방식을 많이 사용하여, 정보와 요소들을 체계적으로 배열...
Figma 디자인 도구: 가이드 기능
우측 상단의 Design 파트에서 모서리 부분을 둥글게 만들 수 있는 기능이 존재합니다. 색상도 변경할 수 있습니다. (Fill이라는 부분에서 색상을 변경할 수 있습니다.) Figma는 디자이너들이 효율적으로 작업할 수 있도록 다양한 기능을 제공하는 디자인 툴입니다. ...
Figma에서 Frame 활용하기
Figma 프레임이란 무엇인가요? Figma에서 프레임은 디자인 작업의 기본 틀을 제공합니다. 프레임을 통해 각종 디자인 요소들을 정렬하고, 화면 사이즈에 맞게 조정할 수 있습니다. Frame 종류와 구현 순서 프레임은 다양한 디바이스와 화면 크기에 맞추어 제공됩니다....
Figma 필수 단축키 공부
기능 Windows 단축키 Mac 단축키 기능검색 [ Ctrl ] + [ / ] [ Cmd ] + [ / ] 오브젝트 복제 [ Ctrl ] + [ O ] [ Cmd ] + [ O ] 투명도 조절 숫자키 0~9(00~0%) 숫자키 0~9(00~0%) 그룹(Group) [...
UI와 UX의 중요성과 균형의 이해
UI와 UX는 뗄 수 없는 관계입니다. 따라서 이 두 지식의 균형을 잘 이뤄야 좋은 결과물을 만들 수 있습니다. UI란? User Interface (사용자 인터페이스) UI(User Interface, 사용자 인터페이스)와 UX(User Experience, 사용자 ...