[코딩온] 프론트엔드 입문 Day 1 (UI/UX 이론)
서류~레벨테스트~인터뷰라는 과정을 거쳐 SeSAC 강동 3기 프론트엔드 입문과정에 합격했다!
수강신청부터 최종합격까지의 후기는 10년 전부터 운영중인 네이버 블로그에 기록했고, 앞으로 교육을 받으면서 배우는 내용을 깔끔하게 정리+아카이빙할 공간을 따로 만들고 싶었는데, 마침 첫 수업날 OT에서 개발 블로그로 티스토리가 괜찮다고 해서 바로 다음날 개설했다!👏
이제부터 여기에 꾸준히 수업내용을 차곡차곡 기록할 예정.✍️
개강 첫 날은 오전에 OT를 하고, 오후에 UI/UX 관련해서 이론 수업을 했다.
UI (User Interface)
UI = User Interface, 소비자가 제품/서비스를 이용할 때 처음 접하는 매개물
UI 디자인이란 시각적 디자인을 의미한다.
💡 UI 디자인에서 포인트 컬러 설정
1. 중요도에 따라 설정하여 클릭을 유도할 수 있다.
(이로 인해 소비자를 우리 페이지에 오래 머물게 하면 마케팅 효과까지 얻을 수 있음 👀)
2. 포인트 컬러는 가독성, 색의 대비와 조화로움이 중요하다.
→ 개인적인 생각으로는 포인트 컬러라는게 곧 홈페이지를 만드는 회사/인물을 대표하는 이미지가 될 수 있어서 어떤 컬러를 선택하느냐가 중요한 것 같다. 리더님이 이 부분에 대해 얘기할 때, 특정 컬러를 떠올리면 바로 해당 서비스가 떠오르는 사례들 일부가 생각났다. 예를 들어 마켓컬리의 퍼플과 네이버의 그린.
‘폰 레스토프 효과’ 라는 것도 말하셨는데 빨리 지나가서 대충 메모해놓은걸 지금 검색해봤다.
폰 레스토프 효과 Von Restorff Effect
독일의 심리학자 이름을 딴 심리학 용어. ‘고립 효과(Isolation Effect)’ 라고도 부른다. 여러 개의 유사한 사물 중에 나머지와 다른 사물 하나가 가장 쉽게 기억될 가능성이 크다는 것.
→ 개인적으로 사람 많은 거리에서 독특한 옷을 입고 있거나 외모가 출중하면 괜히 한번 더 보게 되는 것도 같은 효과일 것 같다는 생각..🤭
※ 디자인 심리학 관련 참고할만한 글 https://www.digitaltoday.co.kr/news/articleView.html?idxno=249860
UX (User Experience)
UX = User Experience, 사용자 경험의 편의성.
UX는 이용자가 편리하고 만족할 수 있도록 UI를 디자인하는 일.
한 마디로 설명하자면, UX를 위해 UI를 디자인하는 것!
이와 관련해서 ‘디지털 디바이드’ 도 알게 되었는데, 설명을 들으며 알고 있었고 공감하는 부분이라 열심히 고개를 끄덕였다.
디지털 디바이드 Digital Divide
기술의 발전 속도에 따라 우리의 일상생활에서 많은 부분이 더욱 빠르게 디지털화가 되면서 경제적, 사회적 여건의 차이에 의해 발생하는 정보의 격차. 대표적인 예로 키오스크 도입이 있고, 접근성의 격차를 해소하기 위해 ‘배리어프리(barrier free) 키오스크’ 같은 기기가 보급되는 중.
UI/UX 프로세스
‘더블 다이아몬드’ 형태로 진행되고, 이 과정을 반복해야 사용자가 원하는 서비스가 나온다.
Discover(조사) → Define(정의) → Develop(발전) → Deliver(구현) 의 순서로 진행한다.
Discover, Develop은 ‘사고의 확산(Diverging)’을 의미하고
Define, Deliver는 ‘사고의 수렴(Converging)’을 의미한다.
- Discover 단계에서 제품의 문제점을 찾기 위해 사용자 조사, 경쟁사 분석 등을 진행하면
- Define 단계에서 조사를 통해 나온 문제점들을 시각화하며 ‘사용자 페르소나’, ‘고객 여정 지도’ 를 사용하게 된다.
- Develop 단계에서 앞서 정의한 내용을 토대로 아이디어를 구체적으로 발전시키고
- Deliver 단계에서 시나리오나 스토리보드 작성, 또는 실제 결과물을 제작한다.
수업 중에 Discover 단계의 정량/정성적 조사에 대해 대충 메모해둬서, 지금 정리하며 찾아보았다.
- 정량적 조사는 여러 사람에게 질문하여 통계를 내는 것이라 숫자로 표시하고
- 정성적 조사는 어떤 질문을 하여 어떤 답변을 받는가가 중요하다.
개인적으로 이날 수업에서 가장 중요했던 부분이 ‘더블 다이아몬드 프로세스’, ‘사용자 페르소나’, ‘고객 여정 지도’ 였던 것 같다.
Define 단계에서 사용하는 ‘사용자 페르소나’ 는 실제 데이터를 기반으로 하기 때문에 항상 최신 상태로 유지해야 하고, 가장 중요한 고객을 찾아내는데 의미가 있다. 사용자 페르소나의 장점 7가지를 자세히 살펴보니, 제품의 타겟층으로 설정한 소비자에게 적합하도록 제품을 기획하여 소비자에게 더욱 쉽게 다가갈 수 있고, 소비자들과 꾸준한 상호작용도 가능한 작업 같았다.
그리고 ‘고객 여정 지도’ 는 (제품을 런칭할 때) 목적을 달성하기까지의 변수를 이해하고 이용할 시나리오를 그리는 작업. 소비자가 우리 제품을 알게 되고 다방면으로 탐색해보고 구매를 결정하기까지의 과정 중에 이탈이 발생하지 않도록 사전에 예상해보는 것이기 때문에 매우 중요한 부분이라고 생각했다.🤔
디자인 시스템
‘디자인 시스템’ 이란 디자인 상의 가이드라인.
개인적으로 ‘디자인 시스템’ 의 장점 4가지는 제품을 기획/개발하는 사람과 소비자 모두에게 좋은 것 같았다.
기획/개발자는 제품 제작시간을 단축하여 훨씬 효율적인 작업으로 생산성이 향상될 수 있고,
소비자는 제품의 일관성(통일감) 덕분에 디바이스의 종류에 상관없이 편리하게 제품을 사용할 수 있다.
※ ‘디자인 시스템’ 의 필수 요소는 ☞ 컬러, 타이포그래피, 아이콘, 컴포넌트, 네이밍 규칙.
그리고 ‘디자인 시스템’ 에 대해 배우면서 (드디어) 반응형 웹과 적응형 웹의 차이점에 대해 알게 되었다!
반응형 페이지는 화면의 크기에 따라 페이지의 레이아웃이 달라져서 유연성이 좋지만, 코드가 길어질 수 있다는 단점이 있다. 개인적으로 반응형 페이지는 내일배움카드로 공부할 때 실습으로 만들어봐서 알고 있었는데, 공부하던 당시에도 직접 페이지를 만들어보며 (CSS인지 JS인지는 기억나지 않지만) 코드가 상당히 길다고 느꼈었다. 그래도 요즘은 반응형 페이지의 사용 빈도가 높아지는 추세여서, 나중에 프론트엔드 개발언어 배울 때 열심히 해야겠다고 생각했다.😊
수업 중에 내가 찾았던 좋은 UI/UX 디자인을 가진 웹페이지 3개를 공유하자면,
★ 안테나 공식 홈페이지 - https://antenna.co.kr/
- 반응형 페이지로 화면의 크기에 따라 레이아웃이 바뀐다.
- 회사의 대표컬러인 노랑에 화이트를 조합하여 깔끔한 느낌이 든다.
★ 샌드박스 - https://sandbox.co.kr/
- 반응형 페이지. 중간에 옆으로 스크롤되는 효과가 있다.
- 전체적으로 효과가 다양하고 텍스트를 화이트 컬러로 하여 가독성이 좋다.
★ 영화사 NEW - https://www.its-new.co.kr/
- 무지개 느낌의 회사 컬러를 포인트 컬러로 사용했고, 스크롤에 의한 효과가 다양하다.
Atomic Design
더는 쪼갤 수 없는 원자 단위부터 결합하여 하나의 페이지를 만드는 방식.
원자(Atoms) → 분자(Molecules) → 유체(Organisms) → 템플릿(Templates) → 페이지(Pages) 순서.
내년 5월까지, 장장 5개월의 교육과정이 화기애애한 분위기에서 시작되었다.
이제 첫 숟가락을 떴으니, 앞으로 열심히 떠먹고 소화시켜보자!👍
