*파이어플라이는 한글보다 영어 인식을 더 잘함*스타일 참조 이미지의 모양이나 굵기가 컴포지션 참조 이미지와 유사 해야 함*추상적인 이미지 = Firefly 3
① Entity(엔터티) / Object(객체) 제품(Product), 사용자(User) 같은 업무 단위의 데이터 덩어리.UI의 카드/리스트/상세 화면은 결국 엔터티를 어떻게 보여줄지에 대한 문제 ⸻ ② Field(필드) / Attribute(속성) 각 엔터티를 구성하는 데이터 항목.예: Product.name, Product.purchase_date, Product.warranty_months → 화면 정의서의 “필드 정의”가 여기에서 나옵니다. ⸻ ③ Primary Key(고유 ID) 리스트, 상세, 수정/삭제를 연결하는 핵심 키.→ UI에서 어떤 항목을 수정하는지 결정하는 […]
목적: 시니어 제품 프로젝트 리서치 내용: 시니어 제품에서 좀더 신경써야 될 UX 정리 참고자료: 1) 노년층을 위한 UX UI 디자인 가이드와 사례 2) 시니어 세대를 위한 모바일 UX 디자인 Tips 3) 시니어 사용자가 어려워하는 UX 5가지 4) 콘텐츠 서비스 시니어 모드 UI/UX 가이드라인 이번에 어르신을 대상으로 하는 제품 디자인에 참여하게 되어서 ‘시니어 세대를 위한 UX’를 […]
원문: https://marvelapp.com/blog/using-transparency-in-visual-design/ “It should be remembered that no substance is wholly transparent, and no material absolutely opaque” – 책 구절 불투명도는 물체를 통과하는 빛의 양으로 측정된다.불투명도가 낮은 물체는 더 많은 빛이 통과할 수 있으므로 더 ‘투명’해진다.물체가 단단할 수록=통과할 수 있는 빛이 적을 수록 불투명도가 높아진다.디자이너는 불투명도를 사용하여 디자인에 깊이감을 부여한다.두 개 이상의 표면이나 물체가 동시에 […]
Figma (prototype: smart animate)
제일 먼저 컬러 팔레트를 만들기 위해 Chat GPT, Gemini, Perplexity에 같은 내용을 작성해봤습니다.이전 글에서 정리했던 제품의 기본 설명과 메인 컬러를 말하고 컬러 팔레트와 WCAG 체크까지 요청 했습니다. 세 개의 LLM 모두 처음에 요청 했던 메인 컬러의 대비가 부족하다는 피드백이 있어서 명도를 낮춘 컬러 추천을 요청 해봤습니다. 처음 메인 컬러인 #59BA83은 산뜻한 중간 톤의 녹색 계열인데 […]
AI 도구 사용의 범위를 파악하기 위해 AI를 최대한 사용해서 가상의 제품 프로토타입을 만들어보는 것을 목표로 작업을 진행 해보기로 했습니다. 이 프로젝트는 최대한 빠른 결과물을 만들어보기 위해서 사람의 검증 단계를 최소화 했습니다. 프로토타입 초안까지는 반나절정도 걸린 것 같네요.(사용 방법과 도구를 찾는 시간을 포함) 몇 번의 반복으로 이 프로세스가 익숙해지고 저만의 프롬프트가 정리되면 좀더 빠르게 정리할 수 […]
로띠 적용 불가 요소: 블러, 쉐도우, 선, 질감 이미지그리고 레이어 이름, 속성, 위치까지 모두 일치 해야함 이렇게 Lottie에 맞추고 에러 원인을 찾아서 고치다보니 처음 작업했던 디자인과 조금 달라졌다(아래 이미지가 처음 디자인) 로띠가 json, gif 등 여러 방식으로 추출이 가능해서 좋긴한데 월 이용료가 너무 높아서 블로그에 올리는 용도로는 영상 녹화 방식(mov to webm)을 써야겠다 🙁 *3D […]
# 마크다운 파일을 HTML로 보여주기 이번 글은 이 글을 읽고 있는 페이지를 만든 방법에 대한 기록이다. 처음에는 티스토리 블로그 같은 것을 운영해볼까 했다가 여러가지 이유로 몇 년동안 시간만 쏟아부었던 기억이 있기에, 어차피 기록용이라면 포트폴리오 홈페이지에서 함께 보이도록 하는 것도 좋을 것 같았다. 그래서 깃허브 레포지토리 첫 화면에서 readme.md 파일의 내용이 표시되는 것처럼, 내가 만든 웹 […]
Sass 1. 전처리기 전처리기는 CSS를 작성할 때 사용하는 스크립팅 언어로, 개발자가 더 동적이고 효율적으로 스타일을 작성할 수 있도록 도와주는 도구이다. 화면 구현에서 CSS를 사용하고자 한다면 전처리기는 필수 선택. (1) CSS 전처리기는 다음과 같은 프로그래밍 언어의 기능을 CSS에 도입한다. (2) 가장 널리 사용되는 CSS 전처리기 (3) 작동 방식전처리기의 양식에 맞게 파일을 작성 → 실행 전에 처리 […]