-
[건강심리] 무기력하고 우울한데... 왜 기분이 이런지 모를 때 어떻게 해야할까
01. 우리가 심리적으로 불안한 이유 어두운 엄마 뱃속에서 280일동안 있다가 처음 세상에 나왔을 때 처음 느끼는 공기와 바람, 눈꺼풀로 들어오는 빛, 귀로 들어오는 이상한 소음, 피부의 느낌은 혼돈 그자체일 것이다. 뿐만 아니라 몸속에서 일어나는 반응들(배고픔, 더움, 추움, 배변욕구, 목마름 등)은 본능적으로 느껴도 왜 일어나는지 알 수가 없다. 조금 더 성장하면 인지가 발달하면서 심리상태(화남, 질투, 두려움, 불안, 기쁨 등)를 다양하게 겪어야할 운명이다. 인간의 인생은 혼돈의 흔적들이다. 그러나 우리는 그 혼돈이 어디에서부터 야기되었는지 잘 알지 못한다. 아기는 불편한 느낌이 들면 유일한 표현수단으로 울음을 터뜨려서 어른들의 도움을 구하고 감정을 해소한다. 그러나 잘 알다시피 어른은 아기처럼 감..
-
[네이버지도 2편] 리뷰기능 개선, 방향성 잡는 방법 (이해관계자, 사용자분석)
2005년, 웹 2.0 시대가 개막하며 컴퓨터에만 그쳤던 사람들의 활동이 모바일 기기까지 뻗어나가게 되었다. 이제 사용자가 콘텐츠를 소비함과 동시에 생산도 할 수 있는 쌍방향 소통을 시작했다는 뜻이다. 그와 더불어 지금까지 그러한 디지털 행동들이 모여 빅데이터라는 것을 만들어냈다. 스타벅스의 자바칩 프라푸치노가 너무 달다고 느끼는 나의 말까지 디지털화되어 전세계에 뿌릴 수 있게 된 것이다! '리뷰'라고 불리는 이런 사용자들의 의견들은 쌓이고 쌓여 많은 기업들에게 수익을 내주었다. 확실히 그들의 행동과 생각을 파악하는데 큰 역할을 한 건 분명했다. 하지만 쌓여도 너무 쌓였다. 데이터는 많은데 기업의 혁신과 변화를 일으키기 위해서 어떤 데이터를 사용해야할지 알기 어려웠다. 기업의 가치는 곧 고객들의 가치이기..
-
[네이버지도 1편] 리뷰 없으면 구매를 못하는 사람들
'글래디에이터' 영화나 로마시대의 영화를 본 사람들이라면 작품속 상황이 어떤 상황인지 이해가 될 것이다. 콜로세움같은 경기장 안에서 검투사들은 한명이 쓰러질때까지 목숨을 건 전투를 하게 된다. 그러다 한명이 도저히 싸울 수 없는 지경이 이르러 쓰러지게 되면 경기에서 이긴 검투사는 관중들에게 패배한 검투사를 죽일지 말지를 결정해달라는 신호를 보낸다. 그 때 관중들이 검지를 밑이나 위로 세우는데 바로 그 장면을 그린 것이 장 레옹 제롬의 '엄지를 아래로 (Pollice verso)' (1872)다. 아이러니하게도 패배한자의 목숨은 승리자가 아닌 관중들의 결정으로 좌지우지했다. 인간들은 이렇게 오래 전부터 주변의 평가에 살거나 죽었고 그 기억들은 하나의 생존전략으로 굳어졌다. 현대까지 넘어온 평가중심적 사회는..
-
마음이 심란하다면, 일본문화에서 엿보는 마음수련
마음이 심란하다면, 일본문화에서 엿보는 마음수련 코로나가 끝나면 가장 가고 싶은 해외여행지 중 하나가 일본이라고 합니다. 사실 코로나 전에도 부담없이 가까운 이웃나라를 간다고 하면 대부분 일본을 많이들 갔었죠. 그리고 모두들 일본의 특유 문화와 정신에 흠뻑 빠져서 돌아오곤 하는데, 재방문 의사도 높을만큼 일본은 분명 한국 사람들에게 값진 경험을 선사합니다. 특히, 일본인들의 친절함과 '오모테나시'로 대표되는 접대방식은 다른 나라에서 느낄 수 없는 그 나라의 정서이자 태도라고 생각합니다. 이러한 일본 특유의 정서와 삶을 대하는 자세는 업무뿐만 아니라 스스로의 자기계발 및 심신수련에도 도움이 될거라 생각해 이 글을 썼습니다. 오모이야리 Omoiyari '생각한다'라는 뜻의 '오모이(Omoi)'와 '보낸다'라..
-
저니맵(Journeymap)은 왜 필요하고 어떻게 써야하나요?
저니맵(Journeymap)은 왜 필요하고 어떻게 써야하나요? 저니맵 (Journey Map) 저니맵 (Journey Map)은 사용자가 목적을 달성하기 위해 행하는 일련의 과정을 시각화한 것을 말합니다. 일반적으로 저니맵을 작성하는 방법은 사용자가 제품 및 서비스를 접하기 전부터 사용중, 사용 후까지 행동들을 시간 순서대로 나열을 하고 그 행동들에 따르는 사용자의 생각과 감정을 채워서 정리해놓습니다. 경험을 행동, 감정, 생각으로 추출하고 그 속에서 이슈와 인사이트를 얻어내어 향후 제품 개선 및 새로운 개발을 위한 재료로 사용됩니다. 저니맵의 구성요소가 무엇인지 보여주기 위해 간단하게 템플릿을 만들어보았는데요. 사실 템플릿에는 정답이 없습니다. 서비스 성격에 맞게 그리고 누가 보아도 이해가 쉽게 만들면..
-
UX/UI 디자인 프로세스, 방법론은 뭐가 있을까?
UX/UI 디자인 프로세스, 방법론은 뭐가 있을까? 우리의 일상의 대부분이 디지털화 (디지털 전환: Digital Transformation)되면서 좀 더 민첩하게 시장 변화에 대응할 수 있으면서 사용자 경험 측면에서 해결방법을 모색할 수 있는 디자인 방법론들이 주목받고 있습니다. 한번 제품을 출시하면 수정하기 어려운 제조업과 달리 IT업계는 매분 매초 업데이트를 할 수 있는 환경이 갖추어져 있기 때문에 빠르게 변하는 트렌드와 환경, 사용자들의 니즈를 캐치해 반영할 수 있습니다. 이를 위해서는 기존의 폭포수(Waterfall)모델보다 테스트를 반복하고 개선해서 시장에 낼 수 있는 프로세스가 필요할 것입니다. 이번 포스팅에서는 그러한 디자인 프로세스가 무엇이 있고 업무에 맞게 선택해 사용하는 방법을 알아보..
-
[03-5] CSS 기본기 익히기: 블록 요소와 인라인 요소 태그 개념 정리!
[03-5] CSS 기본기 익히기: 블록 요소와 인라인 요소 태그 개념 정리! HTML태그는 크게 블록 요소와 인라인 요소로 나뉘어져 있습니다. 요소의 특성에 따라 CSS가 적용안될 때가 있으니 꼭 알아야할 기본 코딩상식이라 할 수 있죠. 태그의 크기와 테두리 등을 지정할 때 블록 요소와 인라인 요소의 태그에 따라 다르게 적용됩니다. 이번 포스팅에서는 요소 태그는 어떤 것이 있고 어떤 특징이 있는지 알아봅니다. 블록 요소 vs 인라인 요소 분류 태그 특징 블록 요소 h1~h6, p, ol, ul, dl, div, header, footer, section, article, aside, nav 1. 줄을 자동으로 바꾼다. 2. 너비와 높이를 지정할 수 있다. 3. 너비를 지정하지 않으면 부모 요소 너빗값의..
-
PXD (physical ux design)는 무엇일까?: 적용 사례
PXD (physical ux design)는 무엇일까?: 적용 사례 PXD (Physical UX Design) ⠀PXD 는 Physical UX Design의 약어로, 해석하면 신체적, 물리적으로 접하는 경험을 디자인하는 것을 말합니다. 일반적으로 UX하면 디지털 화면의 경험을 디자인하는 것이 아닐까 싶지만 실은 UX에도 다양한 종류가 있습니다. UX 디자인 분야는 복잡하고 다양한 전공이 서로 이어져 있기 때문에 하나하나 분리해서 보기 어렵습니다. 밑의 표는 댄 섀퍼 Dan Schaffer가 분류한 UX 분야의 도표입니다. 이 표를 본 저는 UX분야를 국한해서 보는 것보다 자신의 관심과 역량에 맞는 분야를 찾는 것이 중요하다고 느꼈습니다. 아래 사이트에서도 UX가 무엇인지 잘 설명되어 있으니 참고하면..
-
[03-4] CSS 기본기 익히기: padding, margin
[03-4] CSS 기본기 익히기: padding, margin 마진(margin)은 요소의 주변에 여백을 만들어줍니다. 그리고 패딩(padding)은 테두리와 그 안의 콘텐츠 사이의 여백을 만들어 줍니다. 이 두가지를 이용해 여백을 적절히 만들면 유저친화적인 UI를 제공할 수 있죠. 이번 시간에는 margin과 padding에 대해서 알아보도록 하겠습니다. margin & padding 01. margin과 padding 비교 margin과 padding은 서로 비교하면서 알아가는 것이 이해하기 쉬울거라 생각합니다. 먼저 아래와 같이 버튼을 화면에 띄우게 됐을 때 푸른색 테두리 안에 'Button'이라는 텍스트 요소가 있는 모습을 확인할 수 있습니다. 여기서 푸른색 테두리는 'border'에 해당되고 ..
-
[03-3] CSS 기본기 익히기: 단위 속성 한 방에 정리! (px, %, vh, vw, vmin, vmax)
[03-3] CSS 기본기 익히기: 단위 속성 한 방에 정리! (px, %, vh, vw, vmin, vmax) 건물에 있는 창문의 갯수와 그 사이의 간격, 창문의 크기는 조화롭게 이뤄져 멋있는 야경을 만들어냅니다. 웹페이지도 이와 비슷합니다. 화면의 레이아웃이 어떻게 구성되고 여백, 간격이 적절하게 지정되어 있는지에 따라 웹페이지의 첫인상이 달라보이죠. 눈에 보이는 화면에서 요소들을 적절히 배치하는 것이 가장 기본 중의 기본이라고 생각합니다. 이번 포스팅에서는 영역을 지정하는 속성값과 바깥쪽, 안쪽 여백을 지정하는 법을 알아보겠습니다. 단위 (속성값) 속성값 설명 px 픽셀 단위로 지정합니다. % 부모태그를 기준으로 %단위로 지정합니다. vw 웹 브라우저의 너비를 기준으로 값을 백분율로 지정합니다. v..
-
[03-2] CSS 기본기 익히기: 중요한 폰트 태그 정리
CSS기본기 익히기: 중요한 폰트 태그 정리 폰트가 무엇이냐에 따라 글의 성격이 달라질 수 있습니다. 폰트뿐 아니라 색과 자간, 정렬 등 다양한 요소로 화면의 분위기를 바꿀 수 있습니다. 그만큼 중요한 스타일링인 폰트 태그를 본 포스팅에서 정리해봤습니다. 폰트 스타일링 01. 폰트 태그 정리표 속성명 속성값 설명 font-weight normal 폰트를 보통 굵기로 표시합니다. bold 폰트를 굵게 표시합니다. font-size px 픽셀 단위로 폰트 크기를 설정합니다. rem 최상위 부모인 태그를 기준으로 폰트 크기를 설정합니다. em 부모 요소를 기준으로 폰트 크기를 설정합니다. font-family "폰트명" 폰트의 모양을 설정합니다. color 영문명 폰트 색상을 영어 색상명으로 표기합니다. #0..
-
[03-1] HTML에서 CSS연결하기, 선택자 종류
CSS는 Cascading Style Sheet의 약어로 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소입니다. HTML은 앞서 본 것처럼 텍스트, 이미지, 표같이 정보위주를 다룬다면, CSS는 색상이나 이미지 크기나 위치, 배치 방법 등 디자인 요소를 다룹니다. 자바스크립트와 연계해 동적인 콘텐츠 표현이나 디자인 적용이 가능하죠. CSS가 등장한 이유는 HTML안에서 정보와 디자인을 보여주는 것보다 HTML은 정보위주로, CSS는 디자인 위주로 담당해서 변경내용이 있을 시 변경하기에 용이하기 때문입니다. 또한 다양한 기기에 맞게 바뀔 수 있는 반응형 디자인을 해낼 수 있죠. CSS 연결하기 먼저 CSS파일을 생성해주고 HTML파일의 head 태그 안에 를 기입합니다. link라는 단어만 적고 ent..
-
[02-4] HTML 필수태그 정리 4: 사진, 영상, 음악 태그
인터넷에서 절대 빠질 수 없는 요소는 미디어죠. 미디어는 영상, 음악, 사진 등 여러가지 유형들이 있습니다. 웹 페이지를 통해 내가 만든 영상이나 음악을 보여줄 수 있다면 나만의 자산이 되고 자릿세 없이 전세계인들에게 공유할 수 있다는 이점이 있습니다. 이번 포스팅에서는 어떻게 미디어를 출력할 수 있는지 알아보도록 하겠습니다. 미디어 태그 01. 이미지 태그 이미지 태그는 사실 이전 포스팅에서 언급한 적이 있었습니다. 2021.10.16 - [나만의 웹사이트 만들기/HTML 정복하기] - [02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자! [02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자! 어떤 바보라도 컴퓨터를 사용할 수 있다. 그래서 많은 사람들이 컴퓨터를 사용한다. (Ted Nel..
-
[02-3] HTML 필수태그 정리 3: 폼태그
폼태그란 웹 페이지에서의 입력 양식을 말합니다. 우리가 평소 로그인할 때 아이디와 패스워드를 기입하는 용도로 쓰이죠. 사용자가 기입한 정보를 백엔드서버로 전송해주는 역할을 합니다. 다양한 폼태그들을 사진과 함께 어떻게 사용되는지 확인해봅시다! 폼태그 01. 폼태그 속성 폼태그에는 name, action, method, target 등이 있습니다. 폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다. name: 폼의 이름을 지정합니다. action: 폼 데이터가 전송되는 백엔드 url을 지정합니다. method: 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST) target: action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다. a..
-
[02-2] HTML 필수태그 정리 2: 목록 태그
목록으로 분류하고 정리하는 일은 컴퓨터 안뿐만 아니라 펜으로 종이 위에 적어두기도 하죠. 그만큼 중요하고 많이 쓰이는 작성법이라고 할 수 있습니다. 이번 시간은 목록태그를 어떻게 구현할 수 있는지 간단명료하게 정리해두었습니다. 태그의 종류와 응용법만 잘 외워두면 쉽게 배울 수 있다고 생각합니다. 목록태그 01. 목록태그 종류 먼저 목록태그에는 어떤 것들이 있고 어떤 기능을 하는지 알아보도록 합시다. 종류 기능 ul 기본적인 목록 태그 (부모태그) ol 숫자 목록 태그 (부모태그) li ul과 ol의 자식태그 dl 정의형 태그 (부모태그) dt 정의하고 싶은 제목 dd 제목에 대한 설명 태그 사실 이렇게만 봐서는 대체 무슨 태그인지 감이 안잡힙니다. 직접 VScode를 켜고 어떻게 활용되는지 확인해보시는걸..
-
[02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자!
어떤 바보라도 컴퓨터를 사용할 수 있다. 그래서 많은 사람들이 컴퓨터를 사용한다. (Ted Nelson, HTML을 만든 사회 과학자) 개념 정리 TAG 태그 태그는 브라우저가 웹 문서를 잘 이해할 수 있도록 콘텐츠를 목적에 맞게 분류한 규칙입니다. 내용 이처럼 여는 태그와 닫는 태그로 구성되어 있습니다. 닫는 태그는 슬래시(/)를 넣어서 구분합니다. 부모 태그 & 자식 태그 웹 문서를 구조적으로 분류하기 위해 부모태그 안에 자식 태그를 넣어서 정리해줍니다. 부모태그 밑에 자식태그를 들여쓰기하기 위해서는 TAB을 눌러주면 됩니다. 여기에선 과 이 부모태그고 그 안에 들여쓰기한 나머지 태그들은 자식태그입니다. HTML의 기본 구조 2021.10.14 - [나만의 웹사이트 만들기/VScode] - [01] ..