[내배캠] 웹 퍼블리싱 정복반 1번째 개발일지

내일배움캠프를 통해 기존에 내일배움단을 통해 공부했던 웹 개발 종합반 뿐만 아니라 '혼자 공부하는 자바스크립트' 책과 웹 퍼블리싱 정복반 강의를 제공받았어요.

위의 내용들은 본 캠프 들어가기 전 사전 캠프 기간 동안 공부하게 될 내용이에요.

 

그 중 웹 퍼블리싱 정복반 강의를 들으며 배운 내용과 공부하는 과정을 기록해보려고 합니다.

 

우선 본격적으로 강의를 하기 전에 이번 1주차에 배울 것들에 대해 간단하게 설명을 들었어요.

• 퍼블리싱
  • 그래픽 리소스를 html + css+ js 로 변환해 브라우저에 표현하는 것
  • 그래픽 리소스를 웹으로 바꾼다.
• 디자인 리소스
  • Photoshop, PowerPoint 뿐만 아니라 Sketch, Zeplin, Figma, Protopie처럼 최근 많이 사용되는 소프트웨어를 통해 디자인 리소스를 만든다.

퍼블리싱을 할 때는 이 디자인 리소스가 만들 때 똑같이 나올 수 있을지를 이해하는 것이 중요하다고 해요.

 

퍼블리싱의 개념

퍼블리싱은 디자이너가 제작한 그래픽 데이터를 웹 브라우저에 표현하기 위한 가장 기초적인 작업입니다.

• 마크업 : HTML을 통해 기본 뼈대를 만든다.
• 스타일링 : CSS로 마크업 위에 스타일을 입힌다.
• +
• 부가 기능 : Javascript로 특정 요소에 부가 기능을 부여한다.

과거에는 스타일링까지만 했지만 요즘은 커스텀된 드롭다운을 많이 사용하기 때문에, 어느정도의 javascript를 작성하는 능력이나 이해하는 능력은 필요합니다.

 

이렇게 우리가 배울 퍼블리싱에 대해 간단히 알아보고, 본격적으로 퍼블리싱을 공부하기 위한 준비를 했어요.

우리가 코딩을 할 때 사용할 VS Code 설치와 Figma에 대해 기본적인 내용을 배웠어요!

• Visual Studio Code(VS Code) 설치
  • HTML, CSS, Javascript 같은 코드를 조금 더 편하게 작성해 줄 수 있는 프로그램
  • 기본적인 문서를 작성할 때 사용하는 워드, 한컴과 비슷한 기능을 한다.

• Figma(피그마, 프로토타이핑 툴) 기본 개념
  • Sketch나 Zeplin과 같은 다양한 프로그램이 있지만, Figma의 경우는 무료로 어느정도 사용을 할 수 있도록 풀어주었기 때문에 Figma를 대상으로 샘플을 보고 어떻게 확인을 하고 사용해야 하는지를 살펴볼 것이다.
  • Figma는 다른 프로그램의 도움 없이 기획, 와이어프레임, 디자인, 프로토타이핑까지 모두 수행할 수 있다.
  • 작업 영역
    • 좌측 에이어 영역 : 포토샵에서의 레이어 역과 동일
    • 가운데 영역 : 실제 구현된 디자인 요소 미리보기
    • 우측 영역 : 현재 선택한 요소의 세부 속성

이렇게 본격적으로 퍼블리싱을 배우기 위한 준비를 마쳤어요 :)