semicolon01

semicolon semicolon03

Every Coding Is Done, When I'm Done.

semicolon02

I appreciate to you visiting
my portfolio.

This portfolio took only 700 hundred hours.
I am constantly learning and growing.
Please keep watching me :)
아이콘
  • 문세미 (Moon Se Mi)
  • 010.9516.7330
  • 1995. 01. 03
  • 건설회사 / 회계경력 3년
  • moonsemi1230@naver.com
  • 서울시 관악구 신림동 거주
아이콘
  • 더조은웹디자인 전문교육기관
       디지털웹&앱디자인 700시간 수료
  • 소프트웨어코딩지도사 2급
  • 멀티미디어콘텐츠제작전문가(필)
  • 컴퓨터그래픽스기능사(필)
  • 웹디자인 기능사(필)
아이콘
  • 하나를 알려주면 열을 아는 이해력
  • 지각. 결근은 없다 성실한 근태!
  • 타인을 배려하는 따뜻함
  • 나는 나와 싸운다. 끈기있는 지구력
  • 메모하는 습관! 꼼꼼왕
  • 웃다가 배꼽빠지는 유머왕

software skills

HTML5/css
95%
jQuery
90%
Adobe Photoshop
80%
Adobe Illustrator
85%

PROJECT
국민건강보험공단 ;

CSS

메인페이지 이미지

국민의 건강보험을 책임지는 국민건강보험공단!
회사에서 업무할 때 많이 들어갔던 홈페이지인데, 옛스러운 레이아웃 구성이 늘 조금 아쉬웠다. 톤온톤 컬러매치로 조금 더 세련되게 표현하고자 하였다.우선, 신뢰성, 따뜻함을 컨셉으로 잡았다. 신뢰있고, 강직한그레이컬러, 블루컬러와 난색계열의 따뜻한 컬러를 사용하였다.

사용자를 고려한다는 것은!
기존의 국민건강보험공단을 리디자인 하면서 우선적으로 생각한 것은 화면을 열자마자사용자들이 필요한 정보를 한 눈에 볼 수 있게 하는 것이었다.사용자들이 자주 찾는 메뉴와 그 밖에 EDI서비스 등의 메뉴를 세로로 길게 나열하는 것이 아니라, 쉽게 접근 할 수 있도록 탭메뉴를 사용하였다.

코딩을 배우고 처음 진행한 프로젝트!
img조차 쓰지 못했던 내가 여러 테그들을 사용하여 페이지를 완성했다. position의 늪에서 힘들어했지만 많은 시도 끝에 스스로 깨우치고 배울 수 있는 소중한 시간이였다. 뿐만 아니라 컬러를 조화롭게 매치하는 법을 고민하며 감각들을 익힐 수 있었다.

JQUERY

메인페이지 이미지

공단 성격에 맞는 제이쿼리 효과를!
메인비주얼 슬라이드 이미지를 한땀한땀 만들었다. 화려하지 않지만, 공단의 성격에 맞게 사용자들이 사용하기 편리한 효과들을 넣어보았다. 사용자들이 클릭한 것마다 active효과를 넣어 사용자가 무엇을 보고있는지 한번 더 인지하게 하였다. 이벤트, 광고베너들은 사용자가 hover하면 멈추게 하여 사용자를 배려하였다.

기능과 비주얼, 두가지 토끼를 잡자!
전체적으로 CSS에서 구성했던 레이아웃을 모두 재정비하여 퀄리티를 올리는데 제일 많이 힘썼다. 탭메뉴, 슬라이드, 이벤트베너 등을 넣어 더 많은 비주얼을 담았다. 또한 메인페이지의 공지사항 부분이나 sub페이지의 게시판 부분에 Ajax-Xml을 사용하였다. 유지보수가 쉽게 가능하여, 어려웠지만 보람찼고 금방 익숙해졌다.

제이쿼리는 처음이지만..
CSS에서 구현했으면 좋겠다는 기능들을 제이쿼리를 통해 적용 할 수 있어서 좋았다. 정적인 부분을 넘어 다양한 효과들과 그에 맞는 컨텐츠들로 홈페이지의 퀄리티를 높일 수 있다는 점에서 어렵지만 더 열심히 노력해야겠다는 다짐이 든다.
제이쿼리, 놓치지 않을거에요!

  • COLOR
  • VERSION

Hybrid App

  • FUN
  • TASTY
  • POSITIVE
  • CONVENIENT
  • FRIENDLY
app_iconget this app
반응형 폰화면
냉장고를 보여줘,
레시피를 보여줄게!

우리 집 냉장고에 뭐 있더라..? 냉장고에 있는 음식으로 가능한 요리는?
본격 냉장고 파먹기 프로젝트!
우리집 식사 책임지는 알뜰신잡한 APP
'집밥사용설명서'를 통해 우리집 식탁에 큰 변화를 경험해 보세요.

mobile_ppt  집밥사용설명서 앱 개발 제안서
집밥사용설명서는?
  •   우리집 냉장고 속 음식을 체크하고, 현재 냉장고 속식재료들로 만들 수 있는요리를 추천해줍니다.
  •   톤온톤 컬러매치와 세련된 UI/UX디자인으로 사용자가 이용하기 편리하고, 식욕을 돋굴 수 있도록 디자인 하였습니다.
  •   효율적인 냉장고 속 식재료 이용으로 생활비 지출도 줄이고 건강도 챙길 수 있지요.
'집밥사용설명서'의 페이지를
구경해 보세요!
01
배너1
Login page 로그인 화면 입니다.
사용자가 처음으로 보는 화면인만큼 앱의 성격을 보여주는 백그라운드 이미지와 로고를 배치하였습니다.

어느 버튼을 눌러도 다음으로 이동할 수 있습니다.
02
배너2
Onboarding page-1 어플에 관한 온보딩 화면입니다.
사용자에게 어플의 성격, 기능 등을 설명합니다. 좀 더 친근하고 친절한 어플의 모습을 어필했습니다.
03
배너3
Onboarding page-2 메인화면 온보딩 화면입니다.
각 메뉴에서도 볼 수 있습니다. 튜토리얼을 제시함으로써 접근성을 높였습니다.
04
배너4
Menu page 햄버거 화면입니다.
마이페이지 형식으로, 간단한 프로필과 사용자의 레시피 등 정보를 볼 수 있습니다.
05
배너5
Search page 검색페이지 화면입니다.
종류별, 상활별 추천테그를 이용하여
사용자가 원하는 메뉴를 검색할 수 있습니다.
06
배너6
홈(메인) page 홈(메인) 화면입니다.
사용자가 자신의 냉장고 속 재료를 선택하면, 관련레시피를 추천해줍니다. 그 밖에도 커뮤니티 기능으로 서로의 레시피를 공유할 수 있습니다.
07
배너7
메뉴추천 page '다들 요즘 뭘 먹나요?'
제철메뉴, 인기있는 레시피들을 보여주는 페이지입니다.
베스트 레시피, 랭킹 레시피들을 확인 할 수 있습니다.
08
배너8
레시피 page '레시피를 알려드릴게요.'
레시피베너의 서브 상세페이지입니다. 메뉴소개와 재료, 칼로리 등의 레시피 정보를 제공하고 상세한 레시피 과정을 사진과 함께 볼 수 있습니다.
09
배너9
식단짜기 page '뭘 먹지? 고민하지 마세요.'
월~일요일까지의 일주일 식단을 짤 수 있습니다.
다양한 레시피를 제공하여 사용자가 원하는 메뉴들을 고를 수 있습니다.
10
배너10
장보기메모 page '장보기 이제 까먹지 마세요.'
장 봐야 할 재료들을 선택하고, 구입한 제품은 체크하여 무엇을 사야하고, 무엇을 샀는지 확인 할 수 있습니다.
11
배너11
냉장고관리 page '냉장고관리 어렵지 않아요.'
현재 내 냉장고의 식재료들의 상태를 체크할 수 있습니다. 유통기한 확인하기 어려우셨죠.
집밥사용설명서가 도와드릴게요:)
12
배너12
냉장고관리 page2 유통기한 정보를 알려주고, 냉동실 혹은 상온으로 이동 버튼으로 식재료 관리를 정확하고 효율적으로 관리할 수 있습니다.

JQUERY 01

YANKEE CANDLE ;

CONCEPT

  • 눈과 코를 즐겁게 해주는 양키캔들!
    고급향초브랜드인 양키캔들은 다양한 제품으로 고객들의 니즈를 만족시킨다. 포인트 컬러로는 포근하고 따뜻한 색깔의 살구색을 사용하였다. 다양한 제품이 있는만큼 색도 정말 다양한데, 그 색깔들이 너무 튀지 않도록 조화롭게 구성하였다.

UI & UX

  • 배치는 깔끔하게, 상품 어필은 확실하게!
    다양한 상품이 많은 브랜드여서, 레이아웃부터 깔끔하게 가야겠다는 생각이 들었다.
    상품들이 많다고 쭉 나열하면 사용자들이 보기 힘들겠다고 생각하여 탭메뉴 형식으로 보기 편하게 구성해보았다. 탑이벤트배너와 슬라이드배너로 비주얼을 풍부하게 연출하였다.

EPILOGUE

  • 제이쿼리 기능을 생각하며 만든 홈페이지라 만들면서도 생동감있게 변할 홈페이지를 상상하며 작업했습니다.. 제이쿼리 소스들을 가져와 사용해도, 소스를 제대로 이해해야 사용할 수 있어서 많이 헤메고 힘들었지만 밤잠 설치면서도 시간가는 줄 모르고 즐겁게 작업했던 것 같습니다. 더 많이 공부하고 배워서 완벽하게 제이쿼리를 구사해야겠다고 다짐했다.

JQUERY 02

LOCK&LOCK MALL ;

모니터

jquery02메인

CONCEPT

  • 우리 곁에 친근한 락앤락!
    국민반찬통 락앤락 홈페이지를 리뉴얼 해보았다. 다양한 타켓층이 이용하는만큼 깔끔하고 편안한 느낌을 살려 은은한 난색계열의 색을 사용하였고, 포인트로는 락앤락의 로고색인 블루를 사용하였다.

UI & UX

  • 배치는 큼직하게, 컨텐츠 분배는 정확하게!
    컨텐츠와 어울리는 배경을 사용하여 지루하지 않게 꾸며보았다. 사용자가 물건을 구매하기 쉽게 컨텐츠별로 레이아웃을 큼직하게 나눠주었고, 슬라이드형식과 탭 형식을 이용하여 보다 많은 제품과 정보를 볼 수 있게 구성해보았다.

EPILOGUE

  • 두번 째 제이쿼리 페이지를 제작해보았는데, 점점 제이쿼리 기능을 사용하는 게 재밌어졌다. 기존에 있는 소스들로 변형도 해보고, 새로 만들어도 보면서 제이쿼리와 더 친해질 수 있는 시간이였다. 디자인적인 면에서도 자꾸자꾸 보다보니 어떤 디자인이 좋은 디자인인지 조금씩 보이기 시작했다. 컨텐츠와 어울리게 배치하는 것도 계속해서 견문을 넓혀야겠다.

ADAPTIVE 01

POSCO ENC;

Concept

  • 세계적인 경쟁력을 갖춘 우리나라 대표건설회사인 포스코건설의 반응형 홈페이지를 만들어보았습니다. 포스코건설의 아이덴티티컬러인 블루계열을 사용하여 홈페이지 컬러를 톤온톤으로 매치하였습니다. 건설회사 방문 타켓 이용층들이 자주 사용하는 메뉴들을 홈페이지 상단에 배치하여 사용자를 배려하였습니다.

UX & UI

  • 반응형 홈페이지는 하면 할수록 어렵지만 재밌습니다. transition효과를 주어 레이아웃이 변화할 때, 어색하지 않게 재밌는 요소를 추가하였습니다. 레이아웃이 변화하면서 중요한 컨텐츠 위주로 재배치하여 사용자들이 불편함없이 이용할 수 있게 하였습니다.

Epilogue

  • 반응형 홈페이지를 어떤 걸 할까 고민하면서 많은 사이트들을 찾아보았다. 그러면서 어떤 사이트는 반응형 홈페이지이고, 어떤 사이트는 그렇지 않았는데 이 차이가 참 크다는 것을 느꼈다. 시대가 빠르게 변화하면서 반응형 페이지가 많아지고 있는만큼 미디어쿼리가 참 중요하다는 것을 느끼며 계속해서 열심히 작업해야겠다고 다짐했다.

ADAPTIVE 02

LUSH ;

Concept

  • 처음으로 만든 반응형 웹페이지 입니다. 유기농 제품을 사용하는 프레쉬 핸드메이드 브랜드 '러쉬'입니다. 러쉬의 대표상품인 배쓰밤 비누거품을 백그라운드로 사용하여, 몽환적인 러쉬의 매장 분위기를 연출하였습니다.

UX & UI

  • 반응형 웹에서 가장 중요한 레이아웃이 무너지지 않게 하기 위해 많은 시간을 투자했습니다. 어떠한 브라우저, 크기에서도 무너지지 않게 꼼꼼히 설계, 디자인하여 견고한 사이트를 구축하였습니다.

Epilogue

  • 컨텐츠 배치에 있어 고민이 많았다. 각 디바이스대로 줄어들었을 때, 그에 맞는 컨텐츠를 변환하고 배치하는 것이 신기하고도 재미있었다. 컨텐츠에 대한 이해도를 많이 연습하고 배운 것 같아 뿌듯했다.

VIDEO PAGE

LABNOSH ;

Concept

요즘 떠오르는 간편하게 마시는 한 끼 식사 '랩노쉬'의 비디오페이지를 만들어보았다. '미스터 선샤인'으로 대세배우로 자리잡은 변요한이 모델이다. 광고를 보면 밥 먹을 시간도 없이 바쁘게 살아가고 있는 현대인을 묘사하며 그럼에도 든든하게 간단하게 맛있게 먹을 수 있는 랩노쉬를 광고한다.

UX & UI

낮은 버전의 브라우저에서 영상이 Flash로 Converting 될 수 있도록 제작하였다. 비디오 영상에 많은 레터링이 나와서 메뉴와 레터링이 가려지지 않게 메뉴를 상단에 배치하였다. 사이드에는 모델효과를 톡톡히 하는 변요한의 이미지를 넣어 hover 시 랩노쉬의 대표메뉴를 볼 수 있게 꾸며보았다.

Epilogue

광고의 예쁜색감과 내용이 재밌어서 작업하며 계속 봐도 지루하지 않았다.
영상의 여백에 컨텐츠를 구성하는 것이 처음에는 막막했는데, 어떤 컨텐츠를 넣어야 이 제품이 가장 잘 홍보될 수 있을까를 생각하며 홍보모델인 배우'변요한'을 적극적으로 사용하였다.

메인페이지 이미지

EPILOGUE ;

에.필.로.그 쓰는 날이 오다니 ..

view_more

[ 인생에서 가장 찬란하고 보람찼던 지난 4개월의 대장정을 마치며. ]
매사에 최선을 다하려고 노력하는 나인데, 지난 4개월은 정말 매일매일이 최선의 날들이었다고 말하고 싶다. 아침 6~7시즈음 일어나 화장을 안하면 잘 나가지를 않던 내가 쌩얼로 학원으로 향했다. 일찍 학원에 가서 코딩 워밍업을 하고, 동기들과의 수다로 아침을 연다. 8시간의 수업을 마치면 10시 반까지 남아서 자습을 하거나, 집으로 향하거나, 막달에는 신림 24시카페 할리스가 나의 아지트였다. 나를 포함해 모든 동기들이 그랬겠지.. 다들 너무 잘했다고, 수고했다고 전하고 싶다.

수업을 듣게 된 계기는요?
2018.04.30 재직자 저녁반으로 웹퍼블리셔 초급반(HTML5, CSS3)수업을 처음 들었던 날을 잊지 못한다. 컴퓨터를 아주 못 다룬다고는 생각하지 않았던 나였는데.. 생전 처음 보고, 들어보는 용어들이 날 어지럽게 했었다. img, br, div 등등의 테그들이 뭔지 조차 몰랐던 내가 지금은 공기처럼 자연스럽게 타이핑하는데 이거 참.. 새삼 신기하다.
잘하고 싶어서 회사 휴식시간, 출퇴근 시간을 짬내서 틈틈히 테그들과 그 용어들을 익히고 영문타이핑 연습을 하느라 눈물 꽤나 흘렸다. 그렇게 인내의 시간을 지나 일주일이 지나니 익숙해지기 시작했다. 타이핑이 빨라지고, 테그들이 익혀지기 시작했다. '진짜 세상에 안되는 건 없구나.. 땀과 눈물은 노력을 배신하지 않는다'라는 말이 가슴 깊이 와닿았다. 그렇게 코딩에 눈을 떴다. 그 매력에 욕심이 나기 시작했다. 초급반을 마치고 바로 중급반(JQuery, Java script)수업을 이어 들었다. 물론 처음이라 또 힘든 시간들을 보냈지만, 한번 보내고 나니 괜찮아지더라.. 저녁반 수업으로는 부족했다. 더 많이 배우고 싶어졌다. 총 3년간을 다니던 회사를 과감히 퇴사하고, 지금의 웹&앱디자인 13기 수업을 듣게되었다.

수업은 어땠나요?
수업을 한번 듣고 또 들어서 그런지 처음에 들었던 내용 중에서는 그 이해가 더 확실해졌고, 몰랐던 부분들은 채워지는 시간이였다. position 속성이 저녁반에서는 이해가 부족했는데, 이 수업을 듣고 나니 너무나도 자연스럽게 습득되었다. 제이쿼리, 자바스크립트는 여전히 배울게 많지만 어려워만 했었는데, 논리적으로 사고하고 이해하려고 노력하니, 진전이 있었다. 소스를 이해하고 변형하는 게 가능해졌다. 하지만 100% 내 것으로 만들기 위해서는 직접 코드를 쳐보고 또 쳐보고 연습해야 한다고 생각한다. 제자리에 안주하는 코더가 아니라 끊임없이 발전하고 성장하는 코더가 되고싶다. 급변하는 IT업계에서 도태되지 않으려면 두 주먹 불끈 쥐고 계속해서 공부해야 한다.

[ #5의요정 #thlㄹ수 #닉넴아쉬람 #동안 ]
절 여기까지 이끌어 주신 너무너무 감사하고 존경하는 오윤석교수님. 재직자저녁반 때부터 저희의 케미가 좀 좋았죠 교수님? :) 전 교수님을 유난히 따랐고 교수님은 그런 제가 웃기신지 항상 웃으셨죠! 지금도 그러시지만..하하 저희가 유머코드가 조금 맞아서 그런 것 같아요. 늘 신경써주시고 아껴주셔서 감사합니다. 저희 부모님보다 더 자주 뵈서 그런지 이제 가족같고 그런 건 기분탓인가요.. 이제 과정이 다 끝나간다고 하니 시원섭섭하고 아쉽고 느낌이 이상하네요.
더운 여름 지나 1인 1 선풍기를 사용했던 게 엊그제 같은데.. 벌써 코 끝이 시큰하고 첫눈도 오는 겨울이 되었네요. 추위를 유난히 많이 타시죠. 올해는 정말 기록적인 한파라니까 감기 더 조심하시고 따뜻하게 옷 잘 챙기세요! 무조건 첫째도 건강, 둘째도 건강. 건강하시고 자주 찾아뵙는다고 말로만 하지 않는 제자가 될게요. 다음 기수 졸업작품회도 꼭 오도록 해볼게요! 제가 정말 존경하고 애정합니다. 화 내실 때, 말씀 안 하실 때 조금 무서우시지만 속은 따뜻하신 거 저 다 알아요. 너무 감사드리고 또 감사드립니다. 헤어짐은 언제나 아쉬운 법이니까요. 너무 아쉬워요!
꼭 See you again.