롤스토리디자인연구소

라우드소싱(http://www.loud.kr)에서 주최하는 2014년도 캘린더 만들기 공모전에 참여해보았습니다. 시간이 부족해서 '3월'하나밖에 작업하지 못하였는데, 나중에 기회가 되면 이런 형태로 여러 달 한번 만들어 보고 싶네요. ▲ 2014 3월 시안 봄이 시작되는 '3월'의 특성에 맞게 민트색 배경위에 노랑과 녹색계열로 전체적인 구성을 하였습니다. 숫자 '3'을 재미나게 표현하고, 모든 도형이 원형위주로 모두 일러스트레이터에서 작업 되었습니다. 가독성 면에서는 부족할 수는 있는데 굳이 잘 보여야 할 필요는 없다고 생각하였기에 실제로 출력이 된다면 가독성에 큰 문제는 없을겁니다. 이틀뒤면 또, 11월이 시작되네요.. 스토리에 오시는 모든 분들이 한해 마무리 잘 하시길 바랍니다.

한때, 미국에서 '그루폰'이라는 소셜커머스가 등장하면서 한국에도 쿠팡에 이어 많은 소셜커머스가 등장하게 되었습니다. 그리고 최근에 많은 소셜커머스 속에서 타사와 다른 적립금이며 배송혜택 등등 메리트 있는 정책을 내놓으며 갑자기 '위메프(we make price)'라는 소셜커머스가 등장하였습니다. (위메프를 광고하는것이 아닙니다.) 이러한 등장속에 제가 앱을 이리저리 살펴보면서 뭔가 아이템은 좋은데 조금만 더 '디자인'이라는 분야에 신경쓴다면 어떨까? 하는 생각속에 개인적인 마음으로 이번 '위메프'라는 앱을 리디자인 해보았습니다. 디자인이라는 것이 답이 없으며 세월이 흐르면 또다시 바뀔 수 있으며 또한, 개개인마다 보는 관점이 다르기에 그저 편하게 보시면 감사하겠습니다. ▲ 리디자인한 '위메프' 앱 아이콘..

지난 8월에 아이폰5용 키패드 리디자인 ver2.0을 포스팅 한적이 있습니다. (아이폰5용 링크 바로가기) 의외로 뜨거운 반응에 이어 제일 많이 들어 오는 요청중 하나가 아이폰 4/4S용을 만들어 달라는 것이였습니다. 더 빠른 시일내에 작업을 할 수도 있었는데 늦어져서 참으로 죄송합니다. ▲ iOS7키패드(왼쪽), 키패드 리디자인(오른쪽/by. 도로독) 왼쪽이 9월에 정식배포된 iOS7의 디자인 입니다. 몇가지 개인적으로 마음에 안드는 부분이 있는데 그중에서 키패드 부분입니다. 실제로 정식 iOS7의 키패드부분 숫자를 터치하면 뒷배경이 원안에서 비치는 효과를 볼 수 있습니다. 물론, 완벽함을 추구하는 애플이 가독성을 고려하며 만든 디자인이라는 생각도 듭니다. ▲ 새로이 추가된 배경 5가지 기존 아이폰5용..

유난히도 더웠던 8월 이였던것 같습니다. 지금은 조금씩 날씨가 선선해지고 있네요. 이번 8월은 우연하게 만난 사람들과 많은 소통을 하게된 좋은 계기가 많이 있었습니다. 다시하여금 iOS7에 관심을 가지게 되었고.. 또 플랫디자인에 관해서도 다시 생각하게 되었습니다. 항상 패션에도 그렇듯 '유행'이라는게 존재하며, 그 유행은 다시 과거로 돌아갈 수도, 또는 생각지도 못했던 것들이 유행이 되기도 하는것 같습니다. 디자인에 관한 견해는 정말 끝도 없습니다. 내눈에는 아무리 마음에 들어도 누군가에게는 만족하지 못할수도 있기에 이런것 또한 인연의 일부가 아닌가 싶습니다. 마치 옷깃하나 스쳐도 인연이라는 사람간의 인연처럼 말이죠.. 내가 억지로 노력하지 않아도 그냥 술술 생각나듯 그리는 그런 디자인의 연속이 언젠가..

한번씩 이런 생각을 할수 있다. '아.. 이 식빵을 나는 10등분 하고 싶어.. 어떻게 하면 정확하게 10등분 할 수 있을까?' 물론, 실제로 칼을들고 식빵을 10등분 한다는건 눈대중으로 보며 나름 10등분이라 생각하고 자를 것이다. 하지만 정확한 수치로 따지자면.. 정확하게 10등분이 된건 아니다. 왜냐? 눈대중으로 잘랐기 때문이다. 하지만, 디지털에서는 당연히.. 10등분으로 정확하게 자를 수 있다. 이번 글에서 포토샵을 활용하여 이미지를 슬라이스 하는 방법을 알아보자. 예를들어, 위의그림처럼 아래 탭바의 즐겨찾기 부분을 슬라이스(자르기)한다고 치자. 일단, 즐겨찾기 부분을 포토샵의 Slice Tool을 이용하여 자르기 위해서는 우선적으로 가이드라인이 필요하다.(가이드라인이 없어도 슬라이스가 가능하기..

지난번, iOS7 키패드 부분을 리디자인하여 포스팅한적이 있었는데, 우연하게 클리앙의 '무적태권부이님'께서 제 티스토리에 오셔서 원본파일을 요청하셔서 드렸더니 직접 파일을 아이폰에 입히고 작동하는 영상을 보내주셔서 무척이나 놀랬습니다. 물론, 완벽하게 적용되진 않았지만 이번엔 클리앙의 아이포니앙분들과 완벽하게 적용되는 모습을 보고자 이렇게 모든 레이어를 다 분리하여 이번 iOS7 키패드 리디자인 ver2.0을 만들게 되었습니다. 자세한 설명은 아래 내용을 보며 설명 드리겠습니다. ▲ 전체적인 모습 ver1.0과 크게 다른 부분은 없으며, 상단 캐리어바와 하단 탭바는 기존 iOS7베타 디자인을 적용하였습니다. 그리고 키패드 부분 눌렸을때의 이미지(숫자5)에서 흰색의 아웃글로우가 적용 되었으며, 원의 가운데..

달력과 시계가 같이 있는 플립달력시계를 만들어 보았다. 왼쪽 제일처음 플립이 날짜를 나타내며 그다음으로 시간과 분을 나타낸다. 실제로 이런플립형 달력시계를 보면 위에서 아래로 차곡히 플립(Flip)되면서 쌓이는걸 볼 수 있다. ▲ 플립의 느낌을 주기위해 한장한장 쌓여있는 느낌의 두께를 주었다. ▲ 가운데 숫자부분이 접히는 부분 묘사 ▲ 전체적인 질감은 카본재질을 사용하였다. ▲ 레이어 정보 ▲ 작업하기전에 대략적인 구상을 한 스케치 보통 작업하기전, 대략적인 구상을 머릿속으로 한다. 그리고는 여기저기 인터넷을 돌아다니며 괜찮은 소스나 괜찮은 디자인을 찾아보고 참조를 한뒤, 모든걸 조합하여 간략하게 스케치를 하고 작업을 시작하는데, 항상 매번 느끼는 거지만 실제로 마우스를 잡고 작업을 할려고 하면 생각했던..

지인이 시계 이미지를 만들어 달라기에 엔틱한 느낌의 빈티지 시계를 만들어 보았다. 빈티지한 느낌을 나타내기위하여 서체와 색상등을 잘 고려하여 작업한다면 보다 좋은 느낌으로 만들 수 있을 것이다. (앞서 말한적있지만 필자의 환경은 매킨토쉬에서 CS6를 사용하고 있습니다. 따라서 맥의 command버튼은 윈도우의 ctrl과 같음을 알립니다.) 01.가로세로 512px의 캔버스를 만든다. 02.가이드라인을 미리 그어놓고 가로세로 350px의 정원의 쉐이프를 만든뒤, 아래의 레이어 스타일을 적용한다. ▲ clock body_01 레이어의 레이어스타일 ▲ 기본 색상이 적용된 모습 03.시계배경에 질감을 추가적으로 주기 위하여 같은 레이어를 하나더 복사한 뒤, 레이어 스타일을 제거하고 위의 그림처럼 Pattern ..

8월 1일의 첫번째 포스팅 이다. :-) 올해 가을쯤이면 iOS7 정식버전이 배포될 예정이다. 지금까지 iOS7 Beta4까지 나와있으며, 역시나 이번 iOS7의 가장 큰 변화는 기존 실물을 그대로 표현하는 '스큐어모픽'의 디자인에서 벗어나 평평하고 평면적인 '플랫'디자인으로 GUI로 전면 개편 한다는 것이다. 플랫디자인을 생각하며 처음 만든 카메라 아이콘 이다. ▲ 3가지 배경위의 플랫아이콘 페이스북에서 우연하게 본 카메라 아이콘을 보고 조금 변형 하여 만들어 보았다. 우선은 기본적으로 파스텔톤의 색상을 이용하고, 많은 쉐이프를 사용하기 보다는 최대한 적은 쉐이프들로 구성하여 만들었다. 무엇보다 가장 중요한건 단순하지만 무엇인지 확실히 알 수 있는 것이 아닐까 싶다. 그리고 플랫디자인이지만 가운데에 질..

6월이 지나고 어느덧 7월의 마지막 날입니다. 7월달엔 더 많은 글을 남길 수 있을거라 생각했는데 어쩌다 보니 포스팅수가 많이 적어서 내심 스스로 자책하고 있습니다... 제작 가이드 이외에 지금 게시글에 링크는 달지 않았지만 Design Source 부분에 괜찮은 패턴등을 정리하여 올려 놓았으니 필요하시면 참고 하시기 바랍니다. 갈수록 더워 지는 날씨속에 다들 몸관리 잘하시기 바랍니다 - GUI/UI/UX의 모든것(이미지를 클릭하면 해당글로 링크 됩니다) ■ 제작 가이드 모음