👀 돌아보기
◼︎ 오늘 한 일
- 아티클 스터디 팀원과 인사이트 공유
- 모임 앱은 어떤 모습이어야 할까 - 앱 개선 : 어제 혼자 따로 요약한 걸 바탕으로 팀원들과 인사이트를 나누었음!
◼︎ 오늘 겪었던 문제점
- 너무피곤했다. 잠을 잘 못잤더니 졸려서 혼났다.
◼︎ 오늘 배운 점
- 특강내용 - 리액트!!!!!
리액트에 한 발짝 더 다가간 느낌이다. 특강 내용 중에 사실 기존의 html/css/javascript는 이미 알고 있는 부분이라 그냥 아는 내용을 리마인드 하는 느낌으로 들었다. 하지만 리액트는 다르다!! 정말 아~주아주 조금 수박 겉핥기로만 배운 것이지만 재미있었고, 기존 html/css/javascript 삼총사 대신 왜 굳이 리액트를 쓰는가?에 대해 조금더 접근하고있다. 또, 디자인시스템에 대해서도 더욱더 이해도가 올라가는 것 같다. - 강의내용 - 8포인트 그리드
기존에도 알고있기는 했다. 8혹은 4의 배수로 그리드를 잡는다는 사실을 알고있었다. 하지만 버튼의 여백과 폰트가 각각 2/4씩 오르고 내린다는 등의 규칙은 기존에 모르던 내용이었고, 또 왜 8포인트 그리드를 사용하는지 좀 더 명확하게 이해가 됐다. - 강의내용 - 피그마 스케일 툴
지금까지 피그마 쓰면서 있는지도 몰랐다. (사실 거의 쓸일이 없다고 생각하긴 하지만..) 그래도 프로그램을 될 때 가장 기초가 되는 부분을 여태 모르고있었다니.. 그러면서도 다 아는 것 처럼 거들먹거렸다니. 살짝 부끄러웠다.
💻 1주차 강의 수강
내일 사전캠프가 끝나는데 이제야 강의 수강을 시작했다. 늦어부러따;;
하지만 개인적으로 피그마를 거의 다룰 줄 알기 때문에 가벼운 마음으로, 복습한다는 느낌으로 강의 수강 시작-!
1주차 강의는 크게 2파트로 나누어져 있었다.
- 웹/앱 디자인을 위한 필수 기본 지식
- 피그마 기본 기능
이렇게 나누어서 요약정리를 해보려고 한다.
피그마 기본 기능의 경우 실습이 위주였기 때문에 새로 알게된 것만 정리했다.
1. 웹/앱 디자인을 위한 필수 기본 지식
웹/앱 디자인에서 디스플레이와 해상도 개념, 배수 개념을 이해하고 있어야 디자인을 더 정밀하게 설계할 수 있다.
디스플레이와 픽셀
- 디스플레이는 아주 작은 픽셀(화소) 하나하나로 구성되어있음.
- 실제 디자인 프로그램 등에서 쓰이는 1px(픽셀)등의 단위도 이런 디스플레이의 특성에 대응하기 위해 만들어진 단위
- 픽셀에는 0.5라는 개념이 존재하지 않음 (물리적으로 1개이기 때문!)
해상도
- 해상도는 디스플레이에 쓰인 픽셀(화소)의 갯수를 의미함. 가로줄의 픽셀 갯수 * 세로줄의 픽셀 갯수로 표현함
- ex) 1920x1080(FHD) 해상도 - 해상도는 높을수록 선명함 - 잘 생각해보면 당연하다! 점을 작게 많이 찍을수록 세밀한 그림을 그릴 수 있다.
1배수 디자인
- 디자인을 할 때 기준이 되는 하나의 사이즈 : 2024기준 iOS - 375*812 / Android - 360*800
- 왜 쓰냐? - 현실세계 모바일 디바이스(휴대폰,패드)의 사이즈가 너무 많아서 각각의 사이즈를 전부 다 대응할 수 없음! 기준이 되는 사이즈를 하나 잡아서 그걸 기준으로 디자인하는 방식으로 작업해야함
- 예전에는 모바일 디바이스의 해상도가 낮았기 때문에 1배수로 디자인하면 1:1로 대응되었음. 그러나 지금은 모바일 디바이스들의 화면 해상도가 높아졌기에 밀도가 높아짐. 1배수를 기준으로 x2, x3하는 식으로 실시간 렌더링이 이루어짐.
- 1배수에서 1px -> 2배수에서는 같은 디자인이라도 해상도가 곱하기2가 되어 2px / 3배수에서는 3px이 되는 것
8포인트 그리드
- 8포인트 그리드의 원리 :
픽셀은 소수점 단위를 지원하지 않는다. 최소단위는 1이다. 따라서 나누었을때 소수점이 되는 홀수는 피하는 게 좋다. - 그렇기 때문에 8의 배수를 사용한다. 8은 2로 3번이나 나눌 수 있다! 즉 크기를 줄여도 소수점이 안나온다.
- 요즘에는 해상도가 높아졌기 때문에 사이즈를 정밀하게 조절하기 위해 4배수를 주로 이용한다. (가끔 2배수를 쓰기도 한다)
2. 피그마 기본 기능
몰랐는데 알게 된 것 : 스케일 툴 (Scale Tool)
버튼 원본을 그냥 키웠을 때 vs 스케일 툴로 키웠을 때의 비교를 해봤다.
버튼을 그냥 키우면 Radius값과 폰트 사이즈는 유지한 채 여백만 커지는 느낌이라면, 스케일 툴로 키우면 폰트도 Radius값도 같이 커진다
스케일 툴이 있는지도 몰랐다. 사실 피그마에서는 아이콘을 만들 때가 아니면 거의 쓸 일이 없다고 생각하긴 한다.
💻 특강 : '기본적인 웹 개발 구조를 알아보자(with 무신사 내맘대로 바꿔보기)'
오늘 특강은 크게 3 가지 파트로 구성됐다. 각 파트별로 강의내용을 요약해봤다.
- HTML, CSS, JavaScript에 대한 기본 이해
- 크롬 개발자 도구로 웹사이트 HTML 살펴보기
- React가 편리한 이유
[강의 내용 요약]
1. HTML, CSS, JavaScript에 대한 기본 이해
html
- 웹사이트의 뼈대가 되는 문서 .html 확장자로 존재
- '태그' 라는 개념을 통해 웹사이트 내에 존재하는 요소(문단, 버튼 등등)가 '어떤 역할을 하는 요소인지 정의' 한다.
- 태그는 아주 크게 'head 태그'와 'body 태그'로 구분된다.
- <head> 태그 안의 내용은 웹사이트의 기본적인 사항들(사이트 제목, 사이트 설명 등)을 포함하며, 웹사이트에 직접적으로 노출되지 않는다
- <body> 태그 안의 내용은 웹사이트에 직접적으로 보여주는 '내용' 그 자체를 포함한다.
- 그 외 태그들은 주로 body태그 안에서 웹사이트의 내용을 구성한다.
- ex1) <p> 태그로 문장을 감싸면 - p태그 안쪽에 존재하는 모든 텍스트는 '문단', 즉 문단 요소라고 정의된다.
- ex2) <h1>태그로 문장을 감싸면 - h1태그 안쪽에 존재하는 모든 텍스트는 'h1(제목1)', 즉 제목 요소라고 정의된다.
- 태그는 여는태그와 닫는태그로 구성되어있으며, 가끔 여는태그와 닫는태그가 하나로 합쳐진 셀프 클로징 태그라는 녀석도 있다. (img태그 등)
- ↗︎ 더 많은 태그의 종류 알아보기 사이트
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에
developer.mozilla.org
CSS
- html문서를 꾸며주는 언어
- html은 스타일이 가미되지 않은 뼈대 그 자체이므로,
폰트를 변경하거나 버튼의 색상을 변경하거나 하는 등의 디자인 요소는 css로 관리 .css확장자로 존재 - html 문서 내에서 head 태그 안에 <style> 태그를 통해 관리하거나, 별도의 .css 파일을 연결해서 관리하기도 한다.
javaScript
- html 문서가 '기능적으로 동작'하도록 도와주는 언어
- html 그 자체로는 <button> 태그를 만들어서 버튼이라는 요소를 만들어도, 그 버튼은 단독으로 기능하지 못한다.
- 버튼을 기능하게 하려면 javaScript가 필요 .js 파일로 존재
(리액트를 쓰면 .jsx라는 파일이 생성되던데 기본적으로 바닐라 자바스크립트는 .js이다!)
2. 크롬 개발자 도구로 웹사이트 html 살펴보기
- 크롬 개발자 도구 - 웹/앱 디자이너들(혹은 개발자)들의 필살무기!
- 아무 웹사이트나 들어가서 'F12'번을 누르면 보고 있는 페이지의 html,css 등을 볼 수 있다. (그것 말고도 기능은 많다)
- 디자이너들이 반응형 화면을 설계할 때, 적절한 문구의 길이를 테스트 할 때 등등 다양하게 활용할 수 있다.
- 무신사 사이트에서 개발자도구를 연 모습
- 빨간색으로 네모친 부분 - '요소 선택 기능' 을 누르면 웹페이지를 구성하고 있는 구성 요소를 하나하나 뜯어볼 수 있다.
3. React가 편리한 이유
리액트에서 컴포넌트의 개념
- 기존에 html, CSS, javaScript로 웹사이트를 관리하면, 웹페이지를 구성하는 모~든 html파일들을 하나하나 수정하는 일이 몹시 번거로움
- React에서는 웹사이트 구조 안에서 전역적으로 동작하는 '컴포넌트(Component)'라는 요소를 만들 수 있음
- 별개의 .jsx 파일에 컴포넌트를 만들어서 모든 html페이지에 연결해주지 않아도 .jsx파일만 연결해서 사용 가능.
- 리액트로 만든 컴포넌트는 html문서 내에서 '태그'처럼 사용할 수 있음
컴포넌트를 활용하는 다양한 이점
- 재사용이 가능하다
- 수정 및 관리가 간편하다
- 디자인의 일관성을 유지하게 도와준다
- varient기능을 통해 다양한 상태를 관리할 수 있게 해준다
내가 강사님한테 했던 질문들
- Q1. 리액트를 쓰면 style.css 파일은 안쓰나요?
- 쓰긴 하지만 거의 안쓰게 되긴 한다. style.css 보다 컴포넌트로 관리하는게 훨씬 편리하다. 몇가지 전역적인 테마 정도만 style.css에 설정을 해주고 나머지는 다 리액트 컴포넌트로 관리하게 된다.
- Q2. 피그마에서는 컴포넌트의 자식 개체들을 마스터로부터 Detach하는 기능이 있는데, 실제 리액트에서도 그렇게 동작이 가능한가요?
- Detach랑 완전히 동일한 매커니즘은 아니지만, 결과적으로는 비슷하게 동작하게 할 수 있다. (앞줄에 쓰인 코드보다 뒷줄에 쓰인 코드를 우선적으로 반영하는 css의 특성을 이용해서 코드를 덧씌우는 방식으로 가능)
[느낀점]
- 전에 프레이머나 웹플로우를 다루면서, 왜 피그마는 css에서의 flex같은 퍼블리싱에 사용되는 개념을 비교적 러프하게 반영했을까? 하고 고민한적이 있다. (써본 사람들은 알겠지만 프레이머나 웹플로우는 html구조를 비주얼로 1:1로 치환한 것 같은 느낌임)
- 그런데 리액트에 대해 배우면서, 피그마는 그런 것보다는 리액트에서 사용하는 개념을 디자인 툴에서 비슷한 메커니즘으로 녹여내는데 더 집중했다는 걸 확실하게 알았음. 어줍잖게 html 구조 대응하다가 정작 실제 개발자들에게 불편한 구조로 가느니, '리액트를 통한 디자인 시스템 구축'에 확실하게 포커스를 맞춘 프로덕트라는 사실을 더욱 명확하게 알게됐다.
(물론 피그마와 프레이머, 웹플로우는 주 목적이 아예 다른 프로그램이므로, 이런식의 비교는 적절치 않긴 하다! 서로 아예 방향성이 다른툴임) - 프로덕트 디자이너가 리액트까지 알아야해? 라고 좀 overwhelming될 수도 있지만 배우고 나니 배워둬서 득되면 득됐지 실될게 전혀 없는 것 같다.
👉 오늘 총평
오늘은 뭔가,, '내가 자만했었구나' 하고 느끼게 되는 날이었다.
사실 강의1주차 내용도 그렇고, 이번에 특강 내용도 그렇고 거의 아는 내용이 위주라서 복습한다는 마음으로? 사실 어쩌면 조금 지루하다? 정도로 생각했었는데, 생각보다 얻어가는게 많았다!!! 그리고 기초가 탄탄해진다는 느낌이라 좋았음👍
특강은 들을때마다 리액트에 대해서 점점 더 관심이 생긴다.
'Work > UIUX∙프로덕트 디자인' 카테고리의 다른 글
| 20241016 - 오늘 배운 것 (TIL) (0) | 2024.10.16 |
|---|---|
| 아티클 스터디 - 디자이너의 UX 참고서, 듀오링고 전격 분석 (0) | 2024.10.16 |
| 아티클 스터디 - 모임 앱은 어떤 모습이어야 할까? - 앱 개선 (2) | 2024.10.16 |
| 20241015 - 오늘 배운 것 (TIL) (0) | 2024.10.15 |
| 아티클 스터디 - AI 투자 일임 서비스 핀트(Fint), 프로덕트 분석 (3) | 2024.10.15 |
