분류 전체보기

[UXUI] 비즈니스 모델 용어 전부 알아보기 : B2B, B2C, SaaS 외 9가지

1. B2B (Business to Business) 기업 간 거래 기업 간 거래를 의미하는 용어로, 기업이 다른 기업에게 상품이나 서비스를 판매하는 모델입니다. B2B 거래는 일반적으로 대량 주문, 장기 계약, 맞춤형 서비스 등이 특징입니다. 예시 - 삼성전자 : 전세계의 다양한 기업들에 반도체 공급 2. B2C (Business to Consumer) 기업과 소비자 간 거래 B2C 모델에서는 기업이 최종 소비자에게 상품이나 서비스를 판매합니다. 이 기업은 제조업체일 수도 있고, 소매업체나 유통업체일 수도 있습니다. B2C 기업은 소비자에게 도달하기 위해 여러 유통 채널을 사용할 수 있습니다. 이는 온라인 스토어, 물리적 매장, 제3자 소매업체 등을 포함할 수 있습니다. 소비자의 개인적인 요구에 맞춘 ..

[UXUI] Google Lighthouse를 UI/UX 개선에 활용해보자

Google Lighthouse란? 혹시 이런 경험 있으신가요? 🙋‍♀️ 분명 내가 만든 웹사이트인데, 뭐가 문제인지 도통 모르겠다. 🙋‍♀️ 사용자들이 자꾸 느리다고 하는데, 어디를 손봐야 할지 막막하다. 🙋‍♀️ 열심히 만들었는데, 검색 엔진에서 잘 찾아주지 않는다. Lighthouse는 웹사이트의 성능, 접근성, SEO를 한 방에 해결해 주는 도구입니다. 웹 개발자와 UX/UI 디자이너라면 꼭 알아야 할 필수 도구죠. 페이지 로딩 속도는 물론, 사용자 경험, 접근성 문제까지 콕 집어냅니다. 게다가 검색 엔진 최적화(SEO)까지 도와준다니, UI 개선 정말 쉽죠? Lighthouse, 어떻게 사용할까? 1. Chrome DevTools를 통한 사용 Google Chrome 브라우저에서 원하는 웹 페이..

[UI] 2배수, 3배수 작업을 하는 이유: 피그마와 포토샵

UI 디자인에서 이미지와 그래픽의 해상도는 사용자 경험에 큰 영향을 미칩니다. 포토샵과 피그마와 같은 디자인 도구를 사용할 때, 2배수 또는 3배수로 작업하거나 export해야 한다는 말을 자주 듣게 되는데, 왜일까요? 포토샵에서 2배수, 3배수로 작업해야 하는 이유가 뭘까요? 포토샵에서 2배수 또는 3배수 작업을 하는 이유는 주로 고해상도 디스플레이를 지원하기 위해서입니다. 레티나 디스플레이와 같은 고해상도 디스플레이는 픽셀 밀도가 높아서 표준 해상도의 이미지가 작고 흐릿하게 보일 수 있습니다. 이를 방지하기 위해 원래 크기보다 큰 이미지를 사용하여 고해상도에서도 선명하게 보이도록 합니다. 예를 들어, 100x100 픽셀의 이미지를 200x200 픽셀(2배수) 또는 300x300 픽셀(3배수)로 제작하..

[UI] 디자이너가 알아야 할 필수 단위: SP, DP, DPI, PPI, PX, PT

디자이너가 알아야 할 필수 단위: SP, DP, DPI, PPI, PX, PT 디자인은 단순히 시각적 아름다움을 넘어서 사용자 경험과 밀접하게 연결되어 있습니다. 효과적인 디자인을 위해서는 다양한 단위와 개념을 정확히 이해하는 것이 중요합니다. 이 글에서는 SP, DP, DPI, PPI, PX, PT와 같은 핵심 단위들에 대해 알아보겠습니다. 1. SP (Scale Independent Pixels) 안드로이드 개발에서 사용되는 글꼴 크기 단위입니다. 사용자의 기기 설정에 따라 글꼴 크기가 조절되어, 접근성과 사용성을 높입니다. SP는 특히 안드로이드의 접근성 기능과 밀접하게 연관되어 있습니다. ex) 사용자의 시력 문제나 선호에 따라 글꼴 크기를 조정할 때 유용합니다. 2. DP (Density-ind..

타입스크립트 숙제 Part 2 (5~9) : 클래스, 오브젝트 타입지정

Car 클래스 만들기 { model : '소나타', price : 3000 } 이렇게 생긴 object를 복사해주는 class를 만들어야 한다. 그리고 복사된 object 자료들은 .tax() 라는 함수를 사용가능한데 현재 object에 저장된 price의 10분의1을 출력해주어야한다. model과 price 속성과 tax() 함수의 return 타입지정 하자. class Car { model: string; price: number; constructor(model: string, price: number) { this.model = model; this.price = price; } tax() :number{ return this.price / 10; } } const morning = new Car..

[코딩애플] 타입스크립트에서의 class : constructor, prototype 타입지정

타입스크립트에서 class의 constructor 사용하기 일반적인 JavaScript 클래스 및 객체 생성의 예시이다. // JavaScript class Candidate { constructor(personality, age, gender) { this.personality = personality; this.age = age; this.gender = gender; } } const candidate1 = new Candidate('good', 28, 'woman'); JavaScript에서는 타입 정보를 명시적으로 선언하지 않는다. 그렇게 때문에 위처럼만 표기해도 되지만, 타입스크립트에서는 각 속성과 매개변수에 타입지정을 해주어야 한다. // TypeScript class Candidate { ..