공부하는 디자이너

[강좌] 유튜브 비됴클래스 https://www.youtube.com/watch?v=4TP2LX2p-oQ 여기에 존코바님의 텍스트 인트로 튜토리얼을 짬뽕해서 내 나름대로 인트로 화면을 만들어봤다. 그럴싸 한데? 원래 이 블로그의 개설 목적은 코딩공부 기록을 남기는 것이었다. 하지만 교양 수준을 넘어서 코딩에 과도한 에너지를 쏟는게 의미가 있는가란 의문이 들었다. 마치 과학자들도 우주의 끝이 얼마나 넓은지 모르는데 내가 선무당처럼 "달의 중력을 알게 되었으니까 난 이제 제법 쓸모있는 지식을 얻은 거야" 라고 자만하는 꼴이랄까. 여기서 1 나노그램의 지식을 추가한들 달라질 게 없단 생각이 들었다. 취미와 자기만족으론 계속 하겠지만. 블로그 운영 목적이 "얇고 넓은 공부 기록" 이라면 차라리 디자인에 더 비중..

유튜브 데스크탑 메인 화면의 GNB와 LNB(Drawer)의 내비게이션 구성과 플로우를 정리해보았다. 기본 메뉴부터 동영상 카테고리까지 과감하게 1 depth에 펼쳐 놓았는데 이는 클릭 두번 이내에 모든 메뉴에 접근할 수 있도록 위함이다. | 몇가지 깨알같은 특징 1) 해상도 무관 동일한 UI 평균적인 모니터 해상도인 1920에서는 햄버거 아이콘과 드로워메뉴가 펼쳐진 상태로 공존하고, 1280 이하에서는 주요 메뉴만 아이콘으로 간추려서 표시된다. 1920에서 드로워를 닫으면 컨텐츠 영역만 더 넓게 쓰는 것도 가능하고 1280에서 드로워를 열어서 컨텐츠 영역을 좁히고 1920과 동일한 모양으로도 사용 가능하다. 표로 정리하면 다음과 같다. 해상도 드로워 펼침/접힘 가능여부 드로워 기본상태 1330 이상 가..

| 디자인을 공부하는 사람들을 위하여 디자인을 공부하는 사람들을 위하여 디자인하우스에서 기획·출간해 오고 있는 `에세이즈 온 디자인Essays on Design` 시리즈의 세 번째 책으로, 이 책은 `디자인을 공부하는` 모든 사람들을 위한 것으로, 과연 일본의 디자이너들이 어떤 이슈와 고민을 가지고 활동하는지를 보여 준다. 유럽 디자인의 경우에 비해 우리가 얻을 수 있는 정보가 상대적으로 빈약한 일본 디자인의 종과 횡을 담고 ... www.yes24.com 대학생 때 읽었던 [디자인을 공부하는 사람들을 위하여] 라는 책을 다시 읽고 있다. 교수님이 꼭 읽어보라며 추천한 도서였고 당시 교보문고 디자인 베스트에 올랐던 책이다. 안도 타다오를 비롯한 디자이너 15명과 진행한 1996년도 인터뷰와 연구 내용을 ..

| 디지털 디톡스란? 디지털 디톡스란 디지털(Digital)에 '독을 해소하다'라는 뜻의 디톡스(Detox)가 결합된 말로, 디지털 홍수에서 벗어나 심신을 치유하는 일이다. 디지털 홍수에 빠진 현대인들의 각종 전자기기 사용을 중단하고 명상, 독서 등을 통해 몸과 마음을 회복시키는 것이다. 즉, 단식으로 몸에 축적된 독소나 노폐물을 해독하듯이 스마트기기 사용을 잠시 중단함으로써 정신적 회복을 취하는 것이다. - 출처 : 한국경영원 얼마 전 "왜 우리는 힘든 일은 하기 싫어하고 쉬운 일만 찾는가" 라는 영상을 보았다. 그 이유는 도파민과 관련 있다. 쉽고 즐거운 일을 할 때 우리 뇌에서는 도파민이 나온다. 하지만 책 읽기나 재미없는 일을 할 때는 도파민이 거의 나오지 않는다. 도파민은 중독과도 관련이 있어서..

기획서 또는 프로그램에는 버전이 있다. 그 버전을 명명할 때는 아래와 같이 표기한다. v. 1.1.0 version을 뜻하는 v와 숫자 3개가 찍혀있는데 이 숫자 3개의 뜻은 무엇일까? 1) 마지막 숫자 : v. 1.1.0 기획서의 큰 틀은 유지한채 자잘한 오류, 누락 사항, 단순 오타를 수정할 때 숫자가 올라간다. 예를들어 기존 기획서에 얼럿이 누락되어서 추가했다면 v. 1.1.1 로 업그레이드 된다. 2) 두번째 숫자 : v. 1.1.0 기존 내용과 기능은 유지한 채 새로운 기능이 추가되었을 때 수정된다. 예를들어 메모 애플리케이션에 메모 폴더링 기능을 추가한다면 v. 1.2.0 로 업그레이드 된다. 3) 첫번째 숫자 : v. 1.1.0 이전 버전과 호환되지 않는 새로운 큰 변화를 말한다. 가령 Wi..

네모칸에 대한 생각 생각의 깊이에 따라 모든 것이 달라진다. | 이번에도 네모칸 이야기다. 액자처럼 보이는 하나의 상품 정보는 그 자체로 사진 액자 같지만, 실제로는 문이다. 상품을 구매하기 위해서 통과해야 의미가 생긴다. 상품 정보를 고민하는 과정을 통해 본질과 심플함에 대해 생각해본다. 시작하기 마켓 컬리는 독특한 쇼핑몰이다. 물류 시스템에 투자를 많이 하는 회사이면서 보라색의 개성 있는 아이덴티티를 가지고 있 brunch.co.kr https://brunch.co.kr/@pliossun/141 이커머스 상품썸네일단에 대한 고객관점에서의 분석. * 신입 때 한 대형포털의 운영작업을 한 적이 있다. 촘촘하게 매겨진 가이드에서 한 치의 오차라도 발생하면 절대 검수가 통과되지 않았다. 네모칸 안에 인물 사..

https://brunch.co.kr/@plusx/45 명확하게 디자인하라 author - 햇님 속눈썹│UX 디자이너 | 안녕하세요. Plus X에 입사한 지 2개월 된 따끈따끈한 신규 입사자, 햇님속눈썹입니다. ᕕ(♨ω♨)ᕗ 플러스엑스의 브런치 글을 읽는 독자에서, '플엑인'으로서 글을 적으려니 묘한 기분이 드네요. 입사 후, 책임님으로부터 『명확하게 디자인하라』라는 책을 전달받았습니다. 오래된 역사를 자랑하듯 책은 아주 너덜너덜한 모습이었는데요. 과연 명서 답습니다. 이 brunch.co.kr

리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG 이 포스트는 리덕스의 리도 모르는 독자들을 대상으로 작성된 글입니다. 리덕스가 왜 필요한지 알아보고, 리덕스를 편리하게 사용하기 위한 발악을 한번 해보겠습니다. 리덕스 왜 쓸까? 리액트애서 애플리케이션을 만들 때, 기본적으로는 보통 하나의 루트 컴포넌트 (App.js) 에서 상태를 관리합니다. 예를들어서, 투두리스트 프로젝트에서는, 다음과 같은 구조로 상태가 관리되고 있죠. 리액트 프로젝트에서는 대부분의 작업을 할 때 부모 컴포넌트가 중간자 역할을 합니다 velopert.com 리액트 기초를 공부하며 당췌 이해가 안 가는 부분이 이것이었다. props를 타고 하위컴포넌트를 계속 타고 흘러간다. 흘..

*국내 대형 온라인쇼핑몰의 대배너 UI 디자인에 대해 비교분석을 해본 글입니다. *대상 : SSG닷컴, 지마켓, 11번가, 쿠팡, 위메프, 티몬 메인배너는 몇 개를 거는 게 좋을까 메인배너는 소비자가 가장 먼저 마주치는 온라인쇼핑몰의 얼굴이다. 그러나 UI 자체로 어떤 특별한 시도하기에는 까다로운 영역이다. 쉬운 사용성, 익숙함과 차별화 사이에서 고민을 해야한다. 또한 최대한 많은 내용을 넣고 싶어하는 사업부의 요구를 어느 정도 선까지 반영할 것인가에 대한 문제도 있다. 전체 배너양이 많으면 많을수록 각 배너당 노출빈도는 떨어진다. 배너가 많으면 많을수록 개당 노출빈도는 떨어진다. 또한 사용성 측면에서 배너를 많이 걸수록 사이트 로딩이 무거워진다. 반대로 전체 배너양을 줄이면 노출상품 종류도 줄어든다. ..

[원본강의] https://www.youtube.com/watch?v=5L6h_MrNvsk 탭을 짜는 다양한 소스가 있지만 가장 간단해 보이는 소스를 가져왔습니다. 구글링해보면 여전히 제이쿼리 소스 복붙을 많이 하시던데 저는 바닐라 자바스크립트 예제를 고집하고 있어요. 물론 자바스크립트로 소스는 복잡하고 버그가 안 잡힌 예제도 많더라구요. 이 예제는 dataset을 사용하는 방식이라 간단한 반면, IE 10 이하는 지원이 안 된다는 단점이 있습니다. 하지만 공부하는 입장에선 레거시를 신경쓰기보다는 최근 기술로 공부하는게 좋겠죠! [Codepen 소스보기] https://codepen.io/jisuny/pen/RwNGKMN?editors=1111 위 링크는 제가 커스텀해 본 코드입니다. 강의 속 CSS가 ..