슾이 지은 고봉밥

UI/UX 설계에서 중요한 요소 중 하나는 바로 컴포넌트의 선택과 배치이다. 다양한 UI 컴포넌트들이 존재하지만, 그 중에서도 슬라이더(Slider)와 스크롤바(Scrollbar)는 컴포넌트 모양만으로 보았을 때 종종 혼동되는 경우가 많다. 두 컴포넌트는 비슷하게 보일 수 있지만, 그 사용 목적과 기능에서 큰 차이가 있다.  1. 슬라이더란?슬라이더는 사용자가 특정 범위 내에서 값을 선택하거나 조정할 수 있도록 돕는 UI 컴포넌트이다. 슬라이더는 보통 수치적이거나 양적인 값을 조정하는 데 사용되며, 사용자는 좌우로 움직이는 막대를 통해 값을 설정할 수 있다.슬라이더의 주요 특징:주로 숫자, 양, 시간 등의 값을 선택하거나 조정하는 데 사용된다.사용자가 범위 내에서 세밀하게 값을 조정할 수 있도록 돕는다...

AI가 발전하면서 기획자의 역할도 변화하고 있다. 예전에는 기획자가 서비스의 구조를 정의하고 요구사항을 정리하는 것이 주된 업무였다면, 앞으로는 AI를 활용한 데이터 분석, 자동화된 UI/UX 설계, 개인화된 서비스 기획이 중요해 질 것이다. 1. AI가 기획에 주는 영향데이터 기반 의사결정: AI가 사용자 데이터를 분석하여 인사이트를 제공함으로써, 기획자는 보다 근거 있는 의사결정을 내릴 수 있다.자동화된 UX/UI 설계: AI 기반 디자인 도구(예: Figma의 AI 기능, Midjourney, ChatGPT 등)를 활용하여 더 빠르고 효율적으로 화면을 구성할 수 있다.개인화된 서비스 기획: 추천 시스템, 챗봇, AI 기반 검색 기능 등을 통해 사용자 맞춤형 경험을 설계하는 것이 필수가 되고 있다 2..

오늘은 시니어 세대를 위한 모바일 UI/UX에 대해 짧게 적어보았다.현대 사회에서 스마트폰은 검색, 콘텐츠, 결제, 업무 등 일상생활의 필수적인 도구가 되어 사용되고 있다. 그 중 시니어 세대는 이에 맞춰 모바일 뿐만 아니라 키오스크 등 여러 화면을 통해 UI/UX를 접하고 있다.통계를 살펴보아도 60대 이상의 스마트폰 사용률이 급격히 증가하고 있으며, 이는 그들이 정보에 접근하고 소통하는 방식이 변화하고 있음을 보여준다. 하지만 이들은 여전히 기술에 대한 두려움과 어려움을 느끼고 있다. 사회 전반으로 청년층보다 노년층이 증가함에 따라 이러한 문제점들은 지속적으로 발생될 것이다.1. 시니어 사용자들의 어려움작은 글씨와 버튼 : 시력이 저하된 시니어들은 작은 글씨와 버튼을 읽고 누르기 어려워한다. 이외에도..

Auto Layout의 기능을 바로 습득하고 쓰기 전 항상 헷갈렸던 부분이 Fill container, Hug contents 설정이다.오늘은 이에 대한 내용을 적어보았다.  1. Fill container, Hug contents 설명위와 같은 버튼이 있다고 가정하고 이를 Auto Layout으로 적용한다고 가정하면이때 '휴대폰 인증' 이라는 텍스트 영역을 콘텐츠 라고 하고, 노란색 테두리에 대해서 이를 감싸고 있는 컨테이너 라고 한다.어떤 레이아웃이든 Auto Layout 설정 시 아래와 같은 추가 설정을 진행한다. 만약 Auto Layout을 설정 후 원하는 변화에 따라 아래와 같이 설정한다.1) Hug contents: 콘텐츠의 길이나 크기가 변할 때 컨테이너도 변하게 하고 싶을 때(ex. '휴대..

오늘은 간단히 Figma의 썸네일 등록 방법에 대해 소개한다.화면설계서 작성 시 아무 썸네일을 지정하지 않으면 아래와 같이 나오게 된다.이렇게 사용해도 상관없지만, 화면설계서 범위가 크거나 여러 종류의 문서가 많이 생성되는 경우 구분을 위해 썸네일 사용하는 것이 좋다.  썸네일 지정 방법썸네일로 지정하려면 원하는 화면의 오른쪽 마우스를 클릭해 'Set as thumbnail'을 선택하면 된다. 만약 프레임으로 지정되지 않아 해당 옵션이 나타나지 않는다면,아래와 같이 'Frame selection' 선택을 누르면 프레임으로 지정되어 썸네일로 지정할 수 있는 위의 옵션이 동일하게 나타나게 된다.  참고사항썸네일을 생성하면 하나의 썸네일로 통일하여 사용해도 좋지만 문서의 종류를 구분하는 것이 좋다.만약, 화면..

오늘은 기획자에게 유용한 피그마 플러그인 세번째 글이다.첫번째, 두번째 피그마 플러그인의 경우 아래 링크에서 확인할 수 있다.https://soupsrice.tistory.com/19 기획자에게 유용한 피그마 플러그인(1)피그마에는 유용하게 쓸 수 있는 플러그인이 많다. 굳이 구글 검색을 하지 않아도 바로 쓸 수 있는 아이콘, 무료 이미지 등 바로 찾고 적용할 수 있다. 알고 있는 몇 가지 플러그인들을 공유하려soupsrice.tistory.comhttps://soupsrice.tistory.com/20 기획자에게 유용한 피그마 플러그인(2)이번에는 업무와 관련된 플러그인 외 추가로 참고할만한, 이런 작업도 되는구나 싶은 플러그인들을 공유하려고 한다. 기획자도 사용할 수 있지만 디자인 작업에 더 유용하지..

베타 버전으로 공개된 피그마 슬라이드를 사용해 보았다.사용해 본 결과 기존에 사용하던 PPT를 대체하여 충분히 사용할 수 있을 것 같다.베타 버전으로 일단 2025년부터는 부분 무료/유료로 사용 가능하다고 안내되어있다.모든 기능보다는 주요 눈에 띄는 기능 위주로 소개하려고 한다.자세한 기능들은 현재 피그마 버전에서 아래와 같이 노출되고 있어 주요 기능을 확인하고 직접 사용해 보는 것을 추천한다.  1. 디자인된 다양한 템플릿 피그마 슬라이드를 처음 들어가게 되면 위와 같이 템플릿을 사용할 수 있다.가장 기본적인 텍스트 디자인부터 마케팅, 디자인 등 원하는 목적에 맞는 템플릿을 사용해 볼 수 있다.  아래 빨간 박스 부분의 select box를 누르면 파란색 박스와 같이 이미 디자인된 슬라이드를 볼 수 있..

이번에는 업무와 관련된 플러그인 외 추가로 참고할만한, 이런 작업도 되는구나 싶은 플러그인들을 공유하려고 한다. 기획자도 사용할 수 있지만 디자인 작업에 더 유용하지 않을까 싶다. 지난번에 소개한 UI/UX 관련 AI 서비스인 Galileo의 경우는 피그마에서 작업파일을 옮겨 사용할 수 있는데, Uizard의 경우는 피그마에서 해당 플러그인을 제공한다. 해당 플러그인은 본인이 설계한 화면을 Uizard로 내보낼 수 있는 기능을 제공한다. (내보내기한 후 Uizard의 Focus Predictor와 같은 기능을 사용해 보면 좋을 것 같다.)https://soupsrice.tistory.com/17 UI 디자인을 위한 생성형 AI 서비스(1) - Galileo AIAI 기술을 접목시키는 서비스가 계속해서 출..

피그마에는 유용하게 쓸 수 있는 플러그인이 많다.굳이 구글 검색을 하지 않아도 바로 쓸 수 있는 아이콘, 무료 이미지 등 바로 찾고 적용할 수 있다.알고 있는 몇 가지 플러그인들을 공유하려고 한다.  Iconify아이콘을 형태에 따라 나뉘어져 있어 원하는 디자인에 맞게 빠르게 찾아 적용할 수 있다.구글부터 아이콘 끝이 둥근형태, 뾰족한 형태 등등 여러 카테고리로 나뉘어져 있어 좋고, 태그를 통한 검색도 가능하다.https://www.figma.com/community/plugin/735098390272716381 Iconify | Figma CommunityImport Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and m..

PPT형식의 화면설계서(스토리보드)로 여전히 실무에서 많이 활용한다.요구사항을 기준으로 작성한 화면에 설명을 붙이려면 글의 양이 많아질 수 밖에 없어 PPT형식에 사용되는 양식은 PPT뿐만 아니라 Figma 등에도 동일한 구성으로 사용된다.직접 가독성 좋은 화면설계서를 만드는 것도 좋지만, 시간 상 이미 좋게 다듬어진 것을 찾아 수정 혹은 활용하는 것이 빠르다.그 중 Figma에 있는 커뮤니티를 사용해 좋은 화면설계서(스토리보드)양식을 활용하는 법을 공유하려고 한다. 왜 하필 Figma인지나의 개인적인 기준으로는 유료 PPT형식 템플릿을 찾거나, 굳이 그렇게 찾지 않아도 Figma의 커뮤니티를 사용하는 것이 빨랐다.그리고 PPT보다 가독성있게 만든 템플릿을 제작 혹은 활용하여 Figma를 사용해 팀 내 ..