TIL_10W4D_Web publishing (1)
오늘 디자인카타를 진행하였는데
두명 밖에 없어서 최대한 해보려고 노력하였습니다
디자이너의 코딩_웹퍼블리싱 (1)
01. 오리엔테이션
웹 프론트엔드 개발이란
웹 개발은 사용자가 접하는 모든 웹사이트와 애플리케이션의 외형과 동작을 설계하고 구현하는 과정
프론트엔드는 웹 개발의 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당하여, 브라우저에서 실행되는 웹 기술(HTML, CSS, JavaScript)를 사용
1) HTML
웹 페이지의 뼈대를 만듦 콘텐츠 구조를 정의하고 브라우저가 이를 해석하여 화면에 출력함
2) CSS
HTML로 만든 구조에 스타일(디자인)을 입힘
색상, 글꼴, 레이아웃 등을 정의하여 웹 페이지를 보기 좋게 만듦
사용자의 다양한 디바이스 환경(PC, 태블릿, 스마트폰 등)에 적응하는 반응형 디자인도 CSS로 구현
UX/UI 디자이너가 프론트엔드 개발을 왜 배워야 하나요?
1) 개발과 디자인의 연결 고리 이해를 위하여
HTML과 CSS는 프로덕트 디자이너가 이해해야 할 최소한의 웹 기술
이를 배우면 디자이너가 개발자에게 구현 가능한 방식을 고려하여 UI/UX를 설계할 수 있고, 효율적이고 생산성 높은 프로젝트로 이어짐
2) 경쟁력 있는 디자이너로 성장하기 위해
예비 UX/UI 디자이너로 HTML과 CSS를 이해하면 신입 디자이너 중에서도 차별화된 경쟁력을 갖출 수 있음
개발팀과의 협업에서 커뮤니케이션 비용을 줄이고, 개발자를 위한 실질적인 디자인 가이트 제시가 가능
3) 사용자 중심 설계를 강화하기 위해
웹 기술의 한계를 이해함으로써, 현실적이고 구현 가능한 디자인을 제안할 수 있음
이는 사용자 경험(UX)을 더욱 효과적으로 개선할 수 있음
4) 경력 확장과 유연성 확보
프론트엔드 개발 지식은 디자이너로서의 역할을 확장하는 데 도움
기술에 대한 이해를 통해 UI/UX 디자인의 가치를 더할 수 있음
02. HTML 소개
HTML의 기본 개념
HTML (HyperText Markup Language)
웹 페이지의 구조를 정의하는 마크업 언어
컴퓨터에게 "이것을 보여줘!"라고 말하는 언어이며, 우리가 웹사이트를 만들 때 사용하는 글자들임
브라우저는 HTML 코드를 해석하여 화면에 콘텐츠를 출력함
마크업 언어란?
마크업 언어는 컴퓨터에게 "이게 뭐야!"라고 알려주는 특별한 글쓰기 방식
사람들은 그림이나 글을 보면 금방 이해하지만, 컴퓨터는 사람의 말을 스스로 알아차리지 못함
브라우저란?
우리가 보고 싶은 그림, 글, 동양상 같은 걸 인터넷에서 가져와서 화면에 보여주는 프로그램임
대표적인 브라우저로 크롬(Chrome), 엣지(Edge), 사파리(Safari), 파이어폭스(Firefox)가 있음
HTML의 주요 역할
1) 웹 페이지의 뼈대를 만드는 것
HTML은 집을 지을 때 뼈대(구조)를 세우는 것과 같음
제목은 집의 방 이름, 문단은 방 안에 놓인 가구, 이미지는 벽에 걸린 그림처럼, 웹 페이지의 모든 요소가 어디에 있고 어떤 역할을 하는지 정함
2) 브라우저에게 지시하는 언어
컴퓨터와 브라우저는 사람처럼 말이나 그림을 바로 이해하지 못함
HTML은 "이건 제목이야!", "이건 사진이야!"라고 브라우저에게 설명하는 언어임
브라우저는 HTML을 읽고 우리가 볼 수 있는 웹 페이지를 만들어 보여줌
3) 콘텐츠를 구조화하는 것
HTML은 웹 페이지 안에 있는 내용(글, 사진, 영상 등)을 깔끔하게 정리함
제목은 크고 굵게, 문단은 작은 글씨로, 리스트는 번호나 점으로 표시되도록 미리 약속되어 있음
HTML을 쓰면 모든 콘텐츠가 질서 있게 배치됨
코딩을 열심히 적고 있는데 border 부분이 빨개서 오류가 난 줄 알고 튜터님께 찾아가 여쭤보니 오류가 아니고 코드 인식을 못하는 것 같다면서, border="1"에서 1이 변경되므로 상관 없다고 하셨음
03. HTML 실습
개발자 도구로 HTML 이해하기
1) 개발자 도구란?
개발자 도구는 웹사이트의 내부를 볼 수 있는 돋보기 같은 것이며, 웹 페이지를 만들 때 사용된 HTML, CSS, JaveScript같은 코드를 바로 확인하고, 수정해볼 수 있는 도구
2) 어디에 있나요?
모든 브라우저(크롬, 엣지, 사파리 등)에는 개발자 도구가 있어요.
단축키
Windows: F12 또는 Ctrl + Shift + I
Mac: Cmd + Option + I
3) 왜 쓰나요?
웹사이트가 어떻게 만들어졌는지 확인
HTML 코드와 화면이 어떻게 연결되었는지 배울 수 있음
실수나 문제를 쉽게 찾을 수 있음
웹사이트의 내용과 스타일을 임시로 바꿔볼 수 있어서 디자이너들도 디자인 개선 작업 혹은 디자인 검수 작업 시 자주 사용
다연의 추천으로 변경하였는데, 아이 때문인지 너무 귀엽게 보였음
딸기우유색으로 변경하였습니다!!
매력 좔좔...
고윤정 배우님을 좋아하여서 실습을 따라해보니
만족스럽습니다
여기서 자세히 보기를 누르면
04. 과제
1) 자기소개 상세 페이지 만들기
이건 내가 좋아하는 것들
2) 카드 구조 만들기
3) 네비게이션 바 구조 만들기
