전체 글109 구글의 새로운 생성형 AI 툴 ‘위스크(Whisk)’ 구글이 최근 선보인 '위스크(Whisk)'는 이미지 생성을 위한 AI 도구입니다. 기존의 AI 이미지 생성 도구들과는 달리, 위스크는 복잡한 텍스트 설명 없이도 사용자가 원하는 이미지를 만들어낼 수 있습니다. 위스크 사용 및 작동 방식위스크는 사용자가 세 가지 유형의 이미지를 입력하는 것으로 시작합니다.1. 주제(Subject) : 생성할 이미지의 중심이 되는 대상 (예: 사람, 동물, 사물)2. 장면(Scene) : 배경이 될 이미지 (예: 숲, 도시, 해변)3. 스타일(Style) : 원하는 예술적 스타일 (예: 수채화, 애니메이션, 팝아트)사용자가 이 세 가지 이미지를 업로드하면, 위스크 AI가 이를 분석하고 조합하여 새로운 이미지를 생성합니다. 사용자가 원할 경우 '세부 조정' 기능으로 텍스트 .. 2025. 2. 17. 2025년 주목해야 할 UX/UI 디자인 트렌드 1. AI 기반 개인화 인터페이스 : AI-Driven Personalisation in UX/UIAI와 머신러닝 기술의 발전으로 사용자의 행동과 선호도를 실시간으로 분석하여 개인화된 인터페이스를 제공합니다. 이는 사용자 만족도를 높이고 참여도를 증가시킵니다. AI 기반 개인화 인터페이스는 사용자의 과거 행동, 검색 패턴, 구매 이력 등을 종합적으로 분석하여 각 개인에게 최적화된 콘텐츠와 기능을 제공합니다. 이를 통해 사용자는 더 직관적이고 효율적인 경험을 할 수 있으며, 기업은 고객 충성도와 전환율을 높일 수 있습니다.- 기업 사례:1. Microsoft Copilot은 사용자의 행동을 학습하여 더 스마트한 에이전트로 진화하고 있으며, 이는 곧 UI/UX 디자인의 표준이 될 것으로 예상됩니다.2. Am.. 2025. 1. 15. [Figma] 작업 효율을 높여줄 유용한 피그마 플러그인 2025년 1월 기준으로 가장 유용한 Figma 플러그인을 소개합니다!Figma의 플러그인들은 작업 효율을 크게 높여줍니다. 프로젝트의 특성과 개인의 작업 스타일에 맞는 플러그인을 사용해보세요.대부분의 플러그인이 무료로 제공되지만, 일부는 프리미엄 기능을 위해 유료 옵션을 제공합니다. 디자인 자산 관련 플러그인Unsplash고품질 무료 이미지를 쉽게 삽입할 수 있습니다. (무료)https://www.figma.com/community/plugin/738454987945972471/unsplash Iconify100,000개 이상의 아이콘을 제공하는 거대한 아이콘 라이브러리입니다. (무료)https://www.figma.com/community/plugin/735098390272716381/iconify .. 2025. 1. 8. [Framer] 프레이머 특장점과 활용 사례 Framer는 디자인부터 배포까지 웹사이트 제작 전 과정을 단일 플랫폼에서 해결하는 노코드 웹 빌더입니다. 피그마와 유사한 인터페이스로 디자이너와 개발자 모두에게 효율적인 협업 환경을 제공하면서도, 실제 동작하는 웹사이트를 코딩 없이 구현할 수 있는 것이 특징입니다. Framer 핵심 기능1. 디자인 & 프로토타이핑 - 피그마 파일 임포트 지원으로 기존 디자인 작업 연속성 유지- 드래그 앤 드롭으로 인터랙티브 애니메이션 구현 (스크롤 기반 효과, hover/click 상태 관리)- 반응형 디자인을 위한 그리드/스택 레이아웃 및 브레이크포인트 설정 + 출처 : https://www.framer.com/features/design/ Web Design Tools in FramerCreate stunning.. 2024. 12. 28. [Figma] Component & Variants 1. Component컴포넌트는 재사용이 가능한 디자인 요소입니다. 버튼, 카드, 아이콘 등 자주 사용되는 UI 요소를 한 번 만들어 여러 곳에서 사용할 수 있어 작업에 효율적입니다.생성 방법① 컴포넌트로 만들 요소를 선택합니다.② 단축키 또는 우측 패널에서 "Create Component" 버튼을 클릭하면 선택했던 요소가 컴포넌트로 변환됩니다.단축키 - Mac: ⌥ Option + ⌘ Command + K- Windows: Ctrl + Alt + K컴포넌트 사용 및 복제 방법 - Assets 패널: 좌측 패널에서 Assets 탭을 클릭하여 컴포넌트를 찾고, 드래그 앤 드롭으로 디자인에 배치합니다.- Resource 툴 (Shift + I): 툴바의 Resource를 사용하여 컴포넌트를 선택하면 캔버스에.. 2024. 7. 19. [Figma] Figma Slides Config 2024에서 발표된 새로운 기능 중 하나인 Figma Slides에 대해 알아보자. https://www.figma.com/ko-kr/slides/"Figma Slides는 Figma Design의 강력한 기능과 정확성을 사용하기 쉬운 프레젠테이션 도구와 결합하여 내러티브(서사)에 생기를 불어넣는 동시에 일관성을 향상시켜 줍니다." 1. 왜 만들었나? 디자이너와 팀원을 위한 프레젠테이션 도구로 활용하도록 만들었다.하지만 누구든 역할이나 디자인 경험 수준에 관계없이 Figma Slides를 사용하면 퀄리티 있는 슬라이드 구조를 쉽게 만들 수있다. 피그마를 사용하면서도 프리젠테이션 자료 제작이 필요할 때 바로 활용할 수 있어 유용하다. 2. Figma Slides 왜 사용할까? 템플릿을 선.. 2024. 7. 5. [Figma] UX/UI Prototyping : 피그마에서 스와이프 인터랙션 구현하기 1-1. 페이지 스와이프페이지 스와이프 인터랙션은 사용자가 화면을 좌우로 스와이프하여 페이지나 콘텐츠를 이동하는 것을 의미합니다. 피그마에서는 다음과 같은 방법으로 구현할 수 있습니다.① 프레임 생성: 각 페이지를 나타내는 프레임을 생성합니다.② 프로토타입 설정: 프로토타입 탭에서 각 프레임을 연결합니다.③ 트리거 설정: "On drag" 트리거를 사용하여 스와이프 방향에 따라 다음 프레임으로 이동하도록 설정합니다.④ 스마트 애니메이션 적용: 부드러운 전환을 위해 스마트 애니메이션을 활성화합니다. 1-2. 텍스트 패럴랙스 이펙트스와이프할 때 텍스트가 다른 속도로 이동하는 효과를 구현합니다.① 거리 이동 및 수치 설정: 각 텍스트 레이어의 이동 거리를 다르게 설정합니다. 예: 첫 번째 프레임의 텍스.. 2024. 6. 11. Prototyping Tools : Figma vs ProtoPie 프로토파이(ProtoPie)와 피그마(Figma)는 디자인 작업에 사용되는 툴이지만, 각각의 강점이 다릅니다. 이 둘의 차이를 알아봅시다.피그마 (Figma)피그마는 주로 UI 디자인을 만드는 데 사용됩니다. 마치 디지털 스케치북처럼 생각하면 됩니다.피그마의 장점:- 앱이나 웹사이트의 화면을 그리는 데 최적화되어 있습니다.- 여러 사람이 동시에 작업할 수 있어 팀 프로젝트에 좋습니다.- 간단한 클릭 동작을 보여주는 프로토타입을 만들 수 있습니다.피그마 사용 예시:- 웹사이트 레이아웃 디자인- 앱 화면 디자인- 버튼을 클릭하면 다른 페이지로 이동하는 간단한 프로토타입 제작 프로토파이 (ProtoPie)프로토파이는 더 복잡하고 실제 같은 프로토타입을 만드는 데 특화되어 있습니다. 실제로 작동하는 앱이나 웹.. 2024. 6. 2. [ProtoPie] Improt : 디자인 파일 프로토파이에 불러오기 UXUI 디자인 작업물을 프로토파이로 불러오기 위해서는 디자인 툴에 프로토파이 플러그인을 설치하는 과정이 필요하다. 플러그인을 설치하면, 디자인 파일을 프로토파이에서 열어보록 하자. 1. 프로토파이 좌측 상단에 있는 Import 및 디자인 툴을 클릭하면 해당 사이트가 열린다. 2. 피그마, XD 등 해당 사이트 및 프로그램에 접속하여 프로토파이 플러그인을 설치한다. 완료! 이제 손쉽게 디자인 파일을 불러들일 수 있다. ** 사전 준비 및 유의 사항 - UXUI 디자인 툴(작업 파일)과 ProtoPie 툴 모두 열려 있어야 한다. - 디자인 파일 간에 디바이스 화면 사이즈가 동일해야 한다. (불러와서 수정 가능) 1. Figma : Export 창(우측 화면)을 띄우고 프로토파이로 가져갈 영역을 선택하여 .. 2024. 1. 31. IT 기업 및 스타트업 Tech 블로그 모음 주목할 만한 IT 기업과 스타트업들의 기술 블로그를 소개합니다. 기술 블로그를 통해 최신 개발 트렌드를 파악하고 개발 역량을 향상시키는 데 활용해보세요! 글로벌 기업Slack: https://slack.engineering실시간 협업 도구의 확장성 및 성능 최적화 기술을 다룹니다.Figma: https://www.figma.com/blog/engineering/웹 기반 디자인 도구의 실시간 협업 기술을 소개합니다.Google: https://developers.googleblog.com/검색 엔진 및 클라우드 서비스의 최신 기술 동향을 공유합니다.Facebook: https://engineering.fb.com/소셜 미디어 플랫폼의 대규모 데이터 처리 기술을 설명합니다.Netflix: https://n.. 2023. 9. 15. [CSS] Grid : CSS Layout CSS Layout : Flex와 Grid CSS layout에는 Flex와 Grid가 있다. CSS Flex와 Grid는 Container와 Item이라는 두 가지 개념으로 구분돼 있는데, Container는 Items를 감싸는 부모요소이고 그 안에 Item을 자유롭게 배치할 수 있다. Flex와 Grid의 차이는 중심축에 따른 레이아웃 시스템을 어떻게 제공하느냐에 있다. Flex는 row 또는 column으로 설정한 중심축에 따라 1차원적으로 아이템들을 배치할 수 있고 반면에 grid는 (row와 column) 2차원적으로 아이템들을 배치할 수 있다. 둘 다 훌륭하지만 비교적 좀 더 복잡한 레이아웃을 구현하기 위해 CSS Grid를 사용할 수 있다. 더보기 flexbox - container에 적용되.. 2022. 10. 2. UX 최적화를 위한 데이터 분석 도구 모음 UX 최적화를 위한 데이터 분석 도구를 서치해 봤습니다!분석 도구를 통해 정량적 데이터와 정성적 인사이트를 종합적으로 분석하고, 이를 바탕으로 UX 개선 방향을 도출할 수 있습니다. 각 도구의 특성을 고려하여 프로젝트의 목표와 규모에 맞는 도구를 선택하는 것이 중요합니다. 대부분의 도구가 무료 버전을 제공하므로, 유료 버전으로 업그레이드하기 전에 무료 버전을 먼저 사용해 보는 것이 좋겠습니다.Google Analytics (무료/유료)- 웹사이트 트래픽, 사용자 행동, 전환율 등 기본적인 웹 분석 지표 확인- 사용자 유입 경로, 이탈률, 세션 시간 등 파악- 머신러닝을 활용한 고급 인사이트 제공- https://marketingplatform.google.com/about/analytics/ 비즈니스를 .. 2022. 8. 22. UX 데이터 분석 관련 용어 UX 디자인에서 데이터 분석은 사용자 경험을 개선하는 데 중요한 역할을 합니다. UX 데이터 분석과 관련된 주요 용어를 정리해봅시다. 기본 지표PV (Page View) 정의: 페이지가 사용자에게 노출된 횟수측정 방법: 웹 분석 도구(예: Google Analytics)를 통해 자동으로 측정UV (Unique Visitor) 정의: 중복을 제거한 순 방문자 수측정 방법: 쿠키나 IP 주소를 통해 고유 사용자를 식별세션 (Session) 정의: 사용자가 웹사이트에 접속해서 이탈할 때까지의 일련의 행위측정 방법: 일정 시간(보통 30분) 동안의 연속적인 활동을 하나의 세션으로 간주체류 시간 정의: 사용자가 특정 페이지나 사이트에 머문 시간측정 방법: 페이지 진입 시간과 이탈 시간의 차이를 계산쿠키 (Co.. 2022. 6. 17. CSS의 새로운 기능 (2022 구글 I/O 주요 기능) 2022 구글 I/O 개발자 컨퍼런스에서 CSS(Cascading Style Sheets)의 새로운 기능을 발표했다. 새로운 CSS 기능 중에서도 주목할만한 Cascade layers, Viewport units, Container queries, acctent-color, acctent-contrast, color-mix, :has(), @nest, @scope 에 대해 알아보자. Cascade layers (브라우저 지원 : Chrome 99, Firefox 97, Edge 99, Safari 15.4) 구체적인 셀렉터나 선언된 순서 (아이디 또는 !important) 등으로 스타일을 덮어씌우면 유지보수가 어려워지는데, 이러한 문제를 해결하기 위해 나온 기능이다. Cascade layers 규칙을 적.. 2022. 6. 17. 픽셀과 DP px (pixel) 화면을 구성하는 기본 단위로, 스크린에 표현할 수 있는 가장 작은 점 하나라고 할 수 있다. 절대적 표시 단위라서 지정한 수치의 이상일 경우 깨져 보일 수 있다. dpi (dots per inch) 1인치에 들어가는 점들의 개수를 의미하며, 이를 dpi단위로 표현한다. 1인치 안에 72px가 들어가있다면 72dpi이다. 보통 웹이미지를 72dpi로, 인쇄물을 300dpi로 작업하는데 여기에서 '해상도(resolution)'라는 단어를 쓰게된다. 수치가 높을 수록 고해상도이므로 72dpi는 저해상도, 300dpi는 고해상도이다. dp (Density-independent Pixels) 밀도 독립적 픽셀이란 안드로이드 OS에서 정의한 논리적 픽셀이다. 기기의 밀도에 상관없이 물리적으로 거.. 2021. 10. 31. 이전 1 2 3 4 ··· 8 다음 반응형
