• menu
  • logo-b
  • GitHub
    email
  • About Me
  • 작업일지
  • Works
  • Adererror
  • ARTBODA Gallery
  • Mercedes-Benz
  • CONNET
  • FIFFET

Kakaotalk

kakaotalk

Contact Me

grace9695@naver.com

adererror

프로젝트 종류

반응형 웹디자인 & 웹퍼블리싱

프로젝트 인원

팀 프로젝트 / 4인

프로젝트 기간

2024.05.07 - 2024.05.24

Skills & Tools

JavaScript, jQuery, GSAP, SCSS | Figma

Overview

ADERERROR는 2014년 한국을 기반으로 설립된 패션 문화 커뮤니케이션 브랜드입니다. 기존 ADERERROR의 심플한 홈페이지에 다양한 컨텐츠 활용과 반응형 이벤트를 구현하여 브랜드의 메세지를 적극적으로 전달합니다.

project goal

lineL

1. 자바스크립트 공부를 통한 실력 향상 및 다양한 플러그인 학습

- GSAP ScrollTrigger 활용
- SCSS, SVG 활용
- CSS 애니메이션을 이용한 제품 이미지 슬라이드

2. 아더에러의 심플한 기존 홈페이지에 다양한 이벤트를 넣어 화려하게 구현

contribute

lineS

Brand Page 전체 관리자
Index Page 디자인, 이벤트 구현 담당
웹페이지 디자인 담당
프로젝트 최종 발표, 수정+보완

workflow

W01

- 브랜드 선정 및 역할분담
- 디자인 컨셉 회의 / 피그마 작업 시작
- 퍼블리싱 가이드라인 수립
- Sub Page 디자인(제품 페이지, 제품 리스트)
- Sub Page 디자인(브랜드소개, 콜라보)

W02

- Index Page 디자인 및 마크업
- Sub Page HTML, CSS 작업
- Sub Page Js작업
- Index Page HTML, CSS 작업
- Sub Page 반응형 구현

W03

- Index Page Js 작업 (gsap, svg 활용)
- Index Page 반응형 구현 및 디자인 수정
- 각 페이지별 통일 및 최종 수정
- 프로젝트 최종 발표

design keyword

# 도전적인

# 강렬한

# 깔끔한

Typeface

ko

프리텐다드 Pretendard

프리텐다드 Pretendard

프리텐다드 Pretendard

프리텐다드 Pretendard

en

Jost Sans

Jost Sans

Jost Sans

Jost Sans

color

#FFFFFF

#F3F3F3

#000C5

#000000

브랜드의 다양한 컨셉이 담긴 컨텐츠와 제품을 보여주기 위해서, 아더에러의 시그니처 컬러인 블루와 함께 4가지의 컬러만 사용했습니다. 다양한 이미지와 어우러지도록 간결한 폰트와 스타일을 적용했습니다.

publishing

lineL

mediaQuery를 활용한 반응형 웹 제작
mobile breakpoint : 1100px
tablet breakpoint : 430px
hover, opacity, transition을 사용한 자연스러운 마우스 이벤트
animation으로 marquee 애니메이션 구현
transition을 사용해 자연스러운 움직임 구현
MouseMove, Touch, isDragging 속성을 활용한 드래그 슬라이드
JavaScript에서 EventListener를 사용한 이벤트 처리
querySelectorAll, setInterval으로 이미지 슬라이드 쇼 구현

guide line

lineS

publishing guide line 화살표

review

good

• 팀원들과 함께 퍼블리싱 가이드라인을 세워두고 작업하면서 효율적인 작업을 할 수 있었다.

• 프로젝트 진행 중 막히는 부분이 생겼을 때, 다같이 상의하며 해결점을 보다 빠르게 찾을 수 있었고 서로 소통하는 방법을 배웠다.

• 반응형 웹사이트를 구축하면서 그전에 사용해보지 않았던 플러그인을 공부하고, 기기별 특성에 최적화 된 디자인에 대해 알 수 있게되었다.

bad

• 반응형 웹사이트 구현을 목표로 하였으나, 모바일을 많이 고려하지 않은 채로 진행하다보니, 구현된 이벤트중 생략한 부분이 많아졌다.

• 팀으로 같이 작업하기 때문에 폰트, 컬러, 단위 등 미리 변수적용을 했더라면 프로젝트 마무리 단계에서 시간을 좀 더 단축시킬 수 있었을 것이다.

• 웹사이트에 부분적으로 적용한 동적 이벤트의 자잘한 오류를 완벽하게 해결하지 못했다.

takeaway

• git organization을 활용하여 협업하는 방법을 배울 수 있었다. 그 과정에서 팀원과의 소통하고, git을 효육적으로 활용하는 방법을 배우게 되었다.

• 관심 있던 브랜드의 웹사이트를 리뉴얼하면서 욕심이 생기니 더 어렵게 느껴졌다. 하지만 이 프로젝트를 통해 평소에 익숙한 것을 더 철저히 분석해야 하는 것의 중요성을 배웠다.

• gsap, scss 등 생소했던 개념에 대해 공부할 수 있는 좋은 기회였고, 이를 더 적극적으로 활용할 수 있는 퍼블리셔로 성장할 수 있는 좋은 출발이었다.

lineS

사이트 보러가기 arrow

프로젝트 완료 보고서 arrow

github 작업일지 arrow

next project ∙
next_artboda

ARTBODA gallery

back-to-top