IT 74

[Book Review]

도널드 노먼의 UX 디자인 특강 - YES24 UX의 창시자이자 인지과학의 대부 도널드 노먼이 복잡함과 단순함이라는 개념을 둘러싼 디자인의 쟁점과 해결책을 다루고 있으며, 전 세계 디자인, HCI 학자들이 추천하는 책에 꼭 들어가는 책이 www.yes24.com 아이디오는 '디자인 씽킹'을 실천하는 회사다. 디자인 씽킹이란 가장 먼저 진짜 문제가 무엇인지를 규정하는 것이다. 나는 이를 두고 "클라이언트가 해결해달라고 하는 문제는 절대로 해결하지 마라."고 바꾸어 말한다. 클라이언트는 증상에만 반응하기 때문이다. (중략) 현재 발생한 문제가 무엇인지, 그 중 정말로 해결되어야 하는 것이 무엇인지를 찾는 것이다. 우리는 이것을 '근본 원인 찾기'라고 부른다. 아이디오가 암트랙의 서비스 현황을 조사해보니, 탑..

IT/Programming 2021.10.03

OBS Studio를 이용한 Zoom/WebEx 웹앱 스트리밍

OBS Studio를 사용해서 웹앱을 Zoom/WebEx에 스트리밍하는 방법은 간단합니다. 무료 오픈소스 스트리밍 툴 OBS Studio를 설치한 뒤, Open Broadcaster Software | OBS 영상 녹화와 실시간 방송을 할 수 있는 무료 및 공개 소프트웨어입니다. 윈도우, 맥 혹은 리눅스 환경에서 빠르고 쉽게 방송 할 수 있습니다. obsproject.com 하단 메뉴 소스 목록에서 브라우저를 선택하고 URL을 입력합니다. 그리고 하단 메뉴 우측의 가상 카메라 시작하고 Zoom(혹은 WebEx)를 실행하면 OBS Virtual Camera가 새로 추가되어 있습니다. 카메라를 선택하면 URL에 보이는 화면이 스트리밍됩니다. 아주 간단하네요. 예전에는 가상 카메라 쓰려면 v4l2loopbac..

IT/React 2021.08.09

Simple REST API client-server

간단한 REST API를 만들어 봅시다. 순서는 다음과 같습니다. React 클라이언트에서 사진을 찍어 Node.js 서버로 보냅니다. (RESTful API) Node.js 서버(express)는 Python 앱을 실행합니다. Python 앱은 받은 이미지로 뭔가를 했다고 치고 결과를 리턴합니다. Node.js 서버는 클라이언트에게 결과를 보냅니다. React 클라이언트는 받은 결과를 표시합니다. Github Client App 먼저 클라이언트를 만듭시다. client$ npx create-react-app client client$ npm install --save axios @rubenchoi/webcam 코드는 간단합니다. import { WebcamComponent } from '@rubench..

IT/Programming 2021.08.05

UX 디자인 패턴

사용자를 끌어들이는 UX/UI의 비밀 - YES24 좋은 인터페이스는 유저의 삶을 더 쉽게 만들어야 한다 매력적인 인터페이스는 말이 잘 통하는 친구와 나누는 대화처럼 기분 좋은 경험을 불러오지만, 페인 포인트가 넘쳐 나는 서비스는 사용 www.yes24.com 개발자로서 UX/디자인을 좀 더 체계적으로 알고 싶은 마음에 몇 권의 책을 읽어봤지만, 대부분 자기계발서처럼 당연한 얘기만 하거나 심리학과 엮어 흥미롭지만 실무에는 잘 와닿지 않는 책이 대부분이었어요. 그러던 중 읽게 된 이 책은 개발자와 디자이너를 연결하는 딱 그 부분, 제가 원하던 그 연결 고리에 대해 다루고 있었고 이미 개발은 하고 있었지만 원리에 대해서는 알지 못하던 부분을 시원하게 긁어주었죠. 이 책은 디자인 패턴에 대해 소개하는데, 프로..

IT/Programming 2021.08.04

메타버스 앱 - 3. 캐릭터

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 메타버스 앱에 캐릭터를 추가해 봅시다. 캐릭터 다루기는 좀 복잡한데, 먼저 간단한 소개 영상을 준비했어요. Character on Three.js 캐릭터는 Character Creator 3를 사용해서 만들어 FBX로 export했어요. 준비된 FBX가 정상 동작하는지 먼저 three.js 에디터에서 테스트해 볼 텐데요, 에디터에서 File - Import - FBX를 선택합니다. 잘 로딩되는데, 머리카락이 좀 이상하네요. 속성 중에 Depth Write를 비활성화해 보면, 아래 스크린샷처럼 헤어가 제대로 나오네요. 헤어..

IT/3D Web 2021.07.10

메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 지난 시간에는 메타버스 앱에서 사용할 3D 파일을 업로드하는 기능을 만들었습니다. 이번 편에서는 업로드된 배경과 건물을 출력하고 1인칭 시점으로 돌아다녀 보겠습니다. 아래 결과처럼 말이죠. 아래와 같이 기능별로 나눈 5개 컴포넌트를 만들어 viewer/ 폴더 안에 넣고 사용해 봅시다. Viewer.js: 웹 3D를 구성하는 scene, camera, renderer 및 1인칭 시점 컨트롤러 등 전체 구성을 포괄하는 뷰어 컴포넌트 Decorator.js: 배경, 빛(조명), 바닥 등 렌더링 환경을 구성하는 컴포넌트 Worl..

IT/3D Web 2021.07.01

메타버스 앱 - 1. 3D 파일 업로드

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 요즘 핫한 메타버스, React 웹앱으로 간단히 만들어 봅시다. 이번 편에서는 React 앱을 만들고 3D 파일을 업로드해서 로딩하는 것까지 해 볼 거에요. React 앱 준비 기초 내용이지만, 간단히 복습해 봅시다. Create-react-app으로 앱을 만들어 줍니다. $npx create-react-app metaverse UI 라이브러리 Reactstrap을 설치해 줍니다. $npm i -save reactstrap bootstrap index.js에 bootstrap.css를 import합니다. import 'b..

IT/3D Web 2021.07.01

React 웹캠 - 4. Select webcam

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 두 개 이상의 웹캠(혹은 마이크)을 사용하는 경우 브라우저 메뉴를 통해 웹캠을 선택하는 React 앱을 만들어 봅시다. navigator.mediaDevices.enumerateDevices() 오늘의 주요 API는 enumerateDevices() 인데요, 이는 사용 가능한 모든 디바이스 배열을 리턴해줍니다. 리턴 값을 console.log로 찍어 보면 아래와 같습니다. deviceId는 이 디바이스에 접근하기 위한 ID이고 kind는 디바이스의 종류로서 au..

IT/React 2021.06.21