DAY 15 팀원들과의 마지막 점심 만찬은 후토마끼_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기

드디어 사전직무교육 마지막 날입니다..!!

3주 동안 9시부터 6시..

시간이 되게 빨리 지나갔는데요

이제 인턴 시작하면 10시부터 4시, 시간은 줄어서 출퇴근은 수월할듯합니다

그치만 업무가 쉽지 않을것으로 예상이 되어

빡센건 여전할듯합니다.. ㅎㅎ

 

첫 인턴 경험이라 긴장도 되고 기대도 되고

걱정도 되고 많이 떨리네요

사전교육 받을땐 팀원분들이랑 같이 얘기도 나누고

모르는거 서로 물어보고 알려줘서 든든했는데

이제 인턴 시작하면 혼자서 해야한다는게..

같은 기업으로 가시는 분이 한분 계시는듯한데

그 분과 빨리 친해져서 같이 으쌰으쌰 해봐야겠습니다

 

오전에는 인턴 OT 하고

점심 시간이 엄청 일찍 시작했어요

10시 반에 시작해서 1시까지!

마지막날 점심을 여유롭게 맛있는걸로 먹고

디저트까지 먹었습니다

 

오후에는 발표가 있었는데요

이번주 월요일에 발표할 팀 모집하고

총 5팀이 발표했습니다

다른 팀들이 한 프로젝트들도 보고

발표는 어떤 형식으로 해야하는지 봤습니다

디자인 프로젝트 발표는 어떻게 해야하는지 알 수 있어서

다른 팀들의 발표 듣는것도 좋은 기회였습니다 :)

---

웹사이트

• Layout
  • Header
    • 모든 페이지에 일관되게 배치
    • 로고, 회원가입, 검색, 장바구니, GNB Global Navigation Bar(메뉴), 언어, SNS 등 포함
    • 배치
      • 고정형 fixed
      • 스크롤형 sticky
    • GNB Global Navigation Bar
      • 헤더 아래에 위치 or 같은 영역에 위치
      • 동일한 위치와 일관된 디자인
    • LNB Local Navigation Bar
      • GNB의 하위
      • 주로 좌측 or 중앙 or GNB에 마우스 올릴때 펼쳐지는 경우
        • 배치 이유가 논리적으로 설명이 되어야함
        • EX) 사용자들에게 잘 보이게끔 하기 위해 / 모바일 앱과 동일한 위치에 배치하기 위해
        • 사용자의 디바이스 크기 고려하여 배치
  • Hero
    • 상단의 가장 주목을 끄는 이미지/영상을 넣는 섹션
    • 이미지/영상과 카피의 퀄리티 중요
    • 캐로셀 형태로 여러 이미지 롤링
    • 사용자들의 이목을 끌어야함
      • 고퀄리티의 이미지/영상/메세지
      • 방문 목적과 가치를 빠르게 이해시켜야함
      • 명확하게 사용자의 행동 유도 (CTA) 시킴
      • 다양한 디바이스를 고려해 이미지를 최적화
  • Content
    • 정보와 자료를 보여주는 섹션
    • EX) 음악, 웹툰, 게임, 이미지 등
    • 팝업
      • 팝업 차단으로 인해 새 창 대신 토스트 팝업, 레이어 팝업, 모달 창 등으로 상황에 맞게 변경
      • 얼랏
        • 자바스크립을 사용해서 사용자에게 보라고 강조하는 작은 창
        • 버튼을 눌러야 창이 사라짐
        • 상황에 맞춰 다양한 용도로 사용 —> 확인하기 위한 창, 나가기 위한 창
        • EX) Alert / Confirm / Prompt
      • 레이어 팝업
        • 페이지 위에 하나의 레이어를 쌓아서 보여줌
      • 토스트 팝업
        • 토스트기에서 빵 나오는 것처럼 나오는 사이즈가 작은 창
        • 시간이 지나면 자동으로 사라짐
      • 반드시 필요한지 고려해서 팝업 디자인하기
  • Footer
    • 페이지 하단에 위치
    • 회사명, 주소, 연락처, 이용약관 등 정보 제공하는 섹션
    • 풋터 영역이 넓어지면서 네비게이션 역할도 추가됨
    • 도어매트 네비게이션
      • 헤더의 메뉴와 하위 카테고리가 푸터에 들어감
      • 롱스크롤일때 사용
    • 조직내 브랜드
      • 자회사 및 브랜드 목록을 첨부
      • 다국적 조직 or 브랜드가 많을 경우 사용
    • 사용자 참여
      • 쿠폰, 프로모션, SNS, 위젯, 뉴스레터 구독 여부 등을 첨부

Responsive Website 반응형 웹사이트

• 적응형 웹사이트 : 데스크 탑과 모바일을 따로 만들어 접속하는 디바이스에 맞게 랜딩 되도록 다르게 설계된 웹
• EX) 네이버, 다음
• 반응형 웹사이트 : 어떤 디바이스로 접속하던 유동적으로 UI가 배치되도록 설계된 앱
  • 디바이스가 다양하기 때문에 웹의 일관성을 유지하는게 중요 —> 반응형을 많이 사용하는 이유
  • 장점
    • 사용자의 경험을 최적화하여 만든 사이트
    • 인터렉션이 풍부함
    • 터치 인터페이스가 최적화 됨
    • 시간과 유지 보수 비용 절약
    • 사용자의 이탈률 감소
    • 구글의 검색 엔진은 반응형 웹사이트를 상위에 노출시킴
• 제작 트렌드
  • Window Only —> Mobile First —> Mobile Only
  • 모바일을 먼저 만들고 점차적으로 큰 화면 크기로 작업
    • 회사 처음 갔을 때 어느 사이즈로 만들지 먼저 물어보기
• 브레이크 포인트
  • 웹사이트 설계할때 디바이스 크기에 따라 레이아웃이 변하는 기준점
  • 주로 모바일, 태블릿, 데스크탑 3개로 설정
• 가변 영역 ↔ 고정 영역
  • 유동적인 것은 가변, 아닌것은 고정
• 반응형으로 만들기 전 준비 사항
  1. 브레이크 포인트 정하기
     1. 사용자의 디바이스들을 고려해 크기 정하기
  2. 가변 영역과 고정 영역 계획
  3. 여러 개의 카드가 있을 경우 오토 레이아웃을 만들고 방향을 Wrap으로 설정
  4. 오브젝트의 위치를 어디에 고정할지 컨스트레인트 계획
  5. 레이아웃에 따라 이미지 컨스트레인트 설정이 달라 테스트 필요
  6. 오토 레이아웃 안의 아이템은 디바이스에 따라 간격이 조정됨 [Gap between items - Auto]
• 이미지 주의 사항
  • 디자인 완료 후 마지막에 이미지 넣기
  • 프로젝트 규모에 따라 디바이스를 정한 후에 버전 정하기
  • 모바일 / 태블릿 / 데스크탑 등 크기를 내보내기

012

인턴 OT / 점심은 후토마끼. 너무 커서 다들 한번씩 터졌습니다.. / 여유로운 점심시간에 커피와 디저트까지 :)

---

 

본 후기는 유데미 x 스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기 과정(B-log) 리뷰로 작성 되었습니다.

 

#콘텐츠디자인인턴형프로그램 #콘텐츠디자인인턴형프로그램1기 #유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #콘텐츠디자인 #콘텐츠디자이너 #디자이너교육 #디자이너인턴