슾이 지은 고봉밥

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

최근 한 프로젝트를 수행하면서 생각했던 UX 라이팅 업무와 달랐던 점을 공유하려고 한다.이미 많은 온라인 상의 가이드, 아티클, 도서를 통해 UX 라이팅에 대한 중요성과 작성 방안이 소개된다.적용될 브랜드의 이미지와 서비스 이용자들에 맞게 서비스 용어 통일, 추구하는 말의 분위기, 해당 브랜드만의 문구 작성 가이드 등 기준을 세우고 지켜가야 한다. 생각했던 업무와 달리 들어가고 나서 아래와 같은 경우들이 있었다. 1. 모두 토스처럼 UX 라이팅에 대해 고민하지 않는다.담당 UX 라이터가 있었고 임원들 또한 해당 업무에 대한 보고를 받지만, 담당자 외 UX 라이팅에 대한 중요성이나 가이드라인을 살펴보지 않았다.회사에서는 본인에게 주어진 업무를 수행하는 것이 중요하다.그래서 서비스에 적용되는 UX 라이팅에 ..

베타 버전으로 공개된 피그마 슬라이드를 사용해 보았다.사용해 본 결과 기존에 사용하던 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..

Uizard는 생성형 AI 서비스로 명령어 입력 시 적절한 Ui를 제안해주는 서비스다.주요 기능은 명령어 입력을 기반으로 한 와이어프레임, ui 제안 뿐만 아니라 ai를 이용해 내가 설계한 화면의 히트맵 예측과 같은 설계 시 참고할 만한 기능들을 다수 제공하고 있다. 서비스 접속 및 로그인 시 아래와 같은 홈 화면을 볼 수 있다. 피그마처럼 다른 사용자가 올려놓은 템플릿을 이용할 수 있다. 주요 기능1) 검색을 이용한 쉽고 빠른 ui 생성위의 빨간색으로 표시한 검색창에 원하는 화면을 작성하고 클릭하면 오른쪽 작업 영역에 뿌려진다.검색 영역 밑에 보면 세분화된 검색 필터가 있어 이를 활용할 수 있다. (컴포넌트 생성 및 검색에도 유용해 보인다.) 2) 와이어프레임을 디자인된 샘플 화면으로 변경여기서 좋은 ..

AI 기술을 접목시키는 서비스가 계속해서 출시되고 있다.이미 Chat GPT처럼 AI기술을 UI/UX 업무에 활용하여 문서를 작성하거나, 업무 자동화에 적용하는 등 실무에 쓰이는 사례가 늘고 있다.Chat GPT 뿐만 아니라 Galileo, Uizard, Genius와 같은 UX 디자인에 적용할 수 있는 생성형 서비스에 대해 소개하려고 한다. 그 중 오늘은 Galileo AI를 소개한다. Galileo AI 인터페이스 디자인을 위한 생성형 AI 서비스다. 접속 시 아래와 같은 화면이 노출되며, 로그인 이후 사용 가능하다.https://www.usegalileo.ai/explore Galileo AIGalileo AI is a UI generation platform for easy and fast des..

정보처리기사 필기 합격했다.필기의 경우 CBT 시험 방식으로 답안 제출 후 합격(예정) 여부가 바로 보인다.제출 버튼 누르기 직전 굉장히 두근거렸다.. 거의 1년 만에 두근거린 듯 하다.  1. 정보처리기사 필기 사용 교재교재는 시나공 정보처리기사로 보았다.수제비와 많이 고민했지만, 시나공에는 각 제목 앞에 A, B, C, D와 같이 시험에 자주 출제되는 비율대로 표시를 해두었다.직장인이었기 때문에 시간이 부족할 수 있다 생각해 시나공을 선택했다.설명도 꽤 자세했고 무료 강의도 있었다. 공부하면서는 무료 강의 들을 시간조차 부족하다 생각해서 정말 모르겠는 부분은 검색 및 잘 정리된 글을 통해 이론을 바로 습득했다.좋은 점은 교재 뒷편에 최신 기출별 문제와 답, 해설까지 있어 따로 찾아볼 필요없이 책 구성..

뒤늦게 정보처리기사 자격증을 취득하기 위해 공부하고 있다. 모두 취득할때 미뤄두다가 점점 필요성을 깨달아 공부 중이다. 그 중 급 헷갈려서 찾아본 것을 정말 짧게 정리한다. b=++b/3 + c--이라는 식이 있다고 가정하자. (b=2, c=1) 전치(++b)는 b를 먼저 증가시킨 후 연산을 진행한다. 반면에, 후치(c--)는 모든 연산이 끝난 후 증가시킨다. 그러므로 b=2가 된다. c의 감소는 모든 연산이 끝난 후 결과가 나온 뒤 감소된다.

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