알씨타운

​ ​ 안녕하세요~ 소프트랩스입니다. ​ 오늘은 모바일 앱 11번가를 분석해 보겠습니다. 최근에 유튜버 미디어디자이너님께서 모바일 UI UX에 대한 10가지 원칙을 아주 잘 요약해 주셔서 그를 바탕으로 11번가 앱을 분석해 보겠습니다. ​ 모바일 레이아웃을 디자인하거나 벤치마킹 할 때는 분석이 가장 중요하죠~! 10가지 모바일 원칙과 함께 알아보겠습니다!!! ​ ​ ​ ​ ​ ​ ​ 첫 번째. 폰트 크기 모바일 앱에서 폰트 사이즈는 상당히 중요한데요. 너무 크거나 작으면 웹앱의 가독성이 심하게 떨어진다고 합니다. 그래서 원칙 같은 것을 적어두는데 1rem 기본으로 12px로 맞추고 그보다 작지 않게 디자인하는 것이 중요합니다. 그리고 최대 크기는 그 두 배수인 24px을 넘기지 않는 것이 가장 좋다고 합..

최근 미 실리콘밸리에서 ‘인간의 일을 전부 대체할 수 있는 범용 인공지능(AGI)의 시작점’으로 불리는 인공지능(AI)이 등장했습니다. ‘오토GPT(AutoGPT)’라는 프로그램입니다. 오토GPT는 ‘시그니피컨트 그래비타스’(Significant Gravitas)라는 개발자가 오픈AI의 언어 모델 GPT-4를 기반으로 만든 오픈 소스 파이썬(프로그래밍 언어 중 하나) 프로그램으로 지난달 30일 개발자들의 코드 공유 플랫폼인 깃허브에 올라왔습니다. ​ ​ ​ 생성AI 서비스 ‘오토GPT(AutoGPT)’ 등장 AI 스타트업 시그니피컨트 그래비타스는 지난달 30일 생성AI 서비스 ‘오토GPT(AutoGPT)’를 공개했습니다. 오토GPT 공개 후 ‘#AutoGPT’란 태그는 트위터 트렌딩 1위를 차지했고, 깃..

안녕하세요 :) 알씨타운입니다. 오늘은 챗GTP나 API 활용법에 대해 알아보겠습니다 어떻게 하면 API 적용할지 자세히 다뤘습니다. ​ ChatGPT란? ChatGPT란 OpenAI가 개발한 GPT-3.5 기반의 대형 언어 모델(large language model, LLM) 챗봇을 뜻합니다. ChatGPT는 대화 형태로 상호작용을 하며 놀라울 정도로 인간과 대화하는 것과 같은 반응을 제공하는 능력을 가지고 있습니다. 대형 언어 모델 (large language model, LLM)은 일련의 단어에서 다음 단어를 예측하는 작업을 수행합니다. 또한 ChatGPT는 인간 피드백형 강화학습 (Reinforcement Learning w/ Human Feedback, RLHF)을 사용하는데요, 이는 사용자의 ..

​ ​ 안녕하세요 :) 알씨타운입니다~~ 오늘은 hover와 연혁 디자인이 돋보이는 '카노' 모바일 웹 리뷰 시작해보겠습니다. ​ https://www.e-kano.com/kr/ ​ ​ header ​ 먼저 header를 비교해보면 최상단에 있으면 배경이 transparent(투명)였다가 scroll-down 하게 되면 배경색이 #ffffff(흰색)로 변경되고, ​ header에 hover 하게 되면 전체 소메뉴가 노출되면서 배경이미지가 노출됩니다. 전체 노출되면 흰색 여백이 자칫 심심할 수 있는데, 배경이미지를 삽입함으로써 여백을 잘 커버했다고 생각이 듭니다. ​ 햄버거 메뉴 ​ 햄버거 메뉴 버튼을 클릭하게 되면 풀페이지로 구성되어 노출됩니다. 대메뉴 hover 했을 때 대메뉴가 강조색으로 변경되고 오..

​ ​ ​ 안녕하세요:) 알씨타운입니다. 오늘은 관공서 사이트를 가져와봤는데요! 다양한 형태의 애니메이션이 돋보이는 페이지라 한번 리뷰해보려 합니다! ​ https://www.yuseong.go.kr/tour/ ​ ​ 반응형 ​ 다양한 사이즈에서 반응형이 작동하는 것으로 보아 width값에 따라 깨짐 없이 표현하려고 했던 것으로 보입니다. 반응형 사이즈가 많으면 디테일이 살아나지만, 그만큼 관리하기 어려워지는 단점이 있죠. ​ 대메뉴 ​ 대메뉴를 hover 했을 때, 3depth의 구성을 볼 수 있는데, depth가 바로 아래로 나열되는 형식이 아니라 목록처럼 구성하여, 시각적으로 각 메뉴의 정보를 한눈에 볼 수 있도록 제작했다는 점이 돋보입니다. ​ ​ ​ 햄버거 메뉴 ​ ​ 햄버거 버튼은 pc와 mo..

​ ​ 안녕하세요 알씨타운입니다! :) 엔씨소프트(NC)가 최근에 공식 브랜드 미디어 'NC PLAY'를 오픈했습니다. 그 동안 'NC 공식 블로그'였던 곳을 리뉴얼해 PC,MOBILE 반응형 웹페이지를 구성해서 웹분석을 해보고자 합니다~ ​ ​ ​ https://about.ncsoft.com/play 메인페이지 ​ ​ 메인 최상단에는 동영상이 삽입되어 있습니다. 동영상이 반응형에 따라 크기가 변화되는데 부모 태그를 밖에 감싸고 object-fit : cover를 사용해서 크기가 줄어들거나 크기가 커지면 그 크기에 맞게 cover됨을 알 수 있습니다. ​ ​ ​ ​ scroll 이벤트가 되면 바로 아래로 내려가지 않고 동영상의 크기가 점차 줄어들고, 동영상 뒤 이미지 나타나면서 동영상을 감싸고 있던 배경..

안녕하세요 :) 알씨타운입니다. ​ 요즘 아이들도 코딩을 배우고 있다는 사실 알고 계신가요? 아이들이 사고하고 표현할 수 있도록 (옛날의 과학상자 같은) 모터, led 등으로 프로그래밍 언어를 배울 수 있도록 도와주는 장난감을 파는 사이트가 있어 가지고 왔습니다. (웹 반응형 페이지로 되어있어 더욱 기대가 됩니다.) ​ 어떻게 구성했는지 분석해보겠습니다! ​ 메인페이지 메인페이지 pc버전을 먼저 둘러보자면, width 값이 1280px이 되면 햄버거메뉴가 나타나면서 대메뉴들과 쇼핑몰 링크 버튼이 사라지는 것을 알 수 있습니다. ​ ​ mobile에서 768px과 767px사이에 반응형 미처리된 아쉬운 부분을 볼 수 있었지만, 대체적으로는 반응형 처리가 잘 되어있는 모습을 볼 수 있었습니다. header ..

​ 안녕하세요 :) 알씨타운입니다. 사진관에서 사진을 찍으면 원하는 대로 못 찍는 경우나, 몸이 굳어서 부자연스러운 자세로 찍는 경우가 허다하실 겁니다. 그래서인지 셀프 사진을 찍는 사람들이 부쩍 증가하고 있습니다. ​ 오늘 준비한 리뷰는 셀프 사진관인 '사진온실'입니다. 페이지 전환 화면은 꽉 채운 풀페이지로 구성되어있으며, 페이지 스크롤 시 이벤트가 적용되어있어 절반을 나누어 왼쪽은 아래로 fade out 되고 오른쪽은 위로 fade out되어서 독특한 애니메이션 구조를 가지고 있습니다. 약간의 딜레이가 있어 불편한 감이 있지만, 참신한 페이지 구성으로 보입니다. ​ ​ 스크롤을 넘기면 페이지 내에 contents들이 나타나는 효과가 있습니다. 자연스럽게 스크롤을 넘길 때마다 fade up 되어서 나..