(DAY17) 웹 기초 용어 알기 + 피그마 Create new property 알아보기

 

안녕하세요 :)

오늘은 웹 기초 이론수업과 피그마 property 기능을 써보는 시간을 가졌습니다.

아이콘 instance 추가하는 방법을 자꾸 까먹어서 애먹다가 오늘 과제를 다 못했습니다 😓

기능을 조금씩 더 알아가니까 클론디자인을 더 완벽히 해내야지..! 하는 쓸데없는 신념에 사로잡혀버렸어요ㅠㅠ

나무를 보지말고 숲을 보자고 다짐했지만 오늘은 돌아보니 나무만 보다가 끝났네요ㅠㅠㅠ

내가 나에게 실망해서 너무 속상한 날이었지만... 처음 써봐서 그런거니까 다음번엔 오늘보단 낫겠지 라는 마음가짐으로..💪🏻

 

---

 

 

 

✏️오늘의 학습

웹 기초용어 이론 알고가기

피그마 Create new property 기능 알아보기

실습 1) property 설정 활용하여 클론해보기→ 스타벅스 제품카드, 올리브영 로그인버튼
실습 2) 신용카드 결제 페이지 디자인
실습 3) 계산요소의 인터페이스 디자인

 

 

 

 

 

📖오늘의 핵심

"오늘 무슨일이 일어나든 나는 그것을 감당할 수 있다."고 외치기. 그것은 뇌의 회복탄력성을 불러 일으키는 것이다.

이유없이 자신의 능력을 의심하는 사람은 자연스러운 현상이다.

나무를 보지말고 숲을 보는 연습하기

 

 

 

 

 

 

📝수업 내용 메모장

 

피그마 플러그인 추천
html. to. figma
이런 기능들이 있으니까 앞으로 프로덕트디자이너로서의 포지션을 잘 설정해야 한다.

웹이란?
World Wide Web (www.~)
전 세계에 퍼져 있는 인터넷 정보들을 서로 거미줄처럼 연결해줌.

인터넷에 연결된 사용자들이 서로의 정보를 주고받을 수 있는 공간을 의미함.

웹 1.0

UX가 제한적, 뉴스처럼 읽기만 가능했음 (ex 야후꾸러기)

웹 2.0

참여와 소통중심, 양방향 정보제공 및 소통이 가능해짐
→ 프로덕트 디자이너로서 사용자가 웹에서 얼마나 쉽게 참여하고 공유할 수 있는가를 중요하게 보기 시작함

웹 3.0

분산화와 개인 중심, 2020년 ~ 미래
블록체인 기술 활용해 데이터를 분산화, 탈중앙화하여 개인이 데이터 주권을 가짐
ex)
블록체인 기반 서비스 : 이더리움, 폴카닷
탈중앙화 소셜 네트워크 : Steemit
NFT 플랫폼 : 오픈씨(OprenSea)

→ 쉽게 말하면 내 집, 내 자산. 데이터의 주인이 되는 시대

 

 

웹 기초 용어
GNB Global Navigation Bar
웹사이트 전체에 똑같이 적용되는 내비게이션 바, 어떤 페이지를 클릭해도 공통으로 쓸 수 있는 메뉴.
보통 웹사이트 최상단에 위치하여 메인메뉴라고도 부름.
GNB는 IA하고도 연관이 있음. IA가 어떻게 설계되었는지 보여준다.

LNB Local Navigation Bar
GNB의 하위 메뉴, 서브메뉴 라고도 함.
ex) 인프런 사이트에서 GNB영역에 마우스를 호버했을 때 LNB가 노출된다.

SNB Side Navigation Bar
보통 메인메뉴와 서브메뉴를 제외한 나머지 메뉴를 SNB라고 함. 

보통 왼쪽이나 오른쪽에 위치하고 있어서 Side라고 표현됨.
현장에서는 LNB와 혼용하여 쓰는 경우도 있으니 (정확히 구분 못하는 PM,PL이 많기 때문)

잘못됐다고 지적하지 말고 알잘딱 이해하고 쓰기..ㅎㅎ

FNB Foot Navigation Bar
웹사이트 가장 하단에 위치하는 메뉴.
GNB처럼 사이트 내 모든 페이지에 공통을 ㅗ노출되는 메뉴임. 푸터 라고도 함.
보통 기업 정보 등 사이트의 정보가 위치하는 영역.

헤더와 푸터
헤더에는 검색창, GNB, 홈페이지 연결 링크(보통 기업로고를 대신 올려놓음. 로고 클릭하면 홈페이지로 이동함)가 포함되어야 한다.
푸터는 컨택트 정보, 카피라이트 등 웹사이트의 정보를 기입함.

브레드 크럼
복잡한 웹사이트 안에서 방문자가 길을 잃지 않도록 현재 위치한 페이지가 어디인지 단계별로 나타내는 구성요소

서비스 제작 과정

디자이너는 기획 단계의 리서치 이후(전략)부터 참여하는 경우가 많은 것 같다고 하셨다. (멘토)

웹을 만드는 사람들
프론트, 백 관련 기본 정보들 같았는데 (이부분은 딴짓하다가 못들었음..ㅠ)
퍼블리싱에 대한 이야기도 했음


웹종류
PC 웹, 모바일 웹, 반응형 웹



피그마 Create new property 알아보기

 

 

베리언트
상단 우측 다이아몬드 안에 다이아몬드 모양 아이콘

Add variable property (우측상단 육각형 아이콘)
바코드 on/off 

 

 

 

오늘 배운 기능 화면 캡쳐

까먹을까봐 사진으로 기록해둡니다.

 

 

처음 써보는 기능이라 초반에 조금 헤맸습니다.. 몇 번 더해봐야 감이 잡힐 것 같아요.

 

 

 

 

 

실습 1) property 설정 활용하여 클론해보기→ 스타벅스, 올리브영

 

스타벅스 작업 결과물

올리브영 작업 결과물

 

💡 다른 분들은 수업시간에 다룬 부분만 (로그인버튼부분만) 하신 것 같더라고요.. 저는 페이지 전체를 클론하다보니, 과제 시간이 많이 부족했습니다 ㅠㅜ 특히 스타벅스 하단 내비게이션바도 전부 오늘 배운 기능을 공부할 겸 property 설정해서 만들어봤는데요, 다 만들고 생각해보니까 하단 내비게이션 바는 보통 3개~5개 밖에 없기 때문에 굳이 컴포넌트화를 하지 않아도 됐을 것 같다는 생각이 들었습니다 😓 숲을 봐야 했는데 나무만 본 것 같네요 

 

 

 

 

 

실습 2) 신용카드 결제 페이지 디자인

 

작업 결과물

 

 

오늘따라 레퍼런스를 되게 못찾았는데 실습시간에 쫓겨서 낮은 퀄리티로 제출해서 속상했습니다..

🤔 신용카드 결제의 필수 ui 요소에는 뭐가 있지?

지금 공부해둬야겠다고 생각했습니다. 사실, 작업은 시간만 있으면 제가 행동하면 되는 부분이라고 생각했거든요.

 

신용카드 결제 필수 UI 요소

• 카드 번호 입력 필드: 카드번호를 입력하는 텍스트 필드입니다. 브라우저의 자동 완성 기능을 활용할 수 있습니다.
• 카드 소유자 이름 입력 필드: 카드에 기재된 소유자의 이름을 입력하는 텍스트 필드입니다.
• 유효기간 입력 필드: 카드번호처럼 YY/MM 또는 MM/YY 형식으로 유효기간을 입력하는 필드입니다.
• CVV/CVC 입력 필드: 카드 뒷면(Visa, Mastercard) 또는 앞면(American Express)의 3-4자리 보안 코드를 입력하는 필드입니다.
• 결제 비밀번호 입력 필드: 카드 소유자가 설정한 결제 시 사용할 비밀번호를 입력하는 필드입니다.
• 카드사 선택: 사용 가능한 카드사 목록을 제공하여 사용자가 자신의 카드를 선택할 수 있게 합니다.
• 결제 버튼: 사용자가 입력한 정보를 확인하고 결제를 진행하도록 하는 버튼입니다.

 

💡 위 내용을 바탕으로, 다시 레퍼런스를 찾아서 재작업을 해봐야될 것 같아요.

 

 

실습 3) 계산요소의 인터페이스 디자인

계산 요소는 일반 계산기일 수도 있고, 공학용 계산기일 수도 있으며, 주택담보대출(mortgage)이나 자동차 할부(auto loan)와 같은 특수 계산기일 수도 있습니다. 또는 신용 점수 예측 계산기처럼 미래를 예측하는 계산기일 수도 있습니다.

에너지 효율 계산 ui 레퍼런스이미지 (출처: 핀터레스트)

 

 

다른 분들은 대부분 일반 계산기 화면을 작업해주셨는데, 저는 특수한 계산 ui가 뭐가 있는지 궁금했습니다. 대시보드 형식의 ui가 나오려나? 싶어서 열심히 리서치해봤는데요, 오늘따라 유독 어휘력 이슈로 원하는 레퍼런스를 잘 못찾겠더라구요ㅠ

결국에는 레퍼런스 찾아보다가 시간이 다가서 작업은 못했습니다 😭

 

다음주에 추석 연휴가 기니까 그때 나머지공부로 따로 작업하는 시간을 가져야 할 것 같아요.. 속상하네요

 

 

+ 다음날 다시 작업한 결과물

DAY18 실습때 시간이 남아서 작업했습니다.

 

레퍼런스화면 : 카카오뱅크 신용리포트 화면

 

 

 

 

💡 데이터 기반 시뮬레이션 계산기의 사례로 가져왔습니다.

 

넓은 의미에서의 ' 계산기 UI ' 라고 할 수 있다.

입력 → 계산 → 결과 의 구조를 가진다.

입력 : 사용자가 직접 타이핑하지 않고, 은행이 보유한 개인 데이터가 자동으로 입력된 상태

계산 : 백엔드에서 계산 로직이 돌아감 (신용평가사 점수, 금리 산출 공식 등)

결과 : 결과를 시각화된 수치 + 그래프로 보여준다.

 

 

 

---

 

💡 느낀점

 

오늘 과제를 다 못한 나자신에게 속상한 마음이 컸고, 오늘은 수업 이후에 사고확장스터디를 하는 날이어서 남은 과제를 마무리하지 못했다는 것에 또 속상했다.

 

사고확장 스터디가 오늘로써 벌써 3주차까지 진행했다. 시간이 참 빠르다..! 오늘 스터디원들에게서 스터디에 대한 다양한 의견을 내주셨다. 아직 스터디 감을 못잡은 부분도 있구나, 글 작성 요령이 궁금하구나 등등 다양한 의견을 들을 수 있어서 감사했다. 연휴동안 스터디에 도움될 수 있는 자료들을 찾아보고 공유해봐야겠다는 생각이 들었다.

 

 

+

어떤 레퍼런스를 찾냐에 따라 퀄리티가 달라진다는 것을 체감했다.