슾이 지은 고봉밥

인하우스 서비스 기획 업무를 하다 보면 디자이너 없이 기획자가 화면을 빠르게 그려야 하는 상황이 자주 생긴다. 초기 기획 단계에서 빠르게 아이디어를 시각화해야 하거나, 디자이너 리소스를 확보하기 전 구조를 미리 정의해야 하는 경우가 그렇다.이때, 피그마(Figma)는 기획자에게도 충분히 활용 가능한 화면 설계 도구다. 별도의 설치 없이 웹에서 사용할 수 있고, 협업과 버전 관리에도 강점을 갖고 있어 실무에서 유용하다.이 글에서는 기획자가 피그마를 활용해 효율적으로 화면을 설계할 수 있는 실질적인 팁들을 정리하려고 한다.1. 템플릿이나 컴포넌트 없이, 기본 도형으로 시작하자화면 설계의 목적은 시각적으로 예쁜 디자인이 아니라, 화면의 구조와 기능 흐름을 정의하는 것이다. 따라서 기본 도형(Rectangle)..

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

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

Chat GPT는 자연어 처리 기반 AI 서비스로 알려져 있다.이와 비슷한 AI 서비스로 퍼블렉시티(Perplexity)를 소개하려고 한다. 퍼블렉시티(Perplexity)의 경우 Chat GPT의 자연어 처리 기반에 더해 검색 엔진 기능까지 포함된 생성형 AI라고 한다.해당 기업은 구글의 대항마로 높은 가치의 투자를 받아, 이미 기업 가치가 상당히 높아진 상태다.'검색 엔진 기능'이 포함됨에 따라 퍼블렉시티의 가치는 사용성과 편리함 측면에서도 확실히 가치가 높다고 생각한다.내가 입력한 정보에 따라 실시간 정보를 취합하여 정리해 알려주고, 신뢰 여부를 스스로 판단하기 때문에 직접 비교해 가면서 정보를 확인하는 수고를 덜어준다. (출처 표시까지 가능하다. 아래 내용 참고)보통 자연어 처리 기반 생성형 AI..

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

최근 인스타그램, 블로그와 같은 콘텐츠 노출 서비스의 게시글 사진을 보면 종종 AI가 사용된 이미지들이 보인다.AI 서비스가 생겨나고 발전하고 있는 만큼 이미지 생성 AI 서비스를 사용해 보려고 한다.오늘은 여러 이미지 생성 AI 서비스가 있지만 그 중 구글의 ImageFX라는 서비스를 소개한다.https://aitestkitchen.withgoogle.com/ko AI Test Kitchen평범함에서 벗어나 보세요 무엇이든 만들어 보세요aitestkitchen.withgoogle.com 1. ImageFX 구성 1) AI 결과 이미지 레이아웃 선택위의 화면과 같은 썸네일 방식 혹은 슬라이드(ex.인스타그램 게시글) 과 같은 형태 두 가지 중 선택이 가능하다. 오른쪽 큰 빨간 네모에 결과 이미지들이 보이..

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

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

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

구독 기능이 나온 이후 영상 뿐 아니라 다양한 분야의 콘텐츠에 구독 기능이 생겼다.직무와 관련된 여러 콘텐츠를 보는 것도 이제는 굳이 찾아보지 않아도 구독을 이용해 매일 발행되어 보거나, 원하는 콘텐츠만 골라 볼 수 있다.나는 좋은 정보를 무료로 보고 싶었다.그 중 구독 기능없이 여러 글을 보여주는 좋은 사이트를 소개하려고 한다. 서핏 - 매일 성장하는 사람들의 커리어 플랫폼https://www.surfit.io/ 서핏 - 매일 성장하는 사람들의 커리어 플랫폼새 탭에서 펼쳐지는 맞춤 커리어 콘텐츠. 매일 성장하고 더 멋지게 일하세요!www.surfit.io 다만 유료 커리어 관련 구독 서비스보다는 맞춤 최적화한 글들은 아니지만검색 기능을 활용하여 볼 수 있고 아이디어나 원하는 주제에 대해 탐색하고 참조하..