profile

GIU BIN KANG

UX / UI Designer

PROFILE

caricature
About
  • 강규빈 (Giu Bin Kang)
  • 010. 3194. 8167
  • 1994. 11. 22
  • binink3@gmail.com
Advantage
  • 레이저 쏘는 눈빛에서 느껴지는 집중력
  • 끝을 모르는 끈기
  • 섬세함
  • 아파도 새벽 5시에 일어나는 성실함
  • border-radius: 50% 같은 원만한 성격
  • 미국 드라마를 보는 듯한 영어 발음
Skills
  • Web Standard
  • jQuery
  • Adaptive Web
  • Photoshop
  • Illustrator
  • Revit
HTML5 / CSS3

90 %

jQuery

85 %

Adaptive Web

90 %

Photoshop

85 %

Illustrator

85 %

English

98 %

개과사전

Concept

팀프로젝트로 애완견에 키우는 견주들에게 다양한 콘텐츠들의 정보들을 주기 위해서 개과사전 어플을 제작했습니다. 반려견 1만 세대에 들어선 우리 사회에게 필요한 반려견에 대한 지식과 정보를 한번에 편리하게 전달해 기존 시장에 나와있는 많은 애완견과 관련된 어플들과 차이점을 주기 위해서 새로운 기능들과 정보들을 통합하여 하나의 어플을 만들어 특히 모바일을 중점으로 생각하여 만들었기에 모바일 환경에서 필요한 메뉴를 쉽게 접근 할 수 있게 고려했습니다.

UX & UI

데스크탑 보다는 간편하고 가벼운 핸드폰과 테블렛을 더 많이 사용하는 요즘 시대에 맞게 웹 상이 아닌 앱 레이아웃에 기준을 두고 제작하다 보니 원래 공부했던 웹 레이아웃과 생각보다 많이 달랐던 점이 이번 팀프로젝트를 하면서 가장 힘든 부분이였습니다. 기존 시장에 나와있는 어플들과 어디서 어떤 차이점을 두고 있는가를 가장 많이 생각하고 고민하였고 우리 팀은 애견과 견주 모두를 위한 어플을 제작하여 반려견과 동행 할 수 있는 식당들과 숙박 시설들, 견주들을 위한 커뮤니티, 반려견의 하루 일과를 추억으로 기록할 수 있는 다이어리 등 다양한 콘텐츠들을 제작하였습니다. 또한 모바일과 동일하게 작동하는지 시험하기 위해 Android Studio 와 Node.js를 사용해 apk파일로 컴파일 하였습니다.

Tone & Manner

귀여움과 밝은 이미지반련견에 관한 어플인 만큼 귀여움과 밝은 이미지를 연상시키는 컬러인 핑크를 사용하였습니다. 또한 파스텔 톤의 핑크 계열을 사용함으로써 반련견을 자신의 아이로써 생각하는 견주들에게 조금 더 친숙한 공감을 얻을 수 있는 컬러감을 선택하였습니다. 반려견의 귀여움과 사랑스러움을 어필하기 위해서 밝은 파스텔 톤의 핑크를 메인 컬러로 사용하였고 전체적으로 깔끔한 분위기를 위해 바탕은 화이트 컬러를 사용했습니다.

MOBILE

서가앤쿡

컴퓨터 이미지
서가앤쿡 메인 이미지
Concept

첫 반응형 웹사이트를 무엇으로 할지 고민하다가 유학생 시절 한국에 올때마다 친구들과 항상 갔었던 서가앤쿡을 하기로 결정했다. 첫 반응형 작품은 대중성이 큰 브랜드이자 비쥬얼 적으로 어필이 강한 브랜드로 결정을 하였습니다. 서가앤쿡 홈페이지 이용 고객의 목적에 맞게 체인점 문의와 제품에 관한 정보, 이벤트 내용을 중점으로 반응형 웹페이지를 구축하였습니다.

UX & UI

다양한 브라우저에서 변화하는 스크린의 크기에 맞춰 다양하게 반응할 수 있도록 미디어쿼리를 사용하여 반응형 웹페이지를 제작하였습니다. 반응형 웹페이지를 배우면서 여러가지 디바이스의 화면에 맞게 제작 하는 과정이 이해하기가 힘들때도 있었지만 코딩을 다 끝내고 화면 크기가 바뀔때마다 레이아웃이 바뀌는 과정을 보고 더욱 열심히 하고 싶은 마음도 생겼습니다.

Tone & Manner

서가앤쿡은 모던한 양식 다이닝 레스토랑으로써 고유 identity 컬러인 Brown을 전반적으로 사용하여 배치하였고 화면중앙 메인이미지와 제품검색바는 전체적인 레스토랑의 색과 잘 조화될수 있게 light gray를 사용하였습니다.요식업 웹페이지인 만큼 음식 이미지들 중점으로 포커스를 맞추었습니다. 모던한 양식을 대표하는 서가앤쿡 답게 웹페이지도 깔끔한 컬러들을 선택하여 반응형으로 만들어 보니 흥미도 생기고 다음에는 다른 기업의 웹페이지를 반응형으로 만들고 싶다는 생각도 들었습니다.

ADAPTIVE 1

현대건설

컴퓨터 이미지
현대 메인 이미지
Concept

두번째 반응형은 비즈니스 웹사이트 반응형으로 제가 대학생때 처음으로 인턴을 했던 회사 현대건설을 선택했습니다. 현대건설이 대한민국을 대표하는 회사 중 하나로써 비즈니스 반응형 웹피이지를 제작하는데에 가장 적절하다고 생각하여 현대건설의 이념과 company identity 글을 읽으며 어떻게 해야 가장 최신 반응형 레이아웃을 기업 자체 이미지와 잘 어울리게 디자인을 해야하는지 고민을 많이 했습니다. 첫 반응형 작품은 20대에게 큰 대중적인 이미지가 있다면 두번째 반응형은 온 국민이 알고 있는 대표적인 비즈니스 계열사를 선정하여 그 홈페이지 이용 고객들의 목적에 맞게 채용공고와 현대건설의 최신 뉴스 및 사내 공고에 관한 정보등이 가장 눈에 띄게 끔 레이아웃을 디자인 했습니다.

UX & UI

다양한 브라우저에서 변화하는 스크린의 크기에 맞춰 다양하게 반응할 수 있도록 미디어쿼리를 사용하여 반응형 웹페이지를 제작하였습니다. 우리 나라를 대표하는 기업인 현대건설이 현재 웹 트렌드에 맞게 반응형으로 바뀌어야 한다고 생각하여 웹페이지를 유저들의 사용에 따라 모바일이나 테블릿에서 이용할 때도 유저 편의에 맞게 레이아웃을 구성하였고변화하는 시점마다 포인트를 주어 자연스럽게 레이아웃이 바뀌도록 하였습니다.

Tone & Manner

현대건설의 고유 identity 컬러인 Green을 전반적으로 사용하여하였고 시그니처 컬러인 yellowBlue를 중간에 넣었다.을 사용하였다. 텍스트에는 부분적으로 포인트를 주기위해 레드 컬러를 사용하였고 이벤트 배너도 전체적인 색상과 무난하게 어울리도록 노력하였다.

ADAPTIVE 2

U.S. Embassy of Seoul

컴퓨터 이미지
미한대사관 메인 이미지
생명감을 불어넣다

아래의 CSS에서 보여진 작품이 정적이라면 이 작품은 jQuery를 통하여 생명감을 불어넣어 정지되어 있는 화면이 동적으로 보여주고자 하였습니다. 커뮤니티 사이트의 성격을 고려하여 각 콘텐츠들에 맞게 jQuery 기술을 적용하려고 노력하였고 특히 메인페이지는 몇 부분의 영역을 빼고는 jQuery를 적용하여 움직임의 즐거움을 주려고 노력하였습니다. 처음 접해보는 제이쿼리라서 코딩을 치는 것이 어려웠지만 나중에 실행 되는 모습을 보니 마치 로봇처럼 움직이는 것 같아서 흥미로웠습니다.

UX & UI

제일 먼저 보이는 메인 페이지 우측 상단에는 미국의 가장 큰 행사라고 할 수 있는 독립기념일의 카운트 다운을 넣었고 하단에는 야후 날씨위젯을 추가하여 날씨와 날짜를 쉽게 알 수 있게 하였고 배너부분은 이미지가 자동으로 바뀌어 보이게 하였습니다. 메인 페이지에서는 하단 왼쪽 부분에 이미지 슬라이더를 넣었고 동영상 재생도 함께 될 수 있도록 하였습니다. 서브 페이지에도 json을 사용하여 데이터를 불러 실행 시킬 수 있게 하였고 오른쪽 중간 부분들에게도 이미지 슬라이더를 적용하였습니다.

말하는대로 생각한대로

jQuery는 마치 마법 같다는 생각을 하였습니다. 플러그인 이나 제이쿼리 코딩으로 모든 것이 움직이며 CSS코딩으로 구현할 수 없는 것들, 브라우저마다 상이함에 따라 적용이 되지 않기도 하던 부분들, 과도한 브라우저 제어로 인식하여 실행되지 못하게 막아놓아서 구현되지 않는 JavaScript와 같은 부분들이 jQuery를 거치면서 어떤 브라우저에서도 적용되는 것을 보변서 jQuery는 정말 배우고 익혀서 내가 내세울 수 있는 능력으로 키우고 싶다는 생각이 들었습니다.

jQuery 1

LUSH KOREA

컴퓨터 이미지
러쉬 메인 이미지
Concept 동물보호, 천연재료의 대명사, LUSH!

jQuery의 많은 트랜스포머 같은 혹은 마법같은 움직임을 어떤 웹사이트에 쓰면 좋을까 고민을 하다가최근에 강남역 근처 플래그쉽 스토어를 열은 러쉬 코리아로 하기로 결정했습니다. 이유는 많은 연령층의 사랑을 받고 있기 때문입니다.러쉬의 직원들의 활발함을 어떤 제이커리를 사용함으로 잘 표현이 될까 생각하면서러쉬에서 진행하는 많은 이벤트와 베스트 셀러들을 독보적으로 보이게 끔 그 콘텐츠들에게 많이 제이쿼리를 사용했습니다.

UX & UI 끝이 없는 jQuery

실행이 잘 되면 재미있고 안되면 골치 아픈 제이쿼리지만 한땀한땀 코드를 치면서 이 부분은 왜 이렇게 작동을 하고 다른 부분은 왜 작동이 안되는지 알아가면서 점점 제이쿼리의 매력에 빠졌습니다.특히 제이쿼리를 배우고 나니까 확실히 예전보다 웹페이지를 보는 시각도 달라졌고 유저의 니즈에 맞게 디자인이 되었는지 분석을 하기 시작했습니다.이미지슬라이더를 추가하여 여러 장의 제품 사진을 클릭하는 위치에 맞추어 움직이게 하였습니다.

Epilogue 한땀 한땀 치는 것이 답인 jQuery

jQuery는 정말 마법과도 같은 존재같습니다. CSS 코딩으로 구현할 수 없는 것들, 브라우저마다 상이함에 따라 적용이 되지 않ㄴ기도 하던 부분들, 과도한 브라우저 제어로 인식하여 실행되지 못하게 막아놓아서 구현되지 않는 JavaScript와 같은 부분들이 jQuery를 거치면서 어떤 브라우저에서도 적용되는 것을 보변서 jQuery는 정말 배우고 익혀서 내가 내세울 수 있는 능력으로 키우고 싶다는 생각이 들었습니다.

jQuery 2

U.S. Embassy of Seoul

컴퓨터 이미지
주 미한 대사관
레이아웃이 생명인 CSS

처음 노트패드를 열어 젠 코딩을 시작하며 HTML 에다가 CSS 링크를 거는 것 조차 버벅이던 제가 어느새 페이지 하나를 완성하고 그 웹페이지에 있는 서브까지도 코딩을 하게 되었습니다. 처음에는 예제 조차도 이해가 어려워서 한 달 내내 학원이 문닫을때 집에 가서 밤새가며 예제를 다시 하나하나 쳐보고 백그라운드 컬러를 넣어가며 div 위치 확인을 하였는데 이제는 바로 css로 코딩을 할 수 있게 되어 매우 뿌듯합니다.

UX & UI

처음으로 쳐보는 CSS 페이지라서 많이 힘들고 시간도 다른 학생들 보다 더 오래 걸렸지만 시행착오를 겪으면서 많은 학습이 되었습니다. 이미 완성 되어 있는 페이지를 보고 그것을 따라 치는것이 처음에는 막막했지만 한땀한땀 스스로 코딩을 하는 것이 얼마나 내공으로 쌓이는지 실감하였고 나중에는 레이아웃도 무너지지 않고 원하는 대로 나와서 기뻤습니다.

말하는대로 생각한대로

간단한 예제로만 배우던 코딩을 내손으로 차근차근 코딩해가며 만들어간 첫 작품입니다. HTML의 전부라 하여도 과언이 아닐 div 코딩을 통하여 메인페이지와 서브 페이지들이 조금씩 완성되는 모습을 보면서 처음에는 정말 힘들었던 CSS가 재밌어지고 작품에게 애정도 생겨 더욱 열심히 작업하였습니다. 또한 웹접근성을 고려하여 다른 브라우져들과 낮은 브라우져 테스트를 마치고 테스트 하였을 때 부분적으로 레이아웃이 무너진 것을 보고 수정하면서 사소해 보이는 하나까지도 염두에 두고 코딩해야한다는 것을 배울 수 있었습니다.

CSS

HIDDEN CLIFF HOTEL & NATURE

컴퓨터 이미지
히든클리프 메인 이미지
Concept

부트스트랩은 기존에 배웠던 반응형 페이지 처럼 따로 CSS를 쳐줘야 하는 것이 아니라 바로 HTML 에서 크기를 정하여 실행시키면 자동적으로 화면 크기에 맞춰있는 것이 너무나도 재밌었습니다. 하지만 어떻게 보면 그만큼 더욱 어려운 작품이기도 하였습니다. 이미지들이 많이 들어가는 작품이라서 어떻게 하면 잘 맞는 웹사이트 작품을 구현 할 수 있을지 고민을 하다가 요식업 페이지는 이미 했으니 여행과 휴양지, 자연의 모습이 담긴 사진들을 찾다 보니 제주도에 Hidden Cliff Hotel이 라는 곳을 알게 되었고 시원한 이미지들이 눈낄을 끌 수 있다는 것을 배워 히든 클리프 호텔 페이지를 구현해 보게 되었습니다.

Bootstrap

BARREL

Video한국의 대표 수영복 브랜드- Barrel

배럴은 유명한 수영복 브랜드로써 전체적으로 화사하고 시원한 느낌을 주기 위해서 블루와 옐로우를 사용했습니다. 매뉴는 수영과 바다를 연상시키는 서핑보드로 하였습니다. 배럴의 아이콘인 물결 웨이브를 살려 플레이 버튼으로 사용하였고 오른쪽 하단에 있는 이미지의 서핑보드에도 배럴 로고를 적어 배럴이라는 브랜드가 생소한 유저들도 배럴이 수영복과 관련된 브랜드임을 강조하였습니다.

VIDEO

Epilogue

Thank you!너무나도 수고 많았던 11기!

길고도 짧았던 5개월의 시간들, 한 사람 한 사람 고맙다는 말이 모자랄 정도로 서로가 힘들때 든든한 버팀목이 되어준 우리 식구들이 있어 지금까지 걸어올 수 있었습니다. 누구 하나 빠지지 않는 인재들과 함께한 시간들을 앞으로도 잊지 않을 것 입니다. 필드에 나가서도 서로에게 힘이 되어줄 수 있는 소중한 사람들과 함께해 진심으로 행복했습니다! 처음 코딩을 배우기 시작했을때는 마치 선생님께서 치시는 것을 받아쓰기 하듯이 정신없이 따라 치기 바빴지만 매일 밤 예제를 다시 복습하면서 조금씩 발전하는 제 모습을 보면서 뿌듯함을 느꼈습니다. 이해가 안되는 부분들이 처음에 많아서 옆 짝꿍들과 다른 언니 오빠에게 많은 도움을 받아서 끝까지 포기 하지 않고 열심히 달려 온 것 같습니다. 작품이 하나 둘 씩 나오면서 여기저기서 진심으로 피드백해주는 동기들 덕분에 포트폴리오 마무리 작업도 잘 마쳤고 힘든 시기도 잘 버틸 수 있었습니다. 끝으로 말도 많고 탈도 많았던 시간들 동안 이끌어주신 오윤석 교수님 진심으로 감사드립니다.

epilogue