Work Log - 2주차

 

Day 6  -  '업무역량 테스트'

• 스타벅스 페이지 예제 실습
• 업무역량 테스트 시작 (~7/21)

 
 

---

 
 
Review
 
 

 

 오늘은 멘토님께 테스트 시안을 받았다. 어도비 XD 파일로 된 시안이었고 피그마만 사용하다가 XD는 처음 다뤄봐서 프로그램 만지는 법이 익숙지 않았다.

 

시안은 메인 페이지 1개, 서브 페이지 1개, 반응형 이렇게 하는 건데 처음에 데드라인을 3일 주셔서 당황했다.

어렵냐고 물어보셔서 네..라고 대답했더니 5일로 늘려주셨다.

하나하나 살펴보니 내가 기존에 만들어왔던 페이지와는 조금 다른 관공서 페이지 느낌이었고 어려울 것 같았다 ^_^

그래서 강의를 먼저 듣고 나서 마크업부터 천천히 해보려고 한다.

 

스타벅스 페이지는 패스트캠퍼스 강의를 들으면서 만들고 있었는데, 테스트를 할 때 사용되는 swiper, gsap 등의 플러그인에 대한 강의도 포함되어 있어서 먼저 강의를 듣고 나서 테스트 페이지를 만들기로 했다.

 

헤더만 먼저 만들어볼까? 하고 손을 댔는데, 포트폴리오를 만든지 너무 오래돼서인지 감이 완전히 떨어졌다.

왜 이제 CSS보다 HTML이 더 어려운 거지?,,

 

퇴근 후 추가 학습이 정말로 필요한 때이다... 파

이팅 -

 
 
 
 

• 스타벅스 페이지 예제 실습

 

 

 

1. SEO (검색 엔진 최적화, Search Engine Optimization)

 

: 구글이나 네이버 등에 자신의 웹 사이트/페이지를 노출할 수 있도록 정보를 최적화하는 작업을 말한다.

 

 

 

2. URL 해시(Hash)는 몇 가지 쓰임이 있지만, 그 중 CSS ID 선택자를 이용해 페이지 내 특정 위치로 이동할 수 있다.

 

 

 

3. javascript:void(0)란?

: 자바스크립트를 통해서 어떤 기능을 동작시킬 건데, 그 돟작이 void, 즉 아무것도 없다는 것이다.

a 태그를 클릭했을 때 어딘가로 이동할 링크 기능이 동작해야하는데 그걸 자바스크립트로 아무 기능이 동작시키지 않겠다고 명시하는 것이다.

 

 

 

4. BEM (Block Element Modifier)

 

: HTML 클래스 속성의 작명법이다. 

- 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시한다.

- 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시한다.

 

 

 

5. GSAP (The GreenSock Animation Platform)

 

: GSAP - GreenSock

GSAP

 

 

- 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리이다. ScrollToPlugin은 스크롤 애니메이션을 지원하는 GSAP 플러그인이다.

- opacity 속성처럼 값을 숫자로 입력하는 속성들은 전환 효과(transition 속성이나 GSAP 라이브러리 등)를 통해 요소의 전/후 상태를 중간 숫자의 값으로 자연스럽게 만들어 줄 수 있지만,

display 속성처럼 값이 숫자가 아닌 속성은 전/후 상태의 중간값이 존재하지 않기 때문에, 자연스러운 전환 효과를 적용할 수 없다.

 

 

gsap.to(요소, 시간, 옵션)
// 또는
TweenMax.to(요소, 시간, 옵션)


gsap.to(window, .7, {
  scrollTo: 0
});

 

* 참고 : https://greensock.com/docs/v3/GSAP/gsap.to() 

 

Docs

 

 

 

• 업무역량 테스트 시작 (~7/21)

 

 

 

오늘은 헤더만 건들였는데 감이 완전히 떨어짐을 느꼈다...

웹디자인기능사 예제 문제와 별 다를 바가 없는데,, 천천히 다시 마크업부터 해봐야겠당

 

시안을 보니 Swiper, GSAP 플러그인이 필요할 것 같다. 우선 스타벅스 페이지를 만들면서 천천히 공부해봐야겠다 !

 

 

 

 

---

 

 

 

Day 7  -  '업무역량 테스트 ing'

• 스타벅스 페이지 예제 실습
• 업무역량 테스트 (~7/28)

 
 

---

 
 
Review
 
 
 

 테스트 파일을 받고 나서 어떻게 공부를 하고 뭐부터 만들어야 할지 고민하느라 잠도 제대로 못잤다.

일찍 일어나서 공부해보려고 했는데 쉽지 않다.

여튼 오늘 아침에 2시간 정도 공부하고 나서 출근했더니 점심 이후부터는 집중력이 현저하게 흐트러짐을 느꼈다,, 헿

이제 아침 공부는 하지 않기로 했다,, ^^ 역시 나는 야행성인데 쓸데없는 짓을 한 것 같당

 

업무 시간에 집중해서 만들고, 퇴근 후에 집에서 추가로 공부를 더 해야겠다.

그래도 바로 실무에 투입 되지 않고 멘티멘토 제도를 실행해 공부할 시간을 주시는 게 나는 감사하다.

어려워 하니 멘토님께서 팁을 알려주시고 데드라인도 다음주까지로 늘려주셨다,, Angel,,

 

감사합니다... 파이팅 !

  
 
 
 

• 스타벅스 페이지 예제 실습

 

 

 

1. Swiper 플러그인

 

: https://swiperjs.com/get-started#use-swiper-from-cdn

Swiper - The Most Modern Mobile Touch Slider

 

 

 

[ 수직 슬라이드 ]

 

 

- HTML

 

<div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="javascript:void(0)">크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내</a>
      </div>
      <div class="swiper-slide">
        <a href="javascript:void(0)">[당첨자 발표] 2023 스타벅스 플래너 영수증 이벤트</a>
      </div>
      <div class="swiper-slide">
        <a href="javascript:void(0)">스타벅스커피 코리아 애플리케이션 버전 업데이트 안내</a>
      </div>
      <div class="swiper-slide">
        <a href="javascript:void(0)">[당첨자 발표] 뉴이어 전자영수증 이벤트</a>
      </div>
    </div>
</div>

 

 

- JS

 

// Swiper
// new Siper(선택자, 옵션)
// new : 자바스크립트의 생성자(클래스) 
new Swiper('.notice-line .swiper', {
  // Optional parameters
  direction: 'vertical',
  autoplay: true, // 자동 재생 여부
  loop: true, // 반복 재생 여부
});

 

 

 

[ 수평 슬라이드 ]

 

 

- HTML

 

<div class="swiper">
<div class="swiper-wrapper">
  <div class="swiper-slide">
    <img src="./images/promotion_slide1.jpg" alt="2023 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!">
    <a href="javascript:void(0)" class="btn">자세히 보기</a>
  </div>
  <div class="swiper-slide">
    <img src="./images/promotion_slide2.jpg" alt="기간 내 스타벅스 카드 e-Gift를 3만원 이상 선물 시, 아메리카노 e-쿠폰을 드립니다.">
    <a href="javascript:void(0)" class="btn">자세히 보기</a>
  </div>
  <div class="swiper-slide">
    <img src="./images/promotion_slide3.jpg" alt="뉴이어 푸드와 제조 음료를 세트로 구매 시, 뉴이어 음료 BOGO(1+1) 쿠폰을 드립니다.">
    <a href="javascript:void(0)" class="btn">자세히 보기</a>
  </div>
  <div class="swiper-slide">
    <img src="./images/promotion_slide4.jpg" alt="신년 MD 상품 포함 3만원 이상 구매 고객께 아메리카노(톨사이즈) 쿠폰을 드립니다.">
    <a href="javascript:void(0)" class="btn">자세히 보기</a>
  </div>
  <div class="swiper-slide">
    <img src="./images/promotion_slide5.jpg" alt="2023 DIGITAL LUCKY DRAW 100% 당첨의 행운을 드립니다!">
    <a href="javascript:void(0)" class="btn">자세히 보기</a>
  </div>

</div>
</div>
<div class="swiper-pagination"></div>

<div class="swiper-button-next">
<div class="material-icons">arrow_forward</div>
</div>
<div class="swiper-button-prev">
<div class="material-icons">arrow_back</div>
</div>
</div>

 

 

- JS

 

new Swiper('.promotion .swiper', {
  slidesPerView: 3, // 한번에 보여줄 슬라이드 개수
  spaceBetween: 10, // 슬라이드 사이 여백
  centeredSlides: true, // 1번 슬라이드가 가운데 보이기
  loop: true,
  autoplay: {
    delay: 5000, // 5초마다 슬라이드 바뀜
  },
  pagination: {
    el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
    clickable: true, // 사용자의 페이지 번호 요소 제어 가능 여부
  },
  navigation: {
    nextEl: '.promotion .swiper-button-next',
    prevEl: '.promotion .swiper-button-prev',
  },
});

 

 

CSS는 별도로 설정해야 하는데, 개발자 도구에서 플러그인 내 본래 설정되어 있는 클래스들을 잘 확인하고 나서 작성해주어야 한다.

 

 

 

2. Youtube Ifram Player API

 

: https://developers.google.com/youtube/iframe_api_reference?hl=ko 

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google for Developers

 

 

IFrame Player API를 통해 YouTube 동영상을 제어할 수 있다.

유튜브 영상이 출력될 위치에 요소를 지정(생성)한다.

 

 

<!-- in HEAD -->
<script defer src="./js/youtube.js"></script>

<!-- in BODY -->
<div id="player"></div>

 

onYouTubePlayerAPIReady 함수 이름은 Youtube IFrame Player API에서 사용하는 이름이기 때문에 다르게 지정하면 동작하지 않는다 ! 그리고 함수는 전역(Global) 등록해야 한다.

 

플레이어 매개변수(playerVars)에서 더 많은 옵션을 확인할 수 있다.

 

* 참고 : https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5&hl=ko#Parameters 

 

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API  |  Google for Developers

 

 

 

- HTML

 

<section class="youtube">
    <div class="youtube__area">
      <div id="player"></div>
    </div>
    <div class="youtube__cover">
</section>

 

 

- JS

 

// Youtube IFrame API를 비동기로 로드합니다.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// onYouTubePlayerAPIReady 함수 이름은,
// Youtube IFrame Player API에서 사용하는 이름이기 때문에,
// 다르게 지정하면 동작하지 않습니다!
// 그리고 함수는 전역(Global) 등록해야 합니다!
function onYouTubeIframeAPIReady() {
  // <div id="player"></div>
  new YT.Player('player', {
    videoId: 'An6LvWQuj_8', // 최초 재생할 유튜브 영상 ID
    playerVars: {
      autoplay: true,
      loop: true,
      playlist: 'An6LvWQuj_8', // 반복 재생할 유튜브 영상 ID 목록
    },
    events: {
      onReady: function (event) {
        event.target.mute() // 음소거
      }
    }
  });
}

 

 

 

3. 3D 애니메이션

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

 

 

 

4. ScrollMagic

 

: 스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리이다.
대표적으로 어떤 요소가 현재 화면에 보이는 상태인지를 확인할 때 사용한다.

 

* 참고 : ScrollMagic - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

ScrollMagic - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

 

 

 

 

---

 

 

 

Day 8  -  '업무역량 테스트 ing'

• 스타벅스 페이지 예제 실습 (완성)
• 업무역량 테스트 (~7/28)
• 세종 지사 견학 - 대표님의 '핵심 가치' 교육

 
 

---

 
 
Review
 

 

 좋은 사수님들을 만나서 많이 배우고 있다.

오늘은 rem, em 개념을 몰라서 여쭤보고 배웠다. 이제 받은 미션을 만들어나가야 하는데 거기에 rem, em 개념을 적용할 것이다. em은 line-height에 쓰고 있는데, 회사에서 쓰는 reset.css에 기본으로 적용된 값들이 있기 때문에 거기에 맞게 사용하면 된다.

 

모르는 게 많아서 이것저것 질문하는데 너무 바쁘신 와중에 친절하게 알려주셔서 감사할 뿐이다...

그래도 오늘은 스타벅스 페이지 만들기를 완성해서 기분이 좋다.

내일부터는 본격적으로 미션 완수해야지 파이팅 ! 
 
 

 

 

• 스타벅스 페이지 예제 실습 (완성)

 

 

1. GSAP ScollToPlugin

 

: GSAP ScollToPlugin을 사용해서 상단으로 이동하는 버튼을 만들었다.

 

 

- HTML

 

<div id="to-top">
<div class="material-icons">arrow_upward</div>
</div>

 

 

- CSS

 

#to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  background-color: #333;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  z-index: 9;
}

 

 

- JS

 

* cdn : gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

const toToplEl = document.querySelector('#to-top');

window.addEventListener('scroll', _.throttle(function () {
  // console.log(window.scrollY)
  if (window.scrollY > 500) {
    // To Top 버튼 보이기 !
    gsap.to(toToplEl, .2, {
      x: 0,
    });
  } else {
    // To Top 버튼 숨기기 !
    gsap.to(toToplEl, .2, {
      x: 100,
    });
  }
}, 300));
// _.throttle(함수, 시간)

toToplEl.addEventListener('click', function () {
  gsap.to(window, .7, {
    scrollTo: 0,
  });
});

 

 

 

2. 올해가 몇 년도인지 자동으로 계산

 

: 마지막 푸터 영역에서 copyright 부분에 년도 적는 란이 있는데, 유지보수를 할 때 년도를 매번 바꾸지 않아도 되게끔 자동으로 계산하도록 만들었다.

 

 

- HTML

 

<p class="copyright">
	&copy; <span class="this-year"></span> Starbucks Coffee Company. All Rights Reserved.
</p>

 

 

- JS

 

const thisYear = document.querySelector('.this-year')
thisYear.textContent = new Date().getFullYear()
// 현재 년도의 정보 데이터가 반환됨

 

 

 

[ 결과물 ]

 

: https://poseybutter.github.io/starbucks-vanilla-app/

스타벅스 커피 코리아

 

 

 

 

 

• 세종 지사 견학 - 대표님의 '핵심 가치' 교육

 

: 회사에서 세종에서 AI 미술학원 사업을 시작하셔서 신규 입사자들만 모아서 그곳으로 견학을 갔다.

 

'AI 미술'이란 인공 지능 기술을 활용하여 미술과 창작적인 예술 작품을 생성하거나 관련된 기술을 연구하는 분야를 가리킨다. 이는 기존의 예술과 창작 과정에 인공 지능 기술을 접목하여 새로운 형태의 예술과 창작을 탐구하는 것을 포함한다.

예술 분야에 새로운 시각과 창의성을 제공하며, 미술 작품을 생성하거나 이해하는 데에도 큰 도움이 될 수 있다고 한다.

하지만 윤리적, 저작권 등의 다양한 문제에도 주의가 필요할 것 같다.

 

우리 회사는 장애인 분들과 함께 나눔의 가치를 실현하는 사업을 많이 진행하고 계신데, 그런 점에서 나는 입사 욕구가 상승했다. AI 미술 학원도 우선적으로 장애인 분들께 좋은 일자리 제공을 위해 기술을 알려 드리고 창의성을 향상시킬 수 있도록 교육하고 계신다고 한다.

이런 일들이 말은 쉽지만 실현하기는 참 어려운 일이라고 생각하는데, 이런 선한 영향력을 선사하는 기업에 오게 돼서 너무 좋다. 

 

작가님께서는 20년? 30년 동안 디자이너로 근무하시다가 최근 AI 미술에 꽂히셔서 몇 달동안 미친듯이 AI로 작품을 만드셨다고 한다. 작가님 작품들을 찾아보았는데 감각이 대단하신 것 같았다.

나는 미술 잘하는 사람이 제일 부럽다. 너무 부럽고 탐난다 예술 감각.

 

벽면에 작품들을 쭉 붙여 놓으셨는데 와 정말 구분이 안 간다.

'이게 직접 그린게 아니라고? 와 진짜 대박이다' 이런 생각만 했다.

 나같은 똥손도 스케치를 잘할 수 있는 기술이라니 너무너무 배우고 싶다. 아쉽게도 AI 미술은 한국에서 아직 활성화되어 있지 않아서 영어로 작업해야 하는데, 영어 공부도 할 겸 좋을 것 같아서 너무 욕심났다.

 

학원을 쭉 둘러보고 나서 대표님과의 핵심가치 교육이 시작되었다.

고객을 보는 철학, 조직에서의 태도, 한계를 깨기 위한 성장, 우리가 일하는 방식, 성장을 바라보는 리더십에 대해 쭉 알려주셨다. 즉, 우리의 태도와 마인드를 어떤 방향으로 설정해야할지 길을 알려주시는 시간이었다.

 

2시간 정도 대표님의 생각을 쭉 들으면서 진정성을 느낄 수 있었다. 

사실 대표님께서 어떤 생각과 가치관을 가지고 계신지 궁금했는데, 이런 대표님이라면 애사심을 가지고 책임감 있게 일할 수 있을 것 같다는 생각을 했다.

우리 회사가 어떻게 돈을 버는지, 어떤 방향으로 나아가고자 하는지, 어떤 것들을 추구하시는지 하나하나 알려주셔서 내가 회사에서 이 직무로 어떻게 성장해나가야 할지, 조직 내 태도의 중요성에 대해서도 깊이 고민해볼 수 있는 유익한 시간이었다.

 

어쨋든 이 회사에 입사하게 되어서 정말 다행이다 !

좋은 사수 분들이 계셔서 좋고, 머무르지 않고 좋은 사업을 끊임없이 실현하고 계시는 회사에 감사한다.

열심히 해야지 -

 

 

 

 

---

 

 

 

Day 9  -  '업무역량 테스트 ing'

• 업무역량 테스트 (~7/28)

 
 

---

 
 
Review
 
 

 

업무역량 테스트는 비밀 유지 사항이 있을 수도 있을 것 같아서 상세한 것 생략하기로 했다.

복지재단의 페이지를 만드는 것인데 오늘은 마크업을 쭉 하고, 헤더, 푸터부터 먼저 작업했다.

이론은 알지만 막상 실제로 코드를 짜는 것은 또 다른 일인 것 같다.

부족함을 너무 느끼고 있는 요즘이다 ㅠ_ㅠ
 

 

 

 

 

 

• 업무역량 테스트 (~7/28)

 

 

 

 

 

 

---

 

 

 

Day 10  -  '업무역량 테스트 ing'

• 업무역량 테스트 (~7/28)

 
 

---

 
 
Review
 

 

 

 코드를 짜다가 모르는 게 너무 많아서 다른 분들이 짠 코드를 먼저 찾아보기로 했다.

게시판 탭 메뉴 작업과 검색창 만드는 작업에서 막혀서 골치가 아팠다.

분명히 다 만들어 봤던 건데 왜 또 모르겠는거야 - 후우

 

이제 인강보다는 다른 분들이 만들어놓은 사이트의 코드를 뜯어 하나하나 분석해보는 게 더 실무에서 도움이 될 것 같다는 생각이 많이 들었다.

 

오늘은 검색창과 갤러리 박스까지 작업했고 주말에 jQuery 공부를 더 하고 게시판 섹션까지 작업했다 !

 

 
 
 

 

• 업무역량 테스트 (~7/28)