💡RESTREST(REpresentational State Transfer)는 소프트웨어 아키텍처 스타일 중 하나로, 자원을 이름으로 구분하고 해당 자원의 상태(정보)를 주고받는 통신 방식을 나타낸다. State는 웹 애플리케이션의 상태를, Transfer는 해당 상태의 전송 방식을 의미한다.네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이며, HTTP 프로토콜을 기반으로 하여 웹의 장점을 최대한 활용할 수 있다는 장점이 있다.REST는 반드시 Spring에서만 사용되는 건 아니며, 다양한 플랫폼 및 언어에서 활용될 수 있다. 📌REST의 구성 요소자원 (Resource)자원은 소프트웨어가 관리하는 모든 것을 나타내며, 각 자원은 고유한 식별자(ID)를 가진다. 이 식별자는 서버..
💡Auto layoutFigma에서는 Auto layout 기능을 통해 반응형 UI 디자인을 할 수 있다.Auto layout은 화면 크기가 바뀔 때 바뀌는 화면마다 UI 레이아웃을 조정할 필요가 없도록 자동 조정 옵션을 설정하도록 고안된 기능이다. 따라서 Auto layout 기능을 이용하면 UI/UX 디자인의 영역에서 다양한 화면 크기 및 콘텐츠 변경에 레이아웃이 대응하면서 디자인을 할 수 있다.콘텍스트 메뉴에서 Auto layout을 선택하거나 Shift + A 단축키를 입력하여 사용할 수 있다. 오토 레이아웃으로 설정하는 옵션1. 개체 크기적용할 개체를 선택하고 크기를 조정하면 Auto layout은 동적으로 개체의 크기를 조절하여 내부 콘텐츠에 자동으로 대응한다. 2. 정렬 및 방향가로 또는..
💡PrototypeFigma의 프로토타이핑 메뉴는 디자인을 화면상에서 실제 동작하는 프로토타입으로 변환하는 기능을 제공한다. 이를 통해 사용자 상호작용을 미리 시뮬레이션하고, 피드백을 할 수 있다. Device 항목 설정 시 주의사항프로토타입을 진행할 때 Device 항목을 선택하지 않으면 기본적으로 PC 기준으로 설정된다. 따라서 모바일 환경에서의 사용을 고려한다면, 프로토타입 시작 전에 디바이스를 선택하는 것이 좋다. 💡Prototype 기능 설명Interaction details Option터치 후 발생하는 이동 및 애니메이션 효과를 설정할 때 사용되는 기능이다.사용자와의 상호작용에 따라 화면 전환 및 효과를 정의하여 프로토타입을 더욱 동적으로 만들 수 있다.None: 어떤 액션도 선택하지 않은..
🔎Figma 커뮤니티플러그인과 위젯을 사용하면 Figma에서의 작업을 효율적으로 할 수 있으며, 다양한 도움을 받을 수 있다. FigmaExplore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers.www.figma.com 💡Annotation Sticky Notehttps://www.figma.com/community/widget/1125842729650935566 Annotation Sticky Notes | Figma CommunityThis widget is one of the sticky note widget..
Figma의 디자인 파일은 툴바, 사이드바, 스크롤이 가능한 캔버스로 구성되어 있다. 이 중에서 좌측 사이드바는 레이어와 페이지에 접근할 수 있게 해 준다. Pages, Layers, Assets 세 가지 헤딩은 좌측 사이드바에서 확인할 수 있다. 각 패널 간에 전환하면서 사용하면 된다.Ctrl + Shift + \ 단축키를 누르면 좌측 사이드 바 토글을 할 수 있으며, Alt + 1 단축키와 Alt + 2 단축키를 누르면 Layer와 Asset 패널을 이동하는 게 가능하다. Figma의 모든 UI를 끄려면 Ctrl + \ 단축키를 입력하면 된다. 💡페이지 (Pages)각 페이지는 자체 캔버스를 가지며 디자인을 탐색하고 수정할 수 있으며, 각 페이지에서 개별 프로토타입을 만들 수도 있다.페이지는 좌측 ..
💡Design Mode 메인 메뉴Figma 작업 화면에서 좌측 상단 Figma 로고 아래로 화살표를 클릭하면 메인 메뉴가 Drop Down 된다.Quick actions 메뉴는 작업하고 있는 파일 안에 들어 있는 기능을 찾아주는 검색 기능이다. Dev Mode 메인 메뉴Dev Mode로 전환한 뒤의 메인 메뉴는 Design Mode와 상이하므로 참고한다. 파일 불러오기메인 메뉴에서 Ctrl + Shift + K 단축키를 이용하여 Place image/video를 빠르게 할 수 있다.파일을 선택하면 마우스 커서 옆에 썸네일이 보이면서 화면 어디에 이미지를 위치할 것인지 보여준다.이미지를 삽입할 위치를 정하고 나면 Figma 파일 안에 이미지가 들어가게 되며, 좌측의 레이어 패널에서도 이미지 레이어가 추가..
💡Design Mode디자인 모드는 화면을 디자인하기에 최적화된 모드로, 다양한 UI 요소를 설계하고 비주얼 속성을 정의하는 데 특화되어 있다.컬러 값, 크기, 위치 등의 속성을 조정하여 레이아웃 디자인을 변경할 수 있으며, 추가적인 작업을 통해 고도화된 디자인을 만들 수 있다. 💡Dev Mode개발 모드는 디자인된 화면의 코드를 확인하는 데 특화되어 있다.Dev Mode를 통해 개발자들이 디자인을 확인하고 버튼의 위치, 글꼴 크기 등을 쉽게 확인할 수 있도록 지원하고 있다.Shift + D 단축키로 간편하게 Design Mode와 Dev Mode를 전환할 수 있다. Dev Mode 시작하기오른쪽 상단의 'Dev Mode' 버튼을 클릭한다. 그러면 Welcome to Deve Mode라는 글과 함께 ..
[Figma] 개발자 환경 구축: Figma 계정 생성 및 프로그램 설치💡Figma 환경 구축 https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.isaac-christian.tistory.comFigma를 설치하기 전이라면 위 글을 참고하여 계정을 생성하고, Figma를 설치하도록 한다. 💡페이지 알아보기프로젝트 팀 권한 Owner (Admi..
