전체 글24 [Figma] 반응형 웹 와이어프레임 만들기 피그마를 통해 반응형 웹 와이어프레임을 만들 때 설정해야 할 개념들에 대해 간단히 정리해 보았다. 피그마는 커뮤니티와 회사 유튜브를 통해 기능 튜토리얼이 매우 잘 설정되어 있기에 이를 잘 참고하면 좋다. 알아둬야 할 개념 1. Constraints 크기가 변경될 시, 어느 기준으로 고정이 될지를 설정할 수 있는 기능이다. 이 기능을 사용하여 반응형 웹의 윈도우 크기가 변해도, 요소가 중앙 정렬되어 있는 등 심리스한 연결을 돕는다. 2. Auto Layout 피그마에서 가장 유용한 도구 중 하나로, 제작자가 설정한 간격, 패딩 값을 유지하며 크기를 변경할 수 있다. 버튼, column list를 표현할 때 많이 사용되며 반응형 웹을 만들 때 매우 유용하다. 이전과 달리 값을 다 기억하고 외울 필요 없이 만.. 2023. 6. 6. 반응형 웹/모바일 현재 대부분의 접속이 모바일에서 이루어져 있기 때문에 모바일과 웹(PC)의 호환성과 빠른 구동은 매우 중요한 요소 중 하나이다. 이전에는 단순히 PC버전의 웹만 만들면 되었지만, 이제는 모바일 우선으로 작업을 하며 사용자가 PC와 모바일에서 동일한 경험을 할 수 있게 만들고 있다. Contents 1. 반응형 웹이란? 2. 반응형 웹 구현 방식 3. 반응형 웹 제작 순서 1. 반응형 웹이란? 반응형 웹은 말 그대로 화면(창) 크기에 따라 요소가 자연스럽게 변경된다. 사용자는 이에 따라 웹의 요소들을 불편함 없이 모두 감상할 수 있다. 이와 비슷한 개념으로 적응형 웹이 있다. 하지만 적응형 웹은 모바일 버전, PC 버전 이렇게 2가지로 나뉘어져 있고, 반응형 웹은 요소들이 % 값으로 구성되어 특정 너비에 .. 2023. 6. 5. 센서를 활용한 경험 비지니스 : 물류・운반 경험의 개선 영상 속 센서는 ToF(Time of Flight)로 3d 공간을 인식하는 센서 중 하나이다. 아이폰에 포함되어 있는 라이다 센서처럼 빛이 반사되어 돌아오는 시간을 측정하여 거리와 공간을 파악하는 기술로 AR 공간에 사용될 수 있다. 위 영상처럼 산업에서는 자율주행, 드론에 사용되는 것을 볼 수 있다. 라이프 : 운동 경험 측정의 고도화 스마트폰과 스마트 워치에는 다양한 센서가 탑재되어 있다. 가속도 센서는 걸음을 자이로 센서는 방향과 속도를 측정하여 사용자의 피트니스 경험을 측정하고 움직임을 독려한다. 손목에 밀착되어 있는 형태의 스마트 워치는 PPG 센서를 활용하여 심박수와 호흡을 측정한다. 이러한 헬스 케어 제품의 고도화는 단순히 라이프스타일의 변화만을 알리는 것.. 2023. 5. 31. 마이크로소프트 빌드 2023 24일 마이크로소프트는 개발자 컨퍼런스인 빌드 2023을 통해 차세대 인공지능과 디자인을 발표했다. 역시나 가장 돋보이며 중점을 뒀던 기술은 AI로 이와 관련된 코파일럿과 디자인을 선보였다. https://news.microsoft.com/build-2023/ Microsoft Build 2023 Microsoft Build 2023 Opening Keynote Watch the full keynote Keynote highlights Satya Nadella at Microsoft Build 2023 Yusuf Mehdi at Microsoft Build 2023 Announcing Windows Copilot Microsoft Fabric: Satya Nadella at Microsoft Build .. 2023. 5. 31. Apple의 인클루시브 디자인 6월 5일 Apple의 WWDC 23의 개최가 예정되어 있다. 이에 대한 예고편으로 Apple은 관련 MR기기와 사용성 개선 기능들을 선보이고 있다. Apple previews Live Speech, Personal Voice, and more new accessibility features Apple today previewed software features for cognitive, vision, hearing, and mobility accessibility, along with innovative tools for individuals who are nonspeaking or at risk of losing their ability to speak. www.apple.com AssistiveWa.. 2023. 5. 30. [마이크로 인터랙션] Protopie 프로토파이 : N26 따라한 모션은 클릭 한 번으로 전체 Visibility를 조절하는 것으로, 눈 모양의 아이콘을 선택하면 잔액과 입출금 내역을 숨길 수 있다. 이러한 설정 값은 다른 Flow(화면)으로 넘어갔을 때도, 적용되어 상세 페이지에서도 블러처리된 돈 내역을 확인할 수 있다. 이를 프로토파이에서 구현하기 위해 알아야하는 내용 1. 컴포넌트 설정 2. Variables 값 설정 3. Send & Receive 기능 우선 완성본이다 맨 위의 Current balance 옆에 있는 눈을 클릭하면 전체 내역에 블러 처리가 적용된다. 아쉬운 점은 피그마에서 프로토파이로 넘길 때 아이콘, 블러, 그라데이션 처리가 어긋나는 경우가 있어서 따로 조정해줘야 한다. 하지만 일단 모션 케이스 스터디가 중점이기에 너무 세부적인 부분은 .. 2023. 5. 29. 이전 1 2 3 4 다음
