오늘 그리고 내일의 UI/UX디자인

[퍼온 글] 에어비앤비 디자인 시스템 요약

디자인 시스템 2019.05.28 21:33

2018년 11월 2일 에어비앤비 디자인 시스템 총괄 매니저 한유진 님의 강연 중 Session 1,2,4를 요약한 글입니다. 목차 Session 1. 왜 디자인 시스템인가? Session 2. 에어비앤비 디자인 시스템 케이스 스터디 Session 4. 질의응답 Session 1. 왜 디자인 시스템인가? 디자인 진행 단계 일반적인 사용하는 디자인 프로세스 discover — define — develop — deliver 중 define의 단계를 살펴봄 1. Mood board 작성 콜라주 형식의 이미지, 타이포그래피, 아이콘, ui 샘플 등 시각적인 요소들을 모아서 분석하는 기법 실제 디자인 또는 콘셉트 설정에 앞서 특정 분위기들을 설정하고 공유하기 위한 자료 무드 보드가 좋은 이유는 콘셉트 설정 시 ..

주니어 UIUX 디자이너의 역량 훈련

UI UX 디자인 2019.08.04 22:01

UI UX디자이너의 목적 : 디지털 프로덕트 (Web, App, etc)를 만드는 것 Break Down 1. 가장 큰 업무 카테고리 구분 1) 제안 2) 구축 3) 운영 2. 각 카테고리 별 프로세스 체크 1) 제안에서 사용하는 프로세스 2) 구축에서 사용하는 프로세스 3) 운영에서 쓰이는 프로세스 3. 나의 포지션 정의 내 업무 Q. 내가 해야 할 일은 무엇인가? = 어떤 문제를 해결 해야 하는가? Q. 내가 왜 이 일을 해야 하는가? - 내가 이 일을 하면 어떤 문제가 해결되지? - 어떻게 해결 할까? 협업 Q. 고객 입장에서 왜 이 일을 맡겼을까? 그들이 원하는게 뭘까? Q. 내가 어떤 사람들과 협업하고 있는가? - 개발, 마케팅 etc Q. 협업 중에 필요한 일은 무엇인가? - 팀 간 이해관계 ..

디자인 에이전시의 미래

경영 2019.08.04 20:03

사실 : 2015년 5월 맥킨지가 디자인 에이전시 Lunar를 인수했다. 왜? 1. 경영 컨설팅은 디자인과 같은 creating의 영역으로, 디자인 에이전시는 경영 컨설팅으로 나아가고 싶어했다. 1-1. 넨도 디자인 이야기 라는 책에서 나오 듯, 의뢰를 맡기는 기업들이 예전에는 명확한 문제 해결점을 요구했는데, 이제는 모호하게 부탁하기 시작했다는 것이다. ex. 매출액이 작년 대비 20%가량 하락했는데, 원인을 모르겠어요. 해결해주세요. 1-2. 경영 컨설팅 만으로 서비스와 제품 혁신을 이루는 일이 점점 복잡해지고 있었다. 1-3. 디자인이 제품부터 브랜딩, 기업 비즈니스 모델과 전략까지 아우르기 시작. 2. 경영 컨설팅 회사의 위기감 2-1. IDEO도 기업의 경영을 얘기하는데, 자신들은 디자인에 대해..

디자이너's Pick : 7월 29일 클라우드 소식

클라우드 (Cloud Platform) 2019.07.29 11:15

카카오 개발자가 본 '요즘 클라우드 흐름' 세 가지 http://www.zdnet.co.kr/view/?no=20190721085551 불러오는 중입니다... 클라우드 업계 주요 흐름으로 소비처의 활용전략과 제공자의 수익성이 맞물린 SaaS 중시 경향, 기존 오픈소스 라이선스와 클라우드 서비스의 충돌 문제 심화, 설득력이 커진 멀티·하이브리드 클라우드 시나리오 확산 가능성이 제시됐다. 클라우드의 간략한 역사…그리고 8개의 커다란 줄기 delighIT.net 2.1 클라우드 컴퓨팅은 최근 거스를 수 없는 대세가 되고 있습니다. 클라우드는 그동안 어떠한 기술적 진화를 해왔을까요. 수 년 전만 해도 ‘클라우드=가상화된 서버’라는 공식이 있었지만, 최근 컨테이너나 마이크로서비스아키텍처(MSA) 등 다양한 기술이..

디자이너's Pick : 중국의 클라우드 산업

클라우드 (Cloud Platform) 2019.07.29 10:31

급성장하는 중국의 클라우드 산업 중국 신화통신의 7월 8일 보도에 따르면 중국의 클라우드 컴퓨팅 시장은 2018년 962억 8천만 위안 (139억 7천만 달러) 규모로 성장했다.1) 중국 정보통신기술 아카데미(CAICT)가 발표한 백서를 기준으로 제시한 것인데, 이는 2017년에 비해 39.2% 성장한 수치이다. 급성장하는 중국의 클라우드 산업 각 시장 세그먼트별로 분석하면, 퍼블릭 클라우드는 437억 위안 (7조 4,700억 원 규모)로 2017년에 비해 65.2% 성장한 것이며, slownews.kr 중국 신화통신의 7월 8일 보도에 따르면 중국의 클라우드 컴퓨팅 시장은 2018년 962억 8천만 위안 (139억 7천만 달러) 규모로 성장했다.1) 중국 정보통신기술 아카데미(CAICT)가 발표한 백서..

네이버, 2019년 2분기 영업수익 1조 6,303억 원, 영업이익 1,283억 원 기록

경영 2019.07.29 10:24

네이버㈜(대표이사 사장 한성숙)는 2019년 2분기에 영업수익(매출) 1조 6,303억 원, 영업이익 1,283억 원, 당기순이익 278억 원을 각각 기록했다고 밝혔다. 2분기 연결 영업수익은 전년동기 대비 19.6%, 전분기 대비 7.9% 증가한 1조 6,303억 원을 기록했다. 연결 영업이익은 LINE PAY 송금 캠페인을 위한 일회성 비용 영향으로 전년동기 대비 48.8%, 전분기 대비로는 37.8% 감소한 1,283억 원이다. 사업 부문별 영업수익과 비중은 광고 1,666억 원(10%), 비즈니스플랫폼 7,159억 원(44%), IT플랫폼 1,059억 원(7%), 콘텐츠서비스 501억 원(3%), LINE 및 기타플랫폼 5,918억 원(36%)이다. 광고는 네이버 플랫폼의 광고 상품성 개선 등의 ..

7월 29일 디자이너의 모빌리티 소식 클리핑

모빌리티 (Automobile) 2019.07.29 10:22

자율주행용 센서 기업 ‘비트센싱’ 10억원 규모 투자 유치 자율주행용 센서 기업 ‘비트센싱’ 10억원 규모 투자 유치 라이다를 대체할 레이더 센서를 개발 중이다. www.bloter.net 자율주행용 레이더(Radar) 센서 기술 전문 스타트업 비트센싱이 SJ투자파트너스, 한국과학기술지주, 스파크랩스로부터 10억원 규모의 브릿지 투자를 유치했다고 7월24일 밝혔다. 비트센싱은 국내 최초로 전방 차량용 레이더 개발에 성공해 양산 중인 기업 만도의 초기 레이더 개발팀 구성원들이 설립한 스타트업이다. 레이더는 3D카메라, 음파 장비, 라이다(Lidar)와 함께 자율주행차의 눈 역할을 한다. 일반적으로 자율주행 차량에는 라이다가 주가되고 레이더는 보조 센서로 활용되지만, 비트센싱은 레이더 센서의 성능을 높여 값..

7월 29일 사용자 행동 변화 클리핑

사용자 행동 변화 2019.07.29 09:40

http://slownews.kr/67025 모바일 앱 생태계 현황과 인스턴트 앱의 시사점 애플이 앱스토어를 처음 출시한지 내년이면 꼭 10년이 된다. 10년 전 아이폰의 첫 등장이 전 세계 사용자의 모바일 경험을 완전히 새로운 경지로 바꿔 놓은 것과 함께, 앱스토어는 모바일 생태계 혁신의 중심에서 스마트폰 시장의 성장과 그 궤를 함께 해 왔다. 500만 개의 앱이 만들어가는 생태계 2008년 500개의 어플리케이션(앱)으로 시작한 앱스토어, 2017년 1월에는 220만 개가 넘는 앱을 유통시키고… slownews.kr

7월 29일 유통 산업 뉴스 클리핑

유통 2019.07.29 09:24

https://byline.network/2019/07/03-11/ 마켓컬리와 배달의민족의 ‘디지털 전환’ 방법론 - Byline Network 바이라인네트워크가 3일 유통과 물류산업의 DT(Digilal Transformation, 디지털 전환) 사례를 공유하는 ‘리테일 로지스 테크 컨퍼런스 2019’를 열었다. 이날 행사에서는 이마트, 마켓컬리, 마이창고, 우아한형제들과 같은 유통, 물류 비즈니스를 하고 있는 기업들의 IT기술 적용 및 고도화 사례가 소개됐다. 유통, 물류기업에게 IT 솔루션을 byline.network https://n.news.naver.com/article/031/0000501816?fbclid=IwAR1vw57dh8ZXDKRfolMxAzr6HpSUhFTjhM36SH-O7-BRd..

오픈패스_10일 차_GUI

UI UX 디자인 2019.07.18 11:30

수업 시작 전 숙제 공지 1. 지난 시간에 App bar를 그렸다. 1-1. 트립스토어 App bar를 어떻게 변하는지 잘 보면 아래 세개의 상태를 가지고 있다 1-2. 투명 상태 1-3. 다크 테마 1-4. 라이트 테마 그래서 디자인 시스템을 만들고 있는 파일에 1-2 ~ 1-4 테마의 App Bar를 만들기 가 수정 2. Bottom_Navigation 아이디에어 맞게 5개 column이면 그에 맞게 설계 1. Floating Action Button 해당 화면에 core function을 가진다.는 원칙이 있다 (ex. 게시글 올리기, 사진 업로드 등 화면에 맞는 core function일 때만 사용) 종류는 2가지 1. Big Size 2. Mini Floating Action Button에 업데..

7월 18일, 디자이너의 클라우드 소식 클리핑

클라우드 (Cloud Platform) 2019.07.18 11:29

1. "구글·아마존 부럽지 않네" 네이버 오픈소스 혁신 동참 구글·아마존 부럽지 않네 네이버 오픈소스 혁신 동참 강운덕 네이버 핀포인트 프로젝트 리더가 핀포인트 오픈 하우스 행사에 참석한 전 세계 100여명의 개발자들에게 핀포인트 프로젝트의 비전을 설명하고 있다.[사진=네이버 제공]네이버가 ... www.ajunews.com 지난 11일 네이버는 서울 강남구 D2 스타트업 팩토리에서 전 세계 오픈소스 개발자를 초청해 ‘핀포인트 오픈 하우스’ 행사를 진행했다. 행사에는 네이버가 만든 오픈소스 APM(앱 상황 모니터링) 소프트웨어(SW) ‘핀포인트(Pinpoint)’를 포함해 ‘집킨(Zipkin)’, ‘스카이워킹(Skywalking)’ 등 전 세계 주요 오픈소스 APM 개발자와 국내 개발자들 100여명이 참..

7월 15일 모빌리티 뉴스

모빌리티 (Automobile) 2019.07.15 13:29

1. 딥러닝 기반의 인공지능 자율주행 기술 경쟁의 핵심을 바꾼다 [LGERI] 딥러닝 기반의 인공지능 자율주행 기술 경쟁의 핵심을 바꾼다 - 이승훈 *** 출처: [LGERI] 딥러닝 기반의 인공지능 자율주행 기술 경쟁의 핵심을 바꾼다 1. 딥러닝 기반의 자율주행 혁신의 시작 ■ 실리콘밸리의 Startup인 comma.ai - “사람이 운전하면 자동차가 주행하는 방법을 스.. mangastorytelling.tistory.com pdf 원본 http://www.lgeri.com/uploadFiles/ko/pdf/busi/LGERI_Report_20171122_20170322130355595.pdf

7월 15일 클라우드 뉴스

클라우드 (Cloud Platform) 2019.07.15 12:43

1. 네이버클라우드, 안정성·경제성으로 국가 의료사업 선도 네이버클라우드, 안정성·경제성으로 국가 의료사업 선도 - 의학신문 [의학신문·일간보사=이재원 기자] "네이버 클라우드는 그 경제성과 안정성에 있어서 병원이 단독으로 데이터 구축을 위한 전산장비 운영보다 압도적인... www.bosa.co.kr 기사 중 발췌 금융,의료,교육 등의 법규제가 개선되면서, 보다 강화된 보안과 시스템 안정성을 위해 각 분야 기관의 데이터 저장방식이 클라우드로 전환되는 중 나의 의견 2018년 2-3월쯤 민간 클라우드를 공공기관, 금융 기관 등이 사용 가능하게 규제가 완화되면서 국내 클라우드 플랫폼은 나름의 블루오션(?)을 찾은 셈이다. 최소 1-2년 동안은 이 분야에 집중할 것으로 예상하지만, 민간 기업 대상으로의 클라우..

50-60대 사용자가 뜨고 있다?

사용자 행동 변화 2019.07.13 21:44

유튜브 핵심 된 시니어 유튜브에서 가장 많은 시간을 보내는 세대는 누구일까. 10대라고 생각하기 쉽지만 답은 50대다. 최근 40~60대에 이르는 중·장년층이 유튜브 생태계의 핵심 축으로 떠올랐다. 1020세대의 대표 플랫폼으로 여겨지는 유튜브에서 이들의 영향력은 막강하다. 앱·리테일 분석 서비스 와이즈앱에 따르면 50대 이상이 4월 한 달간 유튜브에 머무른 시간은 101억 분이다. 지난해 같은 기간보다 두 배 늘었다. 이는 10대(89억분), 20대(81억분), 30대(61억분), 40대(57억분)의 월 사용 시간보다 많은 수준이다. 50대 이상의 1인당 평균 사용 시간은 월 17시간 25분으로 30대(월 16시간 46분)와 40대(월 13시간)를 제쳤다. 이처럼 중·장년층이 스마트폰에 익숙하지 않을 ..

[메모] 초격차 : 넘볼 수 없는 차이를 만드는 격

경영 2019.07.13 20:35

'많은 리더들이 자신의 후계자나 부하를 '잘 양성하지' 않습니다. 자신의 성과를 높이기 위해서 후배들을 이용하려고만 한다. 성장 잠재력을 가진 후계자나 부하를 키우지 않습니다' - 62p 팀이 달성해야 할 목표가 있다. 이를 위해 조사와 탐구(Discovery)를 해야 한다면, 어떻게 해야 하는가? 적절한 수준에 도달했음을 어떻게 알 수 있는가? 1. 리서치는 발산과 수렴이 모두 들어가 있는 단계이다. 무한대로 발산이 가능하지만, 수렴을 염두해 두어야 한다. 2. 수렴은 어디까지 해야 하는가? 리서치를 통해서 얻은 통찰이 '현실적으로 다음 업무를 자연스럽게 떠올릴 수 있는 수준'이어야 한다. 예를 들어 '고객의 취향에 맞는 상품 구성이 필요하다' 라는 통찰을 얻었다고 가정하자. 이 통찰을 통해서 우리는 ..

7월 13일 모빌리티 소식

모빌리티 (Automobile) 2019.07.13 14:40

구글 8년, 드라이브닷에이아이 3년…비결은 딥러닝 [Biz Times] `완전 자율주행` 레벨4에 걸린 시간 - 매일경제 구글 8년, 드라이브닷에이아이 3년…비결은 딥러닝 브로디 후발 드라이브닷에이아이 공동설립자 겸 이사 "자율주행차 산업, 구글같은 승자독식 어렵다" www.mk.co.kr 자율주행차량이 피자를 집까지 배송해주고, 로봇이 자율주행 중이던 차량에 치이는 사고가 뉴스가 된다. 과거 상상 속 세상은 이미 미국에서 현실이 됐다. 지난 8일(현지시간) 미국 라스베이거스에서 열린 세계 최대 규모 가전·IT 전시회 CES에서는 완성차 업체, IT 공룡, 이동통신사까지 모두 나서 인공지능(AI)과 자율주행차가 일상에서 보여줄 구체적인 모습을 제시했다. 5G(5세대) 이동통신 기술을 활용한 차량·사물 간..

7월 13일 클라우드 소식

클라우드 (Cloud Platform) 2019.07.13 14:12

1. 공공클라우드 도입 환경변화와 NAVER CLOUD PLATFORM file:///Users/peace/Downloads/%EA%B3%B5%EA%B3%B5%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C+%EB%8F%84%EC%9E%85%ED%99%98%EA%B2%BD+%EB%B3%80%ED%99%94%EC%99%80+NAVER+CLOUD+PLATOFRM.pdf 공공기관 클라우드 규제 완화로 인해 네이버, SK C&C 등이 정부 사업에 참여하고 있고, 상생 모델을 구축하려는 움직임이 있다. 2. 인공지능 확산의 핵심 인프라, 클라우드 산업 동향 분석과 시사점 file:///Users/peace/Downloads/NIPA+%EC%9D%B4%EC%8A%88%EB%A6%AC%ED%8F%AC..

7월 13일 AI 소식

인공지능 (AI, Artificial Intelligence 2019.07.13 13:45

삼성전자, AI 반도체 강화할 ‘비밀병기’ 선보이다 삼성전자, AI 반도체 강화할 '비밀병기' 선보이다 | SAMSUNG NEWSROOM 삼성전자는 신경망처리장치(NPU, Neural Processing Unit) 기술을 육성해, 2030년 시스템반도체 분야에서 글로벌 1위에 오르겠다는 목표를 지난달 밝혔다. 이어 삼성전자 종합기술원이 최근 컴퓨터 비전 분야의 글로벌 최대 학회인 CVPR(Computer Vision and Pattern Recognition)에서 '시스템반도체 2030' 목표를 뒷받침할 '비밀병기'를 공개해 눈길을 끌고 있다. 이번에 발표한 기술은 세계 최고 수준의 '온 news.samsung.com 이번에 발표한 기술은 세계 최고 수준의 ‘온 디바이스 AI(On-Device AI) 경..

7월 10일 클라우드 소식

클라우드 (Cloud Platform) 2019.07.10 12:54

1. 서울시, 클라우드 기반 차세대 업무시스템 구축한다 서울시, 클라우드 기반 차세대 업무시스템 구축한다 서울시가 클라우드 기반 차세대 업무관리시스템을 구축한다. 서울시는 연내 업무재설계(BPR)·정보화전략계획(ISP)을 수립한다. 중앙정부가 지난해 클라우드 기반 온-나라 문서 2.0 시스템 전환을 완료하고 올해부터... www.etnews.com 핵심 행정안전부와 과학기술정보통신부 등 중앙부처는 클라우드 기반 시스템 구축에 한창이다. 지난해 민간 클라우드 활용 가이드라인이 대폭 완화돼 공공기관뿐 아니라 지방자치단체도 클라우드 기반 IT 시스템을 구축할 수 있는 길이 열렸다. 서울시는 전체 업무 협업과 공유를 위한 서비스를 개발한다. 시 고유 협업·공유 업무체계를 활성화할 수 있는 맞춤형 프로세스를 모색..

7월 10일 모빌리티 소식

모빌리티 (Automobile) 2019.07.10 12:20

검정색 글씨 - 기사, 파란색 글씨 - 나의 의견 '마카롱택시' KST모빌리티, 현대-기아차서 50억원 투자 유치 ‘마카롱택시’ KST모빌리티, 현대·기아차로부터 50억 투자 유치 특징은 택시 기반 유휴택시면허 매입 또는 임대로 운행차량을 확대하고 있다는 것. www.bloter.net 전략 마카롱택시 사업 인프라를 확대하고, 빅데이터 및 인공지능(AI) 기반 플랫폼 기술을 고도화하겠다고 밝혔다. 아울러 현대·기아차와 함께 택시 서비스 혁신을 지원할 수 있는 체계를 구축하기 위해 적극적으로 협력할 계획 ‘택시의 프랜차이즈화’를 통한 모빌리티 서비스 혁신을 추구한다. 민트색으로 단장한 차량, 무료 와이파이·생수·마스크 같은 기본 편의물품, 전문교육을 이수한 드라이버, 사전예약 호출방식 등으로 차별화된 택시..

7월 10일 AI 소식

인공지능 (AI, Artificial Intelligence 2019.07.10 12:12

AI, 내 반려동물에 대해 말해줘 ① 요약: 나날이 커지고 있는 반려 동물 시장, 이번엔 AI와 펫코노미가 만났습니다. 최근 인공지능과 딥러닝 기술 기반의 보상형 반려동물 SNS ‘애니멀고’가 출시되었어요. 반려동물의 사진을 올리면 AI가 사진을 분석해 혈통, 배변, 나이 등 맞춤 정보를 제공해준데요. 내가 올린 사진에 사람들이 ‘좋아요’를 누르면 리워드를 지급하는 블록체인 기술도 접목했다고 합니다. ② ‘펫코노미’가 정확히 뭔가요? 펫코노미(Petconomy)란 반려동물을 의미하는 펫(Pet)과 경제(Economy)의 합성어로 반려동물 관련 시장 및 산업을 일컫는 신조어예요. 작년에는 전체 매출 3조원 수준이었다면 올해는 2배 성장한 6조원 규모를 형성할 것으로 예상되고 있죠. 빠르게 성장하는 펫코노미..

ERP on Cloud

클라우드 2019.07.09 09:42

디지털데일리에서 7월 17일 (수) 클라우드 행사를 연다고 해서 보았는데 평일이라 애매하다.. 대신 어떤 주제로 발표하는지 보면 추가 리서치를 할 때 방향을 잡는데 도움이 될 듯 하다

UI 디자인 연구소 단톡방 질의응답 - 디자인 흐름 편

UI UX 디자인 2019.07.04 16:39

배경 1. 야랑님께서 요즘 앱들 디자인이 큰 타이틀 + 이미지, 이미지 아래에 짧은 문구 가 반복되고 있다 2. 와디즈 리뉴얼도 그렇고, 더팀스, 애플스토어도 이와 같은 추세가 보이고 있다. 3. 또한 border - radious가 높은 이미지도 특징 야랑님의 니즈 (앱을 구축할 계획) 1. 깔끔한 디자인과 명확한 정보 전달 2. 저렴하지 않은 디자인과 레이아웃 추측 (시간 순서대로) 1. 다크모드 적용 추세가 증가하면서, 색상대비로는 모바일 시인성/가독성을 충족하지 못할 것 같아 텍스트 크기로 보완하기 위함 일 것이다 - STN (본인) 2. 해당 페이지를 함축할 수 있는 단어 / 타이틀을 가장 선두에 보여준다는 개념 - 사용자개나줘버려 님 3. 한 손, 특히 엄지로 콘텐츠 소비를 많이 하는데 작은 ..

[19.07.02] 오픈패스_7일 차_GUI

UI UX 디자인 2019.07.02 19:05

Design Foundation_Typography Type (서체) > Typeface(서체 + 무드) > Typography (서체 + 무드 + 그래픽) 타이포그래피의 목적 1. 정보 전달 2. 느낌과 경험 전달 reference *글자풍경 *에릭 슈피커만 - 타이포그래피 에세이 (서체 공부의 정석) 듀오톤 강의 자료 폰트 - Mark Pro 왜 이 폰트를 사용했을까? 1. 반듯하고 클린한 느낌 2. 서체의 외형으로 인해 내용 전달에 오류가 생기지 않도록 모던한 헬베티카 류 3. 뒤에 앉은 사람도 볼 수 있도록 Bold, 자간을 넓게 4. 한 줄 타이틀의 최대 길이 고려 우리도 이런 지점을 고려하고 서체를 선택하는가? 라는 화두를 던진다. 1-d 2-b 3-c (3-f) Snell Roundhand ..

[19.06.28] 오픈패스_6일차_GUI

UI UX 디자인 2019.06.29 16:58

Ice Breaking 무드보드를 참고할 만한 Site Case Study : Airbnb 에어비앤비의 핵심 키워드 : Live (여행은 살아보는 거야) Don't go there, Live there 유적지 이미지를 사용하는게 아니라, 사람 / 무보정 / 움직이는 촬영 화면 등 자연스러움을 부각. 리얼함 / 살아 있는 느낌을 전달하기 위함 People + Place + Love + Airbnb Blong / connect / share / anywhere / Moving Brand create.airbnb.com 에서 확인해볼 것 컬러 : 외부인이 자기 집처럼 느끼도록 코랄류 컬러를 선택 여행하면서 가장 기억에 남았던 시간이 '개와 늑대의 시간', 해가 지면서 보이는 코랄빛의 컬러가 가장 인상이 깊었다..

[19.06.27] 오픈패스_무드보드 만들기

UI UX 디자인 2019.06.27 18:04

다영 님께 배웠던 무드 보드 제작의 출발점은 서비스 컨셉 키워드부터였다. 서비스 컨셉 키워드란 앞서 제작한 퍼소나 / 스토리보드를 통해 각 터치포인트에서 사용자가 어떤 경험을 하길 원하는가 에 대한 답변이다. 예를 들어 검색 기능에서 사용자가 '신뢰가 가는' 경험을 하길 원한다면, 또한 팀원들이 그 키워드에 합의를 했다면 서비스 컨셉 키워드 중 하나로 인식한다. 키워드를 7개 정도 뽑아내고, 그다음 서비스 컨셉 키워드를 비주얼 컨셉 키워드로 바꾸는 작업을 한다. 무드보드를 만들기 위해서는 시각적으로 표현 가능한 키워드가 필요하다. 팀원들과 마인드맵으로 키워드 작업을 하고 내가 맡은 해당 비주얼 키워드로 검색을 하고 있지만, 잘 나오지 않았다. 그 문제를 해결하기 위해 검색을 하다가 '도승현 님의 브런치'..

클라우드는 어디까지 왔을까?

클라우드 2019.06.27 12:11

https://outstanding.kr/cloud20190529/?fbclid=IwAR2UzxQVFh5c80NGtlq4fpwfMJNxXOYq96MmTaj9aRRrXjulRufrwwiFiV0 IT공룡들의 돈줄..클라우드는 어디까지 왔을까? 클라우드 사업은 IT공룡들의 가장 중요한 수익원이 됐습니다. 아마존 웹서비스(AWS)의 2018년 4분기 매출은 74억3천만 달러로 전년 동기대비 20억 달러 이상 매출이 늘었습니다. 마이크로소프트 애저의 매출도 같은 기간 76% 상승하면서 클라우드 outstanding.kr

[19.06.25] 오픈 패스_5일차_GUI

UI UX 디자인 2019.06.26 21:40

그동안의 피드백 팀 포맷으로 class로 일하는 방식과 UX framework은 시각 디자인 위주로 일해왔던 분들에게는 불편한 경험이었을 것이다. 하지만 'class에서 겪는 게 이익인지?' '회사에서 겪는게 이익인지?'를 비교하면 왜 그렇게 배우고 일했는지에 대한 답을 얻을 수 있다. class에서 겪는 불편한 경험은 '배움과 성장'이지만, 회사에서 경험은 퇴사로 이어질 수 있다. Listen and Speak 시각 중심으로 일해왔던 사람들은 '듣기'에 대해 미숙하다. 훈련이 되어 있지 않다. 그 훈련이 되어 있지 않으면 자신의 의견이 반박당했을 시, 그 경험을 '불편하다'라고 느낀다. 불편함에 익숙해지고 지금 껏 해왔던 방식의 관성에서 벗어나는 훈련이 필요하다. Perspective 내가 중요하다고 ..

디자이너가 커뮤니티 디자인을 신경써야 하는 이유

디자인 노트 2019.06.20 13:47

백종원 요리연구가 님이 최근 유튜브를 개설하셨고, 6월 20일 기준 구독자 1,708,961명 입니다. 요리 영상과 비즈니스 인사이트가 넘치시는 건 둘째 치고, 영상 중간에 백종원 님이 하시는 말씀이 있습니다. '우리 팀은 OO재료가 없어도 좌절하지 마시라' '우리 팀은 ...' 이 말을 왜 할까 생각해보면, 결국 유튜브는 물리적 거리가 백종원 님과 구독자 간에 있습니다. 그 간극은 연예인과 팬덤과 비슷하죠. 그런데 커뮤니티라고 이걸 프레임을 짜는 순간 심적 거리가 확 줄어듭니다. 그래서 백종원 님이 '우리 팀', '우리 팀'이라고 하시는 거구요. 단순히 그 키워드 하나만 가지고도 253명이 공감할 정도로 구독자에게 감동을 안겨준다는 점을 주목해야 합니다. 물론 기가 막힌 영상 편집 + 믿고 보는 요리 ..

[19.06.19] P_01팀_오프라인 미팅_2회 차

카테고리 없음 2019.06.20 01:45

목적 1. 행동 패턴을 기반으로 퍼소나 작성 2. 어떤 그룹들을 주목했고 왜 그랬는가? / 퍼소나 간 가장 큰 차이 / 누구를 전략적으로 선택했는가? 시간 오후 7시 - 10시 30분 (3시간 30분) 장소 영등포역 룸투스터디 배운 점 1. 만약 작업 공간에 작업물이 보존이 안될 경우, 누군가 디지털화해서 다음 미팅 때 까지 만들어오면 없을 때보다 논의 시작을 빨리 할 수 있다 2. 미팅의 목적은 의사 결정이므로, 자신의 관점을 서술하되 조금이라도 논의를 진척시키는 발언을 함께 할 것. 그게 지켜지지 않는다면 그냥 내 의견을 피력하고 결정된 내용은 아무 것도 없는 상태가 되어 버린다. 3. 머리를 쥐어 짜내서 무엇인가 만들어 내야할 때는, 시간을 너무 지체하면 아이디어도, 체력도 고갈된다. 이럴 땐 우리..

[#002] DailyUI_Material Design_Confirmation dialog

UI 디자인 2019.06.19 14:25

작업 1. 기본 스펙은 머테리얼 디자인을 따랐음 2. 쉐도우 값은 KIT내 Confirmation dialog 값을 찾아서 적용 3. Border 위 : #FFFFFF / Opacity 22% 아래 : #FFFFFF / Opacity 30% 4. Shadows 위 : #000000 / Opacity 22% 아래 : #000000 / Opacity 30% 배운 점 1. 보더 값에도 컬러를 주고 투명도를 이 중으로 겹쳐 준다는 점 2. 쉐도우 역시 마찬가지. 다만 아래 쉐도우에만 Y값 24을 주었다는 점이 다름 3. 생각보다 수치를 일일히 맞춰서 작업한다는게 쉽지 않음. 오히려 감각으로 디자인하는게 쉬운 일이었다는 걸 깨달음

[#001] DailyUI_Sign Up

UI 디자인 2019.06.19 14:11

이미지 리소스 : https://www.humaaans.com/?fbclid=IwAR0Y6TqsbtQz0wXrKqIWf4p2qnGtubEKHxWnE4cti3hj7KuYSYvaeFUH_KE 의도 1) 회원 가입 시 꼭 수집해야 하는 정보가 있다면 이름과 이메일이라고 생각한다 보안이 필수적인 서비스를 제외하면 소비자에게 부담을 덜 수 있는 개인 정보의 레벨 수집한 이름과 메일은 뉴스레터 마케팅으로 활용 가능 2) Sign Up 텍스트 필드가 아래에 있는 이유는 사용자가 가장 자연스럽게 터치하는 영역이 하단 부분이기 때문 고민 지점 1. Sign Up 페이지를 디자인할 때, 어떤 도메인지를 먼저 고민해보면 좀 더 명확하게 그 용도를 정의할 수 있을 듯 싶다 2. 회원 가입을 할 때 필요한 정보에 대해 어느 정..

[19.06.17] P_01팀_첫 오프라인 미팅

카테고리 없음 2019.06.18 22:56

목적 팀원 별 인터뷰 내용 공유 및 정리 소요 시간 오후 7시 - 10시40분 (3시간 40분) 장소 신도림역 Think Coffee 참여 인원 4명 (G, H, B, S) 의사 결정 발표 : G 다음 날 오프라인 미팅 진행 (G, B, S) - 발표 자료 제작 (B) - 내용 정리 (G, S) 오늘 배운 점 1. 어떻게 하면 팀원들이 자신이 고민하고 있는 지점, 하고 싶은 얘기를 이끌어 낼 수 있을까? 2. 팀으로 일하는 환경(교육 프로그램)에 있을 때 어디까지 일하는 방식을 제안하면 좋을까. 효율적으로 일하는게 목적이지만 강요가 되서는 안된다고 생각한다. 그 적정 수준에 대해 어떻게 하면 이야기를 나누고 합의할 수 있을까? 3. 시간을 효율적으로 사용할 방법은 없을까? 초반에 아젠다 정리, 아젠다 별..

[19.06.14] 오픈 패스_2일 차_UX

UI UX 디자인 2019.06.18 22:54

검정색 - 수업 내용, 파란색 - 나의 의견 유저 리서치를 하는 이유 1. 사람이 제품, 상황을 이해하는 방식을 알게 된다 2. 행동과 결정이 어떤 맥락에서 바뀌는지 이해 가능하다. 3. 잠재적 욕구, 필요성, 경험을 배움으로써 의미있는 서비스를 만들 수 있다. 4. 사용자층을 확장하거나 현재 제품을 개선할 기회를 모색한다. 유저 리서치 종류 1. 서베이 2. 다이어리 스터디 3. 포커스 그룹 토의 4. 쉐도잉 5. 인터뷰 6. 사용성 테스트 등등 인터뷰 프로세스 목적 정의 인터뷰를 통해 알고 싶은 것이 무엇인가? 인터뷰를 하기 전에 팀에서 가지고 있는 '기대'와 '가설'을 공유한다 인터뷰 종료 후 리서치 내용 정리 시 기대의 간극, 가설의 검증을 할 수 있다 조사 초점 수립 조사 방법 결정 직접 관찰 ..

[19.06.11] 오픈 패스_1일 차_UX

UI UX 디자인 2019.06.11 23:05

진행자 : 진현정 님, 8년 차 디자이너, 리서치-전략-화면 설계 직무 수행 Intro "어떻게 하면 UX 프로젝트를 재미있고 의미있게 할 수 있을까?" "어떻게 하면 이번 여행을 재미있고 의미있게 잘 다녀올 수 있을까?" -UX 프로젝트에서 지도(Map), 관점을 제시하는 기준(User)이 필요하다. 더블 다이아몬드 프로세스로 강의를 진행하려고 함. 조사 - 분석 - 전략 - 실행 프로젝트의 특성, 목표, 제약에 따라 유연하게 적용 방법론을 왜 써야할까? 1. 팀 : 협업과 분업 2. 최소한의 퀄리티 유지와 클라이언트 신뢰 확보 3. 지속적인 경험 축적 View Point 핵심 키워드 : 유저, Context 즉, 더블 다이아몬드 프로세스를 유저, Context 두 가지 관점으로 관통한다. 1 STEP..

[영상] 레이아웃을 디자인할 때 그리드를 사용해야 하는 이유

UI UX 디자인 2019.06.01 12:18

영상에서 그리드를 사용하길 권하는 이유는 두 가지이다. 첫 번째, 디자이너라면 규격에 얽메이지 않고 결과물을 자유롭게 만들어야 한다고 생각하지만 사용자 입장에서는 정보를 한 눈에 파악해야 하는 것이 더 중요하다. 즉, 사용자에게 명확한 정보를 전달한다는 점에서 그리드를 사용하는 것이 좋다. 두 번째, 그리드를 사용하면 창의성이 저해된다고 생각할 수 있다. 하지만 그리드를 활용하면서 창의성도 발휘할 수 있는 지점이 있다. 파란색 영역은 3 grid에서 벗어났지만, 핵심 정보는 규격 안에 있다. 또한 중간에 보라색 버튼도 그리드에서 살짝 벗어나 배치를 했다. 즉, 그리드라고 해도 꼭 그 안에 모든 것을 배치한다는 것이 아니라, 핵심 정보는 그 안에 넣되 그 밖에 장식적인 요소에서 충분히 창의성을 발휘할 여지..

190528 HTML/CSS 학습 노트 - 2

프론트 엔드 2019.05.28 22:30

1. 좋은 id, class 이름 짓는 Convention이 있으니 찾아서 사용하도록 하자 + 지인으로부터 도움받은 링크 ↓ [CSS] 디버깅 시간을 절약 할 수있는 CSS 명명 규칙 많은 개발자들이 CSS를 싫어한다고 들었습니다. 내 경험에 의하면, 이것은 CSS를 배우는 데 시간을 투자하지 않아 생긴 결과입니다. CSS는 가장 훌륭한 '언어'는 아니지만 20년 넘게 웹 스타일을 성공적으로... www.vobour.com [코드스쿼드] CSS 클래스와 네이밍 CSS 클래스와 네이밍 antaehyeon.github.io 2. id, class 사용은 팀 or 개인이 정한 규칙을 따르면 된다. 3. style을 HTML 페이지에 적용하는 세 가지 방법 inline - HTML 태그 안에 바로 적용하는 방법..

디자인과 엔지니어링 갭에 디자인 시스템으로 다리 놓기

디자인 시스템 2019.05.28 21:14

서베이몽키라는 서베이 서비스의 디자인 시스템을 구축한 Mike Dick의 강연 중 중요한 내용만 간추린 글입니다. 동영상 링크 ↓ Bridging the Design and Engineering Gap With Design Systems Designers today are caught between shunning redline specs and being overwhelmed to learn new skills to bring their designs to life. Out of this tension comes design systems – not only a more efficient way to design, but a better a way to bridge the gap bet www.reth..

[퍼온 글] 왜 우리는 디자인 시스템이 필요한가 — 듀오톤 정다영 대표

디자인 시스템 2019.05.28 16:48

왜 우리는 디자인 시스템이 필요한가 — 듀오톤 정다영 대표 디자인 프레임웍 (Deisgn Frameworks)1. Define — Design — Develop 2. 여러 디자인 프레임웍을 사용했었다 유명한 디자인 프레임웍: Google sprint/IDEO/double Diamond 3. 듀오톤에서 사용했던 프레임웍 (Case: ProtoPie Rebranding) 00. Pre-study: 프로젝트/프로덕트의 산업 백그라운드 리서치, 분석 01. Goal: 정의 과정. 6W 방법 활용. Golden Circle (Youtube) 02. Direction: 보통은 두 방향. 03. Keywords 04. Visualization: Mood board. 각각 생각하는 키워드별 이미지를 찾아서 무드 보드를..

[핵심 번역] 어떻게 디자인 시스템 구축에 동의를 얻어내는가?

디자인 시스템 2019.05.28 16:29

핵심 디자인 시스템의 부재로 느껴지는 비효율성. 이에 비롯된 자원 낭비를 피부로 느끼지만, 그 필요성을 회사 내부에서 소통하며 주장하기는 쉽지 않다. 그 이유는 평소 업무가 기능적인지, 근본적인지에 따라 나뉘기 때문이다. 평소 업무는 기능적이다. 내가 A라는 기능의 디자인 작업을 하면 눈에 보이고, 종종 비즈니스적 성과까지 얻어낼 수 있다. 반면에 디자인 시스템은 말 그대로 바닥부터 뼈대를 세워가는 근본적인 일이다. 눈에 보이지 않고, 그 속도가 느리다. 물론 둘 다 중요하지만, 우선순위에 따라 근본적인 작업은 뒤로 미뤄진다. We’ve all talked about design systems enough that it seems like by now, the benefits of having one w..

구조적 관점에서 UI UX 문제를 바라보기

UI UX 디자인 2019.05.28 14:41

제품이 성공하려면 내부 접점과 외부 접점 요소의 모든 계층을 흡수해 눈에 보이는 서비스와 뒤에 숨은 운영 방식을 조화롭게 받쳐줘야 한다. 제품은 복잡한 상호작용 속에서 탄생한다. 여기서 디자인적인 문제가 발생한다. 어떻게 해야 고객과 직원 모두 운영방식을 이해하는 데 필요한 정보를 받을 수 있느냐는 것이다. 이를 위해 피드백과 개념적 모델이 가장 중요한 시점이 어디인지를 살펴봐야 한다. - 도널드 노먼의 UX 디자인 특강 중, 제6장, 229p 인용글에서 가장 중요한 키워드는 피드백과 개념적 모델이다. 즉, 어느 지점에서 두 키워드가 중요한가 라는 물음인데, 이를 조금 더 쉽게 질문으로 풀어볼 수 있을 것 같다. Q1. 사용자의 피드백이 서비스에 가장 큰 영향을 미치는 지점은 어디인가? Q2. 그 지점에..

190527 HTML/CSS 학습 노트 - 1

프론트 엔드 2019.05.27 22:10

1. UI레이아웃을 위한 HTML 태그들 1. HTML 5에 새롭게 추가된 header나 footer 등의 태그는 모바일 환경에서 주로 사용한다. 그 이유는 모바일 대부분 최신 브라우저를 사용하고 있기 때문에, 위 태그를 사용해도 문제없이 돌아간다. 2. PC는 사용자가 가장 오래된 버전부터 최신 버전까지 사용하는 경우가 있기 때문에, Web이라는 공공재 특성 상 그 사용자들을 배려해야 한다. 그래서 header나 footer를 사용하지 않고, div태그를 활용하고 그 대신 class 값을 header나 footer로 주어서 그 구분을 하고 있다. 3. HTML 구조화 설계 Company Name Home Home About Map About us Lorem ipsum dolor sit amet, con..

[Naver D2] 빠르게 살펴보는 웹 개발 트렌드

프론트 엔드 2019.05.27 20:59

서버 중심으로 개발 사용자가 요청한 화면을 서버에서 페이지 단위로 생성해서 제공 그 당시 JS는 제한된 기능에만 사용하는데 활용 수준 밖에 안됐음 99년쯤 ajax, 2003 spring, 2006 jquery등장 J쿼리를 통해 화면을 조작하는 기능이 붐이 일어남. 모바일이 2008년에 등장하고 나서 Mobile Firtst의 반응이 생기기 시작 모바일의 사용율이 증가하면서 반응형 웹의 수요 역시 증가 클라이언트 중심으로 개발 일단 클라이언트를 준비하고 추가로 필요한 데이터를 클라이언트가 주도적으로 요청해서 이미 화면에 떠있는 페이지 부분에 추가, DOM에 적극적으로 개입 시작 고도화 복잡해지는 프론트엔드 로직을 체계적으로 관리하기 위해 '프레임 워크' '라이브러리'를 적극적으로 사용 라이브러리의 조합으..

UX 리서치에 대한 메모

UI UX 디자인 2019.05.26 17:50

1. 기능을 만들어 내는건 Engineer. 고객들에게 필요한 기능을 알아내는 것이 UX 리서처. (informing a function) 즉, UX 리서치는 고객들이 원하는 기능을 알아내기 위해 고객과 상황에 맞는 도구들을 활용, 얻어낸 정보를 바탕으로 고객의 목소리를 대변하는 것이다. 2. Informing a value와 제품의 접점을 함께 고민하는 것이 중요. 3. 도구를 쓰는 것이 미숙할 수 있다. 하지만 훈련하면 대부분 해결된다. 하지만 마인드셋은 그렇지 않다. 4. 고객의 Pain Point를 데이터로 보는 것이 아니라, 인간으로서 깊이 공감하는 것. 도구를 사용하는 목적을 잊지 말자. 5. 리서치 자체도 혁신이 필요하다. ex. 360도 카메라 & VR 6. 리서치도 전략이다. 소수의 목표..

프로그레시브 웹앱(Progressive Web Apps)이란?

프론트 엔드 2019.05.24 00:20

2018-02-25 PROGRESSIVE WEB APPS, PWA, 프로그레시브 웹앱 프로그레시브 웹앱(Progressive Web Apps)은 Google I/O 2016에서 소개된 미래의 웹기술이며, PWA라고 줄여서 부르기도 합니다. 먼저 구글에서 소개하는 PWA는 이러합니다. PWA는 최고의 웹과 최고의 앱을 결합한 경험이다. 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다. 사용자가 PWA와 관계를 점진적으로 형성할수록 성능이 더욱 강력해 질 것이다. 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송한다. 모바일 앱처럼 전체 화면으로 로드되고, 홈 화면에 아이콘이 있다. 쉽게 말하자면, PWA는 모바일 앱과 웹 기술의 장점을 결합한 것이라고 볼 수 있습니다. ..

[책갈피] Information Anxiety 2 by 리처드 솔 워먼

디자인 노트 2019.05.22 23:24

이 글은 5월 22일 리처드 솔 워먼에게 정보 정리 훈련을 어디서, 어떻게 시작해야할 지 모르겠다 라고 메일을 보낸 뒤, 다음과 같은 답장을 받은 뒤 시작하는 책갈피이다. (메일) 안타깝게도 한글판이 없어 온라인으로 찾다보니 Information Anxiety 2를 빌릴 수 있는 사이트(https://archive.org/)가 있어서, 14일 동안 빌렸다. 아마 중복 대출이 되는 것 같아 지속적으로 빌릴 수 있을 것이다. 정보 정리에 관심을 가지게 된 계기는 다른 글에서 풀기로 하고, 영문으로 된 글을 읽으면서 조금씩 문구와 함께 내 생각을 담는 글이다. 새로운 기술이 탄생할 때 예견된 이야기들은 구체화되지 못했다. 새로운 것들은 통합되지 못했고, 오래된 것은 적응했다. -> 결국 필요에 의해 기술력은 ..

[강연 노트] Blockchain for UX Designers 2019

UI UX 디자인 2019.05.22 22:19

나의 기대사항 블록체인과 UI/UX 디자인의 결합 지점 UI/UX 디자이너의 역할과 할 일의 수준 블록체인 앱 마켓의 실체? 어떻게 기술 장벽을 극복할 수 있는가? 디자이너의 관점에서 당장 활용할 수 있는 somehow가 있는가? KEY-NOTE 주최자 강하다 님이 블록체인과 UX디자인 행사 기획을 시작하게된 계기인 미디움 글 킬러 DApp 과 UX 디자인 오랜만에 글을 써본다. 난 항상 글을 마음과 생각을 정리하기 위한 용도로 쓰기 때문에 가독성이 좋거나 내용이 좋진 않음을 유의해주길 바란다. (누군가가 읽는다면) medium.com 강연 내용 미래의 기술 블록체인 & UX Designer / 우남영 이사(전략) / 프라임블록테크놀로지 2015년에 삼성 인사 솔루션을 만든 경험이 있음 Private B..

낯선 곳에 발을 들이는 느낌

디자인 노트 2019.05.22 14:50

2019 년 5월 22일 한국디자인진흥원에서 주최한 디저트 행사에 성정기 Daylight 크리에이티브 디렉터가 방문했다. 예전 IDEO에 입사한 최초의 한국인 디자이너라는 타이틀 때문에 관심이 갔던 인물이었다. 강연을 들으러 가는 버스 안 그의 행적을 파악하기 위해 검색을 해봤다. 특이하게 대학을 7수 끝에 붙었고, 심지어 색 구분에 어려움을 겪고 있었음에도 공업디자인과에 진학했다. 대학생 때도 디자인 어워드에서 금상, 프로로 일하고 나서도 금상, 2019년에는 IF디자인 심사의원으로 활동한 인물이다. 커리어만 보면 엘리트 코스를 밟고 성장한 것 같지만, 어린 시절부터 갖은 고생을 하며 '천천히' 성장해온 사람이다. 나는 이 분을 보면서 '느리지만 단단하다'라는 느낌을 받았다. 나는 작년 회사를 퇴사하고..

UI/UX를 넘어 User Identity까지

UI UX 디자인 2019.05.20 19:56

1. 디지털 경험과 경험 고리 (Experience Loop) UX 분야가 주로 다루는 디지털 경험, 다시 말해 우리가 디지털 기기를 통해 얻는 경험은 어떤 수준의 경험 일까요? 얘기에 앞서 경험의 의미를 짚고 넘어가야 하는데, 제가 정의하는 경험은 ‘오감을 이용해 나의 주변 환경을 이해하고 일련의 정보를 획득하는 것’ 입니다. 경험에는 여러가지 계층이 존재하는데, 계층이 낮은 경험 같은 경우 “내 앞에 떡볶이가 있네. 무슨 맛일까? 먹어보니 맛있네? 다음에도 또 먹고 싶다.” 같은 생리적인 계층의 경험이 있습니다. 우리는 계층이 높은 경험에 가까워질 수록 안전, 사회적, 존경, 자아실현과 같은 경험을 하고, 그에 맞는 행동을 하게 됩니다. 경험의 계층 구조를 다른 관점에서 보면 욕구의 계층 구조라고 볼..

ABOUT ME

오늘 그리고 내일의 UI/UX디자인 오늘 그리고 내일의 UI/UX디자인

리스트 : 콘텐츠가 있으면 최근 5건을 불러옵니다.

티스토리툴바