① 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” – 책 구절 불투명도는 물체를 통과하는 빛의 양으로 측정된다.불투명도가 낮은 물체는 더 많은 빛이 통과할 수 있으므로 더 ‘투명’해진다.물체가 단단할 수록=통과할 수 있는 빛이 적을 수록 불투명도가 높아진다.디자이너는 불투명도를 사용하여 디자인에 깊이감을 부여한다.두 개 이상의 표면이나 물체가 동시에 […]
AI 도구 사용의 범위를 파악하기 위해 AI를 최대한 사용해서 가상의 제품 프로토타입을 만들어보는 것을 목표로 작업을 진행 해보기로 했습니다. 이 프로젝트는 최대한 빠른 결과물을 만들어보기 위해서 사람의 검증 단계를 최소화 했습니다. 프로토타입 초안까지는 반나절정도 걸린 것 같네요.(사용 방법과 도구를 찾는 시간을 포함) 몇 번의 반복으로 이 프로세스가 익숙해지고 저만의 프롬프트가 정리되면 좀더 빠르게 정리할 수 […]
# 마크다운 파일을 HTML로 보여주기 이번 글은 이 글을 읽고 있는 페이지를 만든 방법에 대한 기록이다. 처음에는 티스토리 블로그 같은 것을 운영해볼까 했다가 여러가지 이유로 몇 년동안 시간만 쏟아부었던 기억이 있기에, 어차피 기록용이라면 포트폴리오 홈페이지에서 함께 보이도록 하는 것도 좋을 것 같았다. 그래서 깃허브 레포지토리 첫 화면에서 readme.md 파일의 내용이 표시되는 것처럼, 내가 만든 웹 […]
Sass 1. 전처리기 전처리기는 CSS를 작성할 때 사용하는 스크립팅 언어로, 개발자가 더 동적이고 효율적으로 스타일을 작성할 수 있도록 도와주는 도구이다. 화면 구현에서 CSS를 사용하고자 한다면 전처리기는 필수 선택. (1) CSS 전처리기는 다음과 같은 프로그래밍 언어의 기능을 CSS에 도입한다. (2) 가장 널리 사용되는 CSS 전처리기 (3) 작동 방식전처리기의 양식에 맞게 파일을 작성 → 실행 전에 처리 […]
책 <데이터가 한눈에 보이는 시각화>의 내용 부분 요약 1.시각화를 위해 필요한 데이터 데이터 시각화 차트는 로우 데이터의 변수를 특정한 기준으로 데이터를 조합하고 계산한 결과(통계)를 시각화 요소로 활용해 표현한 것이다. 여기서 ‘특정한 기준’은 로우 데이터의 수많은 변수 중 시각화 차트를 만드는 데 이용할 몇 개의 변수를 선택하는 것을 의미한다. 시각화 차트에 표현된 시각화 요소의 시각적 패턴은 […]
미디어 쿼리: 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술 문법: @media only all and (조건문) {실행문}@media: 미디어 쿼리 시작only: 미디어 쿼리 구문 해석 명령(생략 가능)all : 미디어 쿼리를 해석해야 할 대상(생략 가능) /*화면 너비가 1025px ~ 1280px일 때*/@media (max-width: 1280px){} /*화면 너비가 0 ~ 1024px일 때*/@media (max-width: 1024px){}… 많이 쓰는 breakpoint는 […]
1. 시각화 작업 순서(ref: 통계청 국가통계포털의 통계표 로우 데이터 정제) 2. 데이터 분석 데이터를 통해 알고 싶은 것이 무엇이냐에 따라 데이터 변수를 선택하는 기준이 달라진다. 로우 데이터의 변수명을 보고 데이터 안에 어떤 정보가 포함돼 있는지 파악하고 시각화 차트로 만들어서 찾고 싶은 인사이트가 무엇인지 생각한다. ex: 로우 데이터의 변수명을 보고 추론할 때 지역별 판매량이 알고 싶다면 범주형 변수인 […]
작성일: 2024-07-26 # 디자인 프로세스 정립을 위한 리서치 **목적:** 디자인 업무 프로세스의 정립을 위한 리서치 **내용:** 여러 방법론과 도구를 참고하여 과정을 정리하고, 그 내용을 현재 버전의 방화벽 제품에 적용해보는 테스트를 진행. **사용:** perplexity, 파이어플라이, Clarity 내부 제품을 사용하여 진행했던 작업이므로 블로그에는 실제 제품과 관련된 내용은 제외하고 작성하였습니다 — ‘듀얼 트랙 프로덕트 디자인’에 내용을 작성해보고, 디자인 실무에서의 유효성을 판단해보고자 […]