profile

GIU BIN KANG

UX / UI Designer

PROFILE

caricature
About
  • Giu Bin (Michelle) Kang
  • +82) 10. 3194. 8167
  • 1994. 11. 22
  • binink3@gmail.com
Advantage
  • Soft, open mindset
  • Persistence personality
  • Keen observation
  • Earnest personality
  • Creative solution development
  • Korean & English bilingual
Skills
  • Web Standard
  • jQuery
  • Adaptive Web
  • Photoshop
  • Illustrator
  • Revit
HTML5 / CSS3

90 %

jQuery

85 %

Adaptive Web

90 %

Photoshop

85 %

Illustrator

85 %

English

98 %

Dog Dictionary

Concept

Living in millennial era, there are more couples and people who chose to adopt puppies over having a baby-- the "Pet-Fam People". For those who are new to raising a puppy and are currently looking for a dog community, this app is perfect for them! The concept of this app is to connect people with other dog parents out there for their puppies to have a play-date, write daily diaries of their puppies, find restaurants and hotels that are pet friendly, and upload pictures of their dogs in our own SNS.

UX & UI

While researching about the other apps that are similar to Dog Dictionary, I found it to be a bit unefficient for pet apps to have only certain function- that is why I combined diary, sns, restaurants&hotels all in ONE app. The Dog Dictionary is a handy all-in-one baby book for the dog owners. Now you can write daily diaries, update all the hospital oppointments, connect with other owners, find a playmate near you, and even find pet friendly restaurants and hotels! I combined Android Studio and Node.js to compile into apk file.

Tone & Manner

Pastel pink and white are the two main colors I used to emphasize the cuteness of puppies. Two colors also represent coziness and lovelyness of raising a service animal (dog).

MOBILE

Seoga & Cook

Desktop image
Seoga & Cook main image
Concept

This a responsive webpage which the window view automatically adjusts to whatever equipments the viewers use. In South Korea, a family restaurant Seoga & Cook is a very well known place. I thought about who will often visit this restaurant's website and two types of people came up on mind: people who are interested in the place's menu and people who are looking for franchise openings. In order to appeal to those particular groups of people, I made the menu in the middle of the site so they can be easily seen. Also I added a quick bar on the right for the franchise information section.

ADAPTIVE 1

Hyundai Engineering & Construction

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

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

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