서울앵무새
RENEWAL DESIGN
서울앵무새는 트랜디함으로 무장한 힙한 베이커리 카페입니다. 인기에 힘입어 온라인몰도 운영을 시작했지만
온라인에서는 서울앵무새의 트랜디한 무드가 느껴지지 않아 아쉬웠습니다. 소비자가 서울앵무새에 기대하는 것은 베이커리의
맛과 품질만이 아닌 소비하며 느낄 수 있는 트랜디함이라고 생각하여 이 부분을 중점으로 리디자인을 진행했습니다.
keyword
#심플#트랜디#컬러
TARGET
빵 덕후의 온라인 성지순례
feat. 인증샷
인스타에서 이미 유명한 베이커리이지만
한번 맛보기 위해서 방문하기엔 거리가 멀어서
방문이 힘들거나 웨이팅이 힘든 고객을
위한 온라인 쇼핑몰.
Renewal Direction
심플한 구성과 컬러 포인트
Media Query를 활용한 반응형 웹으로 Pc, 테블릿, 모바일에 대응할 수 있도록 설계하여소비자의 구입이 원활할 수 있도록 했습니다.
MAIN SCREEN
서울앵무새의 대표메뉴를 제빵하는 영상을 풀 사이즈로 배치하여 서울앵무새 특유의 무드를 느낄 수 있도록 하는 동시에 대표 메뉴를 자연스럽게 노출시킬 수 있도록 했습니다.
RESPONSIVE SCREENS
Pc / Tablet / Moblie
브라우저 사이즈에 대응하기 쉽도록 구조를 심플하게 구성하여 모바일 기준 작업 후, 테블릿, PC에 대응할 수 있도록 설계했습니다.
Style Guide
Logo
서울앵무새는 앵무새캐릭터를 제외하고 뚜렷한 로고가 없습니다. 트랜디한 복고 감성과 즐거움을 표현하기 위해 곡선으로 이루어져 마치 웃는 듯한 느낌을 줄 수 있도록 한글 로고 작업을 진행했습니다.
Color Palette
심플함을 더하는 블랙앤화이트를 메인으로 서울앵무새의 포인트컬러로 무드를 더했습니다.
VIDEO
작업한 일러스트를 바탕으로 앵무새에 움직임을 주어 경쾌하고 밝은 무드의 영상을 제작했습니다.
CHARACTER
서울앵무새는 캐릭터를 활용한
디자인과 굿즈를 선보이는 것을
착안하여 베이커리 카페를 잘 표현할
수 있는 앵무새 제빵사 캐릭터를
작업했습니다.
제빵사 서울앵무새
Typography
Arial
Noto Sans
PUBLISHINGPROBLOEM & SOLUTION
Probloem
헤더 영역 position:sticky 적용이 잘 되다가 사라지는 문제 발생.
공지사항을 글자가 옆으로 이동하는 형태로 만들어주고 싶어서 어떤 방법으로 진행해야할지 고민.
모바일, 테블릿, PC 버젼으로 Break Point를 만들어 연결했으나 사이즈별 대응이 어색해 보임.
a태그 활성화 되지 않음.
Solution
sticky가 속한 영역에서만 작동하는 특성이 있다는 것을 이해하고 전체 큰영역을 만들어서 해결.
css 애니메이션으로 transform: translateX 값과 시간을 조정하여 움직임을 만들어 주었음.
Break Point(390px, 440px, 780px, 1200px)를 4번 만들어 최대한 대응이 될 수 있도록 연결.
다른 컨텐츠에 가려져서 a태그가 보여도 선택이 되지 않았던 것! z-index으로 우선순위 높여 해결.
WEB PUBLISHING
서울앵무새
서울앵무새는 인스타그램을 기반으로 성장한 베이커리 카페입니다. 일러스트를 기반으로 한 굿즈도 판매되고 있을만큼 인기를 얻고 있으며 트랜디한 느낌으로 젊은 층에게 인기가 많습니다. 서울앵무새만의 무드를 담았습니다.
PROJECT개인 프로젝트 / Media Query
작업일정2023.06.08 ~ 2023.06.15
KEYWORD#SIMPLE #TRENDY #COLOR
- Skills
- HTML5 / CSS3 / JavaScript & jQuery
- GIT & GITHUB / ILLUSTRATION / GIF / SVG / Video
- Tools
-




