본문 바로가기

디자인

장안의 화제 스케치3를 써보다. 뭐가 새로 나왔다고 해도 나는 남들에 비해 받아들이는 속도가 비교적 느린편이다. (IT 종사자 기준, 그래도 일반인 보단 빠름). 스케치3가 화제가 되었을때가 벌써 2년이 넘은것 같은데, 이제서야 써보게 되었다. 처음에 스케치 홍보영상을 보고서는 보헤미안 코딩이라니 이게 뭔소리여 했었는데... 스케치 템플릿을 사용해서 html으로 변환하는 것은 해보지 않아서 모르겠지만, 적어도 간단한 프로토타입 제작이나 목업 제작에는 이만한 도구가 없는 것 같다. 여태까지는 포토샵을 써오고 있었는데, 갈수록 무거워지는 포토샵에 불만이 많았다. 특히 최근들어 3d 기능부터 시작해서 오만가지 쓸데없는 기능들이 추가 되는 모습을 보이고 있어 간단한 스킨이나 웹페이지를 만들때는 목업 조차도 만들지 않고 그냥 종이에 슥슥 그린것.. 더보기
Material Design Lite Tistory - 1.0.0 beta ※본 스킨은 베타 버전이므로 예상치 못한 버그가 있을 수 있음. 버그 발견시 아래 댓글난에 제보바람 3년만에 만드는 티스토리 배포용 스킨이다. 현재 쓰고 있는 스킨을 만들기 위해 인터넷 여러 곳을 떠돌아 다니며 많은 것들을 보았다. 그러다 발견한 것이 바로 MDL 이다. MDL은 구글 디자인 팀에서 만든 머티리얼 디자인 웹 개발 키트이다. 기존의 머티리얼 디자인이 안드로이드와 그 외의 구글 제품들에 적용이 되었는데 여기서 한단계 나아가 웹에서도 머티리얼 요소를 쓰게 해준다. 머티리얼 테마인 리플 버튼이나 갖가지 애니메이션이 모두 지원이 된다. 이 테마는 기존에 있던 스킨을 티스토리용으로 변환 한것이다. MDL 홈페이지에 가면 원본 스킨을 볼 수 있다. MDLT 스킨은 티스토리에서 기본으로 지원하는 기능을.. 더보기
이런 그래픽 툴이 존재하다니... - Affinitiy designer 영상을 보다가 실제로 입이 떡벌어졌다. 진짜루... 일러스트레이터와 포토샵을 같이 쓰면서 굳이 왜 레스터와 백터 드로잉 툴을 분리시켜서 따로 만들었을까? 라는 생각을 가끔 했었는데 나와 비슷한 생각을 하는 사람들이 존재 하긴 하나 보다. Affinitive Designer는 일러스트레이터와 포토샵의 기능을 한데 모은 툴이라고 볼 수 있다. 백터 그래픽 뿐만 아니라 레스터 그래픽도 함께 지원하기 때문이다. 게다가 제한 많은 확대기능이나 미리 보기 불가능한 필터기능등 아주 엿같았던 포토샵/일러스트레이터의 단점을 시원하게 해결해주었다. 특히 동영상에 소개된 기능중에 크기 별로 자동 저장하는게 상당히 마음에 든다. 매번 테마 제작할때 마다 아이콘을 따로., 그리고 크기별로 저장하는게 매우 귀찮았는데 이런게 자동.. 더보기
CSS3의 HLSA 색상이 멋진 이유 CSS에서 사용되는 색상은 hex 코드, rgb(a), 그리고 색상 명이 있다. hex 코드는 웹 뿐만 아니라 워낙에 광범위 하게 쓰이고 있다 보니 따로 설명할 필요가 없다고 본다. rgb 같은 경우에는 IE7 이하는 alpha 필터를 별도로 지정해줘야 하기 때문에 rgba 속성은 쓸 수가 없다. 색상 명은 w3c 표준으로 지정된 몇 개의 색상 명이 있는데 이것들은 이름만 적으면 바로 사용할 수 있다. 그런데 이번에 새로 등장한 CSS3에서 추가된 색상 표기 방법 중에 HLSA라는 것이 추가 되었다. 이것은 무엇일까? HLSA는 Hue Lightness Saturation Alpha의 약자이다. 각각의 항목을 설명해보자면, H는 색조, L은 명도, S는 채도, A는 투명도를 뜻한다. 기존의 rgba 컬러.. 더보기
스킨 V.2 업데이트 후기 + 디자인 사설 디자인과 속도. 웹 페이지를 만들 때 항상 충돌하게 되는 요소 입니다. 디자인에 신경을 쓰다 보면 웹 페이지 속도가 서서히 감소하는 것이 눈에 보일 것이고, 속도에 신경을 쓰다보면 정말 흰화면에 글자와 사진만 몇 개 떠다니는 수준이 되어버릴 수도 있습니다. 보통 스킨을 제작하게 되면 항상 고민하는 것이 바로 속도와 디자인 입니다. 늘 좀 더 새롭고 좋은 모습을 추구하면서도, 바라는 대로 무턱대고 만들어버리면 속도에 치명적인 영향을 미쳐버리고 맙니다. 그래서 스킨을 처음 만들 때 부터 지금까지도, 좋은 디자인을 가지면서 속도가 빠를 수는 없을까 라는 생각을 늘 상 하곤 했습니다. 이런 고민을 항상 하면서 스킨을 제작하다 보니 이전에는 단순한 구조임에도 속도가 한심할 정도로 느렸지만 지금은 숙련도가 쌓였는지.. 더보기
도요타 칼티 디자인 센터 40주년 기념사진 도요타 칼티 디자인 센터가 설립한지 40주년이 되었습니다. 켈리포니아에 있는 도요타 칼티 디자인 센터는 일본 메이커가 미국에 처음 세운 디자인 센터로도 알려져 있습니다. 이 곳에서는 일본 내수용이 아닌 미국 시장용으로 현지 입맛에 맞는 차량을 디자인 하는 곳 입니다. 1973년 10월 2일에 설립된 칼티 디자인 센터는 올해로 40주년을 맞았습니다. 특히 도요타에서 젊은 층을 공략하기 위해 나온 스포츠카들이 대부분 이곳의 손길을 거쳤는데요, 1978년형 도요타 셀리카를 디자인 했던 디자인 팀이 모여서 찍은 사진을 모티브로 2014년 FT-1 컨셉트를 디자인 한 팀이 모여서 비슷하게 연출해 사진을 찍었습니다. 그때와 비교하면 인원도 많이 늘었지만 옛날 사진에서 볼 수 있었던 몇몇 분도 여전히 계신 것이 눈에.. 더보기
애플 iOS7.1 변경사항 심층분석 서론 UI 전화 음악 캘린더 키보드 사진 날씨 지도 비디오 미리알림 패스북 설정 손쉬운사용 잠금화면 알림센터 서론 저는 아이폰4를 사용 중입니다. 이제 사용 한지 3년 반이 넘어가고 있는데, iOS6 까지는 정말 최신 핸드폰 부러울 것 없이 잘 사용하고 있었습니다. 그러나 iOS7 이후로는 거의 지옥과도 같은 사용 환경을 맛보고 있었습니다. 베타1 부터 사용해 왔는데, 버벅거리는 것은 둘째고 시도 때도 없이 스프링 보드가 크래쉬하여 리스프링 되는 현상을 경험했습니다. 이게 베타라서 그러려니 했지만 정식 버전에서도 전혀 나아지는 점이 없더군요. 게다가 아이폰4는 사양이 딸려서 그렇다 쳐도, 아이폰5S나 아이패드 에어등도 메모리 부족으로 튕기거나 어플이 갑자기 꺼지는 상황이 발생한다는 이야기를 많이 들었습니.. 더보기
2015 시트로앵 C1 - 얘낸 잘나가다가 왜 또 이러나 시트로앵이 신차를 내놓았습니다. 기존 도요타/푸조/시트로앵 3사 합작으로 나왔던 C1의 후속모델인데요, 이번에도 역시 공동 플랫폼으로 태어났습니다. 그래서 푸조 108과 시트로앵 C1, 도요타 아이고~~ 는 형제차 입니다. 문제는... 디자인이 정말 충공깽 수준이라는 것입니다. 전체적으로 다 이쁜데 해드램프가 정말 산통을 깨는군요. C4 피카소도 듀얼 해드램프로 약간 개판을 쳤던 전적이 있는데, 이건뭐 할말이 없을 정도로 개판을 쳐놓았네요 -_- (C4는 이쁘기나 하지 이건 뭐) 아니 DS3 같은 것을 보면 절대 디자인을 못하는 회사가 아닌데 왜 이런 삽질을 하는지 모르겠어요 마치 닛산의 역대급 개똥디자인인 쥬크를 보는 듯한 느낌을 받습니다. 아마도 눈썹 해드렘프를 적용한 차는 이차가 최초가 아닐까 합니.. 더보기
티스토리 카테고리별 스킨 - 풀 스크린 레이아웃 car 카테고리에 적용되는 스킨이며, 사진과 슬라이더, 유투브 영상이 화면에 100% 꽉차게 표시 됩니다. 사진의 크기가 1920보다 작을 경우에는 원래 크기대로 뜹니다. 비디오는 flex-video 옵션을 적용했을시에만 적용 됩니다. 기본적으로 저화질 영상에는 flex-video가 적용이 되지 않습니다. 특정 게시글에는 상단 베너이미지도 바뀝니다. 더보기
Life is a Journey 스킨 제작 후기 + 디자인 사설 요즘 대세는 플랫 제가 만든 1번째 스킨인 Congnocenti가 플랫도 아니고 그런지도 아니고 어정쩡했었고, 2번째 스킨인 TA는 부트스트랩2 기반으로 세미 플랫한 스타일을 가졌었습니다. 3번째 스킨인 프로토타입은 파운데이션 기반으로 스큐어모픽 틱한 디자인을 구현했었죠. 다중 레이어와 그림자 사용으로 거의 3D 가까운 모습을 보여줬었습니다. 11월에 만든 스킨인데 계속 쓰려고 했지만 막상 안 쓰는 기능을 좀 빼고 코드를 정리하려고하니 너무 마크업이 개판이라서 그냥 새로 만드는 방향으로 가게 되었습니다. 스킨을 새로 만들면서 계획했던것은 요즘 유행하는 완전 ‘플랫 스타일을 구현하자’ 였습니다. 그래서 주요 디자인 키워드는 flat&simple 이었습니다. 하지만 중간 중간에 그림자 요소를 넣어서 너무 지.. 더보기